Boa-tarde galera! Venho com um tutorial muito útil e simples, trata-se do menu dropdown. Este menu, para quem não conhece é o mesmo que uso no topo do site. Sem bla bla bla, vamos lá.

Procure por

</head>

Copie e cole este código acima da tag encotrada

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'/>
  <script type='text/javascript'>
  //<![CDATA[

var timeout    = 500;
  var closetimer = 0;
  var ddmenuitem = 0;

function jsddm_open()
  {  jsddm_canceltimer();
  jsddm_close();
  ddmenuitem = $(this).find('ul').css('visibility', 'visible');}

function jsddm_close()
  {  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
  {  closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
  {  if(closetimer)
  {  window.clearTimeout(closetimer);
  closetimer = null;}}

$(document).ready(function()
  {  $('#jsddm > li').bind('mouseover', jsddm_open)
  $('#jsddm > li').bind('mouseout',  jsddm_timer)});

document.onclick = jsddm_close;
  //]]>
  </script>

Agora procure por

]]></b:skin>

depois de encontrado, este código acima à tag encontrada

#jsddm {
margin: 0;
padding: 15px;
z-index:1000000000;
position:relative;
}

#jsddm li {
float: left;
list-style: none;
font: 12px Tahoma, Arial;
}

#jsddm li a {
white-space: nowrap;
margin:1px 3px;
color:#002a37;
text-shadow:#7eb8ca 1px 1px 0px;
background: -webkit-gradient(linear, left top, left bottom, from(#1a7796), to(#40a0bb));
background: -moz-linear-gradient(top, #1a7796, #40a0bb);
border-left: 1px solid #18596f;
border-right: 1px solid #18596f;
border-bottom: 1px solid #18596f;
border-top: 1px solid #68b4c9;
padding: 1px 6px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
font-size: 11px;
font-family: Helvetica, Arial, Sans-Serif;
vertical-align: middle;
}

#jsddm li a:hover {
background: -webkit-gradient(linear, left top, left bottom, from(#161616), to(#202020));
background: -moz-linear-gradient(top, #161616, #202020);
border-left: 1px solid #161616;
border-right: 1px solid #161616;
border-bottom: 1px solid #161616;
border-top: 1px solid #343434;
box-shadow: #000 0px 0px 1px solid;
color:#fff;
text-shadow:#000 1px 1px 2px;
text-decoration:underline;
}

#jsddm li ul {
margin-top:5px;
padding: 2px 0px 2px 0px;
position: absolute;
visibility: hidden;
float:left;
background: #fff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 1px solid #f1f1f1;
}

#jsddm li ul li {
float: none;
display: inline;
}

#jsddm li ul li a {
width: auto;
background: -webkit-gradient(linear, left top, left bottom, from(#40a0bb), to(#1a7796));
background: -moz-linear-gradient(top, #40a0bb, #1a7796);
border-left: 1px solid #18596f;
border-right: 1px solid #18596f;
border-bottom: 1px solid #18596f;
border-top: 1px solid #68b4c9;
transition:none;
-webkit-transition:none;
-moz-transition:none;
-o-transition:none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
color:#002a37;
text-shadow:#7eb8ca 1px 1px 0px;
float:left;
}

#jsddm li ul li a:hover {
background: -webkit-gradient(linear, left top, left bottom, from(#fdebae), to(#fdebae));
background: -moz-linear-gradient(top, #fdebae, #fdebae);
border:1px solid #585245;
text-shadow: #fff8e0 1px 1px 0px;
color: #9e660d;
transition:none;
-webkit-transition:none;
-moz-transition:none;
-o-transition:none;
}

Salve o modelo. Após terminar, use o código abaixo para adicionar o menu onde deseje

<ul id='jsddm'>
<li><a href='/#home'>Home</a>
<li><a href=''>Menu Principal</a>
<ul>
<li><a href='/#'>Teste 1</a></li>
<li><a href='/#'>Teste 2</a></li>
<li><a href='/#'>Teste 3</a></li>
<li><a href='/#'>Teste 4</a></li>
</ul>
</li><li><a href=''>Teste 3</a>
<ul>
<li><a href='/#'>Teste 1</a></li>
<li><a href='/#'>Teste 2</a></li>
<li><a href='/#'>Teste 3</a></li>
<li><a href='/#'>Teste 4</a></li>
</ul>
</li>
</ul>

Um simples tutorial, para adicionar um gadget acima da postagem. Vários blogs já vem este incluído, mas ainda existem o que não tem. Vamos ao tutorial.

Procure por

<div id='main-wrapper'>

Após encontrada, cole este código abaixo à div encontrada

<b:section class='column-main2' id='main-column' showaddelement='yes'/>

Bom gente, um simples tutorial a vocês, mas muito eficiente ás vezes, então, não é bem editar botão "Participar deste site", é criar um botão para seguir o site/blog, sem que apareça os seguidores, como no menu esquerdo da AnimeWelfDesign, esse tutorial é muito simples, mas vocês tem de presta atenção na hora de fazê-lo. Vamos lá.

Primeiro, crie a imagem, mas se vocês preferirem, podem também usar texto, eu irei usar um texto como exemplo, identificado como "Seguir este site", olhem

<a href="http://www.blogger.com/follow-blog.g?blogID=7897190147248483600" title="Siga-nos!">Seguir este site</a>

Este acima, é apenas um EXEMPLO, pare editar e por de seu site/blog, basta pegar o código abaixo, e no lugar do XXXXXXXXXXXXXXXXXXX, vocês devem entrar no painel do site e ir em Configurações, e no URL da página, vai estar parecido com o código abaixo, e onde estiver X', no seu URL vai ter números, copie este número, e cole no lugar do XXXXXXXXXXXXXXXXXXX.

<a href="http://www.blogger.com/follow-blog.g?blogID=XXXXXXXXXXXXXXXXXXX" title="Siga-nos!">Seguir este site</a>

Pronto, está feito, mas se quiser botar imagem, é simples, no lugar do texto "Seguir este site", coloque o código de sua imagem. Até mais!

Este efeito é bem legal, muitos procuram mas não é fácil de se achar, este efeito faz com que todo 'título' de um link apareça com um efeito bem legal, segue o mouse por todo o link, um exemplo, na Publicidade do site, no menu esquerdo ((passe o mouse)). Agora vamos ao tutorial.

Procure por

]]></b:skin>

E cole este código acima a esta tag

div#qTip {
display: none;
font-family: 'Overlock', cursive;
text-align: left;
position: absolute;
z-index: 1000;
background: -webkit-gradient(linear, left top, left bottom, from(#161616), to(#202020));
background: -moz-linear-gradient(top, #161616, #202020);
overflow:auto;
border-radius: 3px 6px 3px 6px;
-moz-border-radius: 3px 6px 3px 6px;
-webkit-border-radius: 3px 6px 3px 6px;
-khtml-border-radius: 3px 6px 3px 6px;
border-left: 1px solid #161616;
border-right: 1px solid #161616;
border-bottom: 1px solid #161616;
border-top: 1px solid #343434;
color:#fff;
text-shadow:#000 1px 1px 2px;
font-size:10pt;
padding:0px 6px 3px 6px;
box-shadow:#898479 1px 1px 0px;
margin-top:7px;
text-transform: lowercase;
}

Depois, procure por

</head>

E cole este javascript acima a esta tag

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/><script language='JavaScript' src='http://dl.dropbox.com/u/3173073/GothicDarkness/qTip.js' type='text/JavaScript'/>
<link href='http://fonts.googleapis.com/css?family=Overlock' rel='stylesheet' type='text/css'/>

O mais importante é o javascript, mas para modificar a cor, font e etc, é necessário usar o css.

Clique aqui para ver todos os tutoriais HTML e CSS em postagens

Ação mostrar/ocultar com imagemEfeito TooltipExibir somente título nos marcadoresMenu dropdownPáginas NumeradasTabelinha em CSS

Clique aqui para ver todos os tutoriais HTML em postagens

Alterando faviconAção mostrar/ocultar com inputBarra de pesquisaBloquear botão direito no seu blog/siteBloquear tecla 'Ctrl' em seu blog/siteEfeito MarqueeEfeito neveImagem mouseoverMensagem ao entrar no blogOcultar elementos em páginas específicasVoltar ao topo com efeito deslizante

Clique aqui para ver todos os tutoriais CSS em postagens

Efeitos CSSGadget acima da postagemMudar cursor do mouse em seu blogPáginas numeradasPersonalizar cor de seleção de textoRetirar "mostrando postagens com..."Retirar navbar do blogger

Clique aqui para ver todos os hackers em postagens

Bloquear botão direito no seu blog/siteBloquear tecla 'Ctrl' em seu blog/siteEfeito neveExibir somente título nos marcadoresOcultar elementos em páginas específicasPáginas numeradasPersonalizar cor de seleção de textoRetirar "mostrando postagens com..."Retirar navbar do blogger

Clique aqui para ver todos os tutoriais comuns em postagens

Alterando faviconAção mostrar/ocultar com inputAção mostrar/ocultar com input com imagemBarra de pesquisaConfigurando barra de rolagemEfeitos CSSEfeito MarqueeEfeito TooltipGadget acima da postagemImagem mouseoverMenu dropdownMensagem ao entrar no blogMudar cursor do mouse em seu blogTabelinha em CSSVoltar ao topo com efeito deslizante