blog super personalizado : Código CSS para dar estilo aos widgets do Blogger

Mais um modelo para aplicar na sidebar de seu blog e dar um ar mais profissional porquê esse modelito que vem nativo no Blogger parece nossos carrinhos populares. Mais um pouco e roda e volante serão opcionais.

Implementar CSS

No modelo de seu blog", clique em "Personalizar"

Ao abrir essa janela, vá em Avançado -------> Adicionar CSS

Copie e cole este código abaixo.

/*Sidebar-------------------------------------------*/
#sidebar-right-1 .widget, #sidebar-right-3 .widget {
background: #fff; margin: 50px -40px 20px -20px; padding: 6px 8px
}
#sidebar-left-1 .widget, #sidebar-left-3 .widget {
background: #fff; margin: 50px -30px 20px -40px; padding: 6px 8px
}
#sidebar-right-2-1 .widget, #sidebar-left-2-1 .widget {background: #fff; margin: 30px -25px 20px -20px; padding: 6px 8px }

#sidebar-right-2-2 .widget, #sidebar-left-2-2 .widget {background: #fff; margin: 30px -35px 20px 5px; padding: 6px 8px }

#sidebar-right-1 h2, #sidebar-right-2-1 h2, #sidebar-right-2-2 h2, #sidebar-right-3 h2, #sidebar-left-1 h2, #sidebar-left-2-1 h2, #sidebar-left-2-2 h2, #sidebar-left-3 h2 {
text-transforme: none;
background: #808080; padding: 12px; font-size: 18px; text-align: right; float: right; margin: -45px 0 30px 0;
color: white; text-shadow: black 0.1em 0.1em 0.2em;
}
#sidebar-right-1 li, #sidebar-right-3 li, #sidebar-right-2-1 li, #sidebar-right-2-2 li, #sidebar-left-1 li, #sidebar-left-3 li, #sidebar-left-2-1 li, #sidebar-right-2-2 li{
border-bottom: 1px solid #eee;
list-style-type : none;
}
#sidebar-right-1 .widget-content, #sidebar-right-2-1 .widget-content, #sidebar-right-2-2 .widget-content, #sidebar-right-3 .widget-content{
border: 4px solid #808080;
padding: 10px 3px;
-moz-box-shadow: -3px -3px 3px #888;
-webkit-box-shadow: -3px -3px 3px #888;
box-shadow: -3px -3px 3px #888;
}
#sidebar-left-1 .widget-content, #sidebar-left-3 .widget-content, #sidebar-left-2-1 .widget-content, #sidebar-left-2-2 .widget-content{
border: 4px solid #808080;
padding: 10px 3px;
-moz-box-shadow: -3px -3px 3px #888;
-webkit-box-shadow: -3px -3px 3px #888;
box-shadow: -3px -3px 3px #888;
}

/*Footers --------------------------------------------*/

#footer-1 .widget, #footer-2-1 .widget, #footer-2-2 .widget, #footer-2-3 .widget{
background: #fff; margin: 35px -15px 20px -20px; padding: 6px 8px
}
#footer-1 h2, #footer-2-1 h2 , #footer-2-2 h2, #footer-2-3 h2{
background: #808080; padding: 12px; font-size: 18px; text-align: right; float: right; margin: -45px 0 30px 0;
color: white; text-shadow: black 0.1em 0.1em 0.2em;
}
#footer-1 .widget-content, #footer-2-1 .widget-content, #footer-2-2 .widget-content, #footer-2-3 .widget-content{
border: 4px solid #808080;
padding: 10px 3px;
-moz-box-shadow: -3px -3px 3px #888;
-webkit-box-shadow: -3px -3px 3px #888;
box-shadow: -3px -3px 3px #888;
}
#footer-1 li, #footer-2-1 li, #footer-2-2 li, #footer-2-3 li{
border-bottom: 1px solid #eee;
list-style-type : none;
}