Sombra na sidebar/área de postagem + Menu Status

Sombra na sidebar/área de postagem 

 Área de Postagem

Vá no Blogger  Editar HTML  Expandir Modelo de Widgets  Ctrl + F  Procure por:
.main-inner .column-center-inner {
Apague tudo o que tiver abaixo, e cole este código:
box-shadow: 3px 3px 19px 3px #DCDCDC;
padding: 10px;

 Veja a imagem acima, o seu deverá ficar igual.. agora vamos entender, na parte de "#DCDCDC" é a cor da sombra, basta substituir pela qual você desejar.. já em "3px 3px 19px 3px" São as larguras do sombra, substitua para ficar como preferir.. Eu vi este tutorial no Sweet Poison.

Sidebar

Vá no Blogger  Editar HTML  Expandir Modelo de Widgets  Ctrl + F  Procure por:
/* Widgets
Abaixo dele, cole este código:
box-shadow: 3px 3px 19px 3px #DCDCDC;
   

 O seu deverá ficar igual a imagem acima.. agora vamos entender, na parte de "#DCDCDC" é a cor da sombra, basta substituir pela qual você desejar.. já em "3px 3px 19px 3px" São as larguras do sombra, substitua para ficar como preferir.
Menu Status


 Vá em Designer  Editar HTML  Expandir Modelo de Widgets  Ctrl + F (Procure por:)
]]></b:skin>
Achou? Acima desta tag, cole este código:
.wishlist {
background: #eee;
font-family:  Verdana;
font-size: 8px;
margin: 1px;
color: #444444;
display: block;
-moz-box-shadow: inset 3px 0 0px 0 #C6E68D;
-webkit-box-shadow: inset 3px 0 0px 0 #C6E68D;
box-shadow: inset 3px 0 0px 0 #C6E68D;
padding: 3px 3px 3px 6px;
-moz-transition: all 0.4s ease-out;
-webkit-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out;
-ms-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;}
.wishlist:hover {
-moz-box-shadow: inset 550px 0 0px 0 #C6E68D;
-webkit-box-shadow: inset 550px 0 0px 0 #C6E68D;
box-shadow: inset 550px 0 0px 0 #C6E68D;
color: #444444;}
OBS: Onde está em negrito você poderá substituir pelas cores desejadas, já onde está sublinhado você colocará a fonte da letra que aparecerá nas letras do menu. Certinho, agora Salve e Feche! Iremos agora para a segunda parte do tutorial, você deverá ir em Layout  Adicionar Gadgets  HTML/Javascript (Cole este código):
<div class="wishlist">Coloque as palavras aqui</div>
OBS: Desta vez, onde está em negrito você deverá substituir por o que quiser que apareça na hora. Caso queira adicionar mais itens desse, basta você copiar e colar o mesmo código de cima. Espero que tenham gostado do tutorial, consegui ele em dois Blog's, mais exatamente este, é do WHH.

:: Créditos: eJhonas.com

Nenhum comentário:

Postar um comentário

Deixe seu comentário