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.

Procure por

]]></b:skin>

cole assim desta tag

::-webkit-scrollbar {
width: 9px; 
height: 5px; 
border-radius:4px 4px;
-moz-border-radius:4px 4px;
-webkit-border-radius:4px;
-khtml-border-radius:4px;
} 
::-webkit-scrollbar-track-piece { 
background: #5e0000 ; 
} 
::-webkit-scrollbar-thumb:vertical { 
height: 5px; 
background-color:  #fff ; 
border-radius:4px 4px;
-moz-border-radius:4px 4px;
-webkit-border-radius:4px;
-khtml-border-radius:4px;
} 
::-webkit-scrollbar-thumb:horizontal { 
width: 5px; 
background-color:  #fff; 
border-radius:4px 4px;
-moz-border-radius:4px 4px;
-webkit-border-radius:4px;
-khtml-border-radius:4px;
} 
::-moz-scrollbar {
width: 9px; 
height: 5px; 
border-radius:4px 4px;
-moz-border-radius:4px 4px;
-webkit-border-radius:4px;
-khtml-border-radius:4px;
} 
::-moz-scrollbar-track-piece { 
background: #5e0000 ; 
} 
::-moz-scrollbar-thumb:vertical { 
height: 5px; 
background-color:  #fff ; 
border-radius:4px 4px;
-moz-border-radius:4px 4px;
-webkit-border-radius:4px;
-khtml-border-radius:4px;
} 
::-moz-scrollbar-thumb:horizontal { 
width: 5px; 
background-color:  #fff; 
border-radius:4px 4px;
-moz-border-radius:4px 4px;
-webkit-border-radius:4px;
-khtml-border-radius:4px;
} 

::-khtml-scrollbar {
width: 9px; 
height: 5px; 
border-radius:4px 4px;
-moz-border-radius:4px 4px;
-webkit-border-radius:4px;
-khtml-border-radius:4px;
} 
::-khtml-scrollbar-track-piece { 
background: #5e0000 ; 
} 
::-khtml-scrollbar-thumb:vertical { 
height: 5px; 
background-color:  #fff ; 
border-radius:4px 4px;
-moz-border-radius:4px 4px;
-webkit-border-radius:4px;
-khtml-border-radius:4px;
} 
::-khtml-scrollbar-thumb:horizontal { 
width: 5px; 
background-color:  #fff; 
border-radius:4px 4px;
-moz-border-radius:4px 4px;
-webkit-border-radius:4px;
-khtml-border-radius:4px;
} 
.post p { 
margin:0 0 0; 
}

Mude a cor como quiserem

Ex:
Anime Welf Design

Bom,para usar esse efeito basta apenas copiar o codigo abaixo e colar exemplo na postagem:

Codigo:

<marquee>TEXTO</marquee>

Belo efeito ai pra vocês ;D

Ex:

Anime Welf Design Tudo sobre Design

Bom para usar as Bordas em HTML basta apenas adicionar o codigo abaixo quando for postar. Pegue o código logo abaixo:

<div style="border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; padding:1px 2px 2px 3px; border-color: black; border-style: dashed; border-width: 2px; font-family: Verdana,sans-serif;">
Anime Welf Design Tudo sobre Design</div>

Propriedades:

border-style: dashed

border-style: dotted

border-style: double

border-style: groove

border-style: solid

border-style: inset

border-style: outset

Para explicar essa tabela seria meio complicado então inseri ela aqui abaixo

Testando tabelinha	Download
Testando tabelinha	Download

Procure pela tag

]]></b:skin>

Acima dela insira o CSS abaixo

#down{
background: -webkit-gradient(linear, left top, left bottom, from(#8d0000), to(#4c0000));
background: -moz-linear-gradient(top, #8d0000, #4c0000);
border:1px solid #4e0000;
-moz-border-radius: 4px;
-khtml-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
text-shadow: #000 1px 1px 0px;
color: #fff;
padding:0px 0px 0px 16px;
}
#down a:hover{
background: -webkit-gradient(linear, left top, left bottom, from(#8d0000), to(#4c0000));
background: -moz-linear-gradient(top, #8d0000, #4c0000);
border:none;
-moz-border-radius: 4px;
-khtml-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: #330000;
text-shadow: 1px 1px 0px #6f1f1f;
}
#down2{
background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#d8d8d8));
background: -moz-linear-gradient(top, #f2f2f2, #d8d8d8);
border:1px solid #505050;
-moz-border-radius: 4px;
-khtml-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
text-shadow: #ffffff 0 1px 0;
color: #363636;
padding:0px 0px 0px 5px;
}

Salve o design, logo após pegue o código abaixo e insira onde queira colocar a 'tabelinha'

<center><table 1="" id="down1" style="width: 400px;"><tbody>
<tr id="down1"> <td id="down2" width="300">Testando tabelinha </td> <td id="down" width="70"><a href="http://www.animewelfdesign.com.br/">  Download</a></td> </tr>
<tr id="down1"> <td id="down2" width="300">Testando tabelinha </td> <td id="down" width="70"><a href="http://www.animewelfdesign.com.br/">  Download</a></td> </tr>
</tbody>  </table>
</center>

Imagem oneclick é quando você passa o mouse sobre uma imagem e aparece outra

Insira um dos código onde queira colocar a imagem oneclick
Código 1

<a href="LINK"><img alt="" class="quali" height="25" id="modelo_r3_c2" onclick=" document.getElementById('MP4308').style.display='block'; document.getElementById('RMVB308').style.display='none';" onmouseout="this.src='IMAGEM1'" onmouseover="this.src='IMAGEM2'" src="IMAGEM1" style="cursor: pointer;" width="105" /></a>

Código 2

<a href="LINK"><img onmouseout="this.src='IMAGEM1';" onmouseover="this.src='IMAGEM2';" src="IMAGEM1" /></a>

Para colocar as imagens, troque IMAGEM1 pela URL da primeira imagem que vai aparecer, e troque IMAGEM2 pela URL da imagem que vai aparecer ao passar o mouse

Favicon é aquela imagensinha que fica do lado do título do blog

Procure por

<b:include data='blog' name='all-head-content'/>

Abaixo do código encontrado coloque o código abaixo

<link href='IMAGEM' rel='shortcut icon' type='image/x-icon'/>

Para mudar a imagem do favicon coloque a URL da imagem em IMAGEM

Botão mostrar/ocultar com imagem é quando alguém clica em uma imagem e apareçe algo em baixo e clica sobre a imagem novamente e desaparece, para entender melhor; siga o tutorial e teste
, para isto tem duas maneiras, siga apenas uma

1ªmaneira
Procure por

]]></b:skin>

Acima desta tag cole

#mostrar{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRab65AM82qb38E4Cu49WgSsSIoh9XhDXhEth3RJRXs03B2OFfHKv5m_8gg6nvQldxAwm5H_zldhiMkDB1MidfD_jLrEawJumZ3W10cibpnJ3BeBokxL8pe7ABl7A11qoZtTvVj2kp6Jc/s1600/Untitled-2.png) no-repeat;
}

Agora cole o código abaixo onde quira colocar o botão com imagem

<div class="pre-spoiler">
<input id="mostrar" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH2mqHNH1muFx_Cje2npmPSYY9aSD__lbzlS5czt-cfbdod4XpSZvfYthOOVSkFxL5k0Vo_9jQ_z2wXAQm9pZAbBjhzLk3y4QDhqxDZBOsWJ96fG0TtF-RMQmTLixB2N1ktLPFyvl4770/s1600/espa%25C3%25A7o.png' tabindex='2' title='Abrir' style="padding: 0px; width: 453px; height:24px; cursor: pointer;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Ocultar'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Mostrar';}" type="image">
<div class="spoiler" style="display: none;">
<div style="text-align: center;">
CONTEÚDO A SER MOSTRADO E OCULTADO
</div></div></div>

2ªmaneira
Apenas cole o código abaixo onde queira colocar essa ação com imagem

<div class="pre-spoiler">
<input src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRab65AM82qb38E4Cu49WgSsSIoh9XhDXhEth3RJRXs03B2OFfHKv5m_8gg6nvQldxAwm5H_zldhiMkDB1MidfD_jLrEawJumZ3W10cibpnJ3BeBokxL8pe7ABl7A11qoZtTvVj2kp6Jc/s1600/Untitled-2.png' tabindex='2' title='Abrir' style="padding: 0px; width: 453px; height:24px; cursor: pointer;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Ocultar'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Mostrar';}" type="image">
<div class="spoiler" style="display: none;">
<div style="text-align: center;">
CONTEÚDO A SER MOSTRADO E OCULTADO
</div></div></div>

Troque 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRab65AM82qb38E4Cu49WgSsSIoh9XhDXhEth3RJRXs03B2OFfHKv5m_8gg6nvQldxAwm5H_zldhiMkDB1MidfD_jLrEawJumZ3W10cibpnJ3BeBokxL8pe7ABl7A11qoZtTvVj2kp6Jc/s1600/Untitled-2.png' url da imagem que queira por para clicar e aparecer o conteúdo em baixo e troque 'CONTEÚDO A SER MOSTRADO E OCULTADO' pelo que queria mostrar ao clicar na imagem

Botão mostrar/ocultar com input é quando alguém clica no botão e apareçe algo em baixo e clica sobre o botão novamente e desaparece, para entender melhor; siga o tutorial e teste

Copie e cole este código onde queire colocar o mostrar/ocultar

<div class="pre-spoiler">
<input id="xs" value="Mostrar" style=" padding: 2px 5px 2px 5px; " onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Ocultar'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.value = 'MOSTRAR';}" type="button">
<div class="spoiler" style="display: none;">
CONTEÚDO A SER MOSTRADO E OCULTADO
</div></div>

Troque 'MOSTRAR' por uma palavra ou trecho que queira colocar no lugar que tenha o sentido de clicar para mostrar e troque 'CONTEÚDO A SER MOSTRADO E OCULTADO' pelo que queria mostrar ao clicar no botão

Barra de pesquisa é para quando alguém que esteja procurando algum tutorial escreva na barra e clique em "BUSCAR", "IR" ou também "PROCURAR", você decide, então vamos lá

Cole o código abaixo no lugar onde queira colocar sua barra de pesquisa

<form id="searchthis" action="/search" style="display:inline;" method="get"><input id="b-query" maxlength="50" name="q" size="16" type="text"/><input id="b-searchbtn" value="BUSCAR" type="submit"/></form>

Em "BUSCAR", troque pela palavra que queira por e pronto

Você que está precisando de dar boas-vindas ou mensagem de favor ou qualquer outra coisa siga esse tutorial

Procure pelo seguinte trecho

</body>

Acima a este trecho copie e cole

<script>alert('TEXTO DO ALERTA');</script>

Troque TEXTO DO ALERTA pela mensagem que queira por

Mudar o cursor do mouse em blog premite mudar o cursor em seu blog, existem duas meneiras de trocar-lo.A 1ª permite que você mude o cursor normalmente e em link, ja no segundo, funciona no link e normal mas só é usado um cursor para link e normal.

1ª maneira:
Procure por

]]></b:skin>

Acima a este trecho copie e cole o seguinte código

body, a {cursor: url(IMAGEM DO CURSOR), progress;}
a:hover {cursor: url(IMAGEM DO CURSOR AO PASSAR EM UM LINK), progress;}
.imagedropshadow {border: solid 1px #000000;}

2ª maneira:
Procure por

]]></b:skin>

Acima a este trecho copie e cole o seguinte código

body, a {cursor: url(IMAGEM DO CURSOR), progress;} a:hov

Visualize e se tudo estiver correto salve.

Voltar ao topo com efeito deslizante é quando você clica em uma imagem ou texto qualquer e volta ao header do blog deslizando.

Procure por

</body>

Assima deste trexo copie e cole

<script type="text/javascript">
    $(document).ready(function() {
       $('#subir').click(function(){ 
          $('html, body').animate({scrollTop:0}, 'slow');
      return false;
         });
     });
</script>

Em seguida procure por

</head>

Acima do trexo encontrado copie e cole

<script src="http://www.animewelfdesign.xpg.com.br/Voltar%20ao%20topo%20com%20efeito%20deslizante.js"></script>

Para adicionar uma imagem ou texto voltar ao topo procure por

</body>

E cole acima texte trexo

<div style='float:right;'>
<a href="#" id="subir">
Texto ou imagem /*Lembrando que imagem é em código html*/
</a>
</div>

Salve e pronto