Comemorando + Big tutoriais

Boa tardee leitoras e leitores queridos!! Hoje completamos 50 posts desde que o CDS foi criado \☺/

Pra comemorar, trouxe pra vocês um big tutorial, ou seja, vários tutos úteis pra vocês, de presente 

Quer ver os tutos? É só apertar em Leia Mais e conferir todos eles 

 Fundo dos links coloridos e 'piscando'

Vá em Editar HTML  aperte F3 e procure por ]]></b:skin>  Acima dessa tag cole:

           .post a:hover {background: url('URL DA IMAGEM');color: #BCAFE0;}

 Entendendo o código:

Sublinhado:  Se refere que o efeito só aparece na área dos posts;

Negrito: Se refere a URL da imagem que você irá colocar;

Itálico: É  a cor da fonte;

 Se quiser colocar também na sidebar basta substituir .post  por .sidebar, desse jeito:

.sidebar a:hover {background: url('url do gif');color: #BCAFE0;}

E aqui algumas imagens prontas pra vocês 

        
Créditos: Karine in Júpter



 Gif ao lado do título do post

         Vá em Design  Editar HTML  Marque a opção  Expandir modelos de widgets
                  Aperte F3 e procure por data:post.link'><data:post.title/></a>

 Logo abaixo você irá encontrar isto: <b:else/>
 E logo após esse código cole este:  <img src='URL DO GIF AQUI' style='vertical-align: middle;'/>

 Agora é só colocar a url do seu gif e pronto!!
Créditos: Karine in Júpter



 Menu simples com gif

Editar HTML  procure por  ]]></b:skin> e acima dele cole:

 @font-face {font-family: "handy"; src: url('http://static.tumblr.com/lnvca6d/E6vm63ih7/pf_ronda_seven__1_.ttf');}

.fantastic {

display : block;

font-size: 8px;

font-family: handy;

text-transform: uppercase;

line-height: 16px;

margin-top: 2px;

border-bottom : 1px solid #ebeaea;  

border-right : 1px solid #f1f1f1; 

border-left : 1px solid #f1f1f1;

text-indent : 5px; 

vertical-align : middle;  

background:  no-repeat left #f3f3f3; 

padding-left : 6px;

padding-bottom : 2px;

}

.fantastic:hover {

display : block; 

background: url('http://media.tumblr.com/tumblr_m0ohnsdlwO1qfjy56.gif') no-repeat left #f9f9f9;

}

Agora é só salvar! 

Depois, adicione um HTML/JavaScript e colar:

            <div class="fantastic"> seu texto </div>

Já está pronto o seu menu!
Créditos: Kawaii World 




  Menu Arrow

Editar HTML  procure por ]]></b:skin> e acima desse código cole:

@font-face {font-family: "handy"; src: url('http://static.tumblr.com/lnvca6d/E6vm63ih7/pf_ronda_seven__1_.ttf');}

.arrow {margin: 1px; text-align: center; font: 8px handy; text-transform: uppercase; display: inline-block; position: relative; color: #000000; width: 45px; padding: 3px; text-decoration: none; background-color: #CORDOFUNDO; border: 2px solid #CORDABORDA;}

.arrow:hover { background-color: #CORDOFUNDOHOVER; border: 2px solid #ef7aa1;}

.arrow:hover:after {

content: ''; width: 0; height: 0; position: absolute; left: 50%; 

margin-left: -2px; bottom: 0; border-width 9px; border-style: solid; border-color: transparent transparent #CORDASETA transparent;}

Troque os nomes pelas informações referentes.

Agora, em um HTML/JavaScript cole o seguinte código:

<a href="SEULINK" class="arrow">Menu</a>
<a href="SEULINK" class="arrow">Menu</a>
<a href="SEULINK" class="arrow">Menu</a>
<a href="SEULINK" class="arrow">Menu</a>

Pronto, agora é só fazer as alterações indicadas.
Créditos: Kawaii World 

 Gifs antes dos marcadores

                     Vá em Editar HTML  procure por ]]></b:skin> e acima dessa tag cole:

.sidebar ul li {
list-style:  disc url(LINK DO SEU GIF);
font-size:13px;
vertical-align: top;
padding: 12px 0px 4px 0px;
margin-left: 7px;
border-bottom : 1px dashed #ccc;
}

Esse código é bem simples e fácil de compreender, é só fazer o que se pede no código e pronto! É só salvar e ver os marcadores lindos.

Créditos: Kawaii World

E aí? Gostaram dos Tutoriais? Espero que tenham sido úteis pra vocês,porque deu um trabalhão pra colocar todos esses tutos.  Em breve terá mais posts assim e colocarei muito mais tutos pra vocês 
Bjok e fiquem com Deus.