Personalizar sidebar e widgets no novo Blogger

 

DEMO

Um grande problema deste novo modelo do Blogger é que, se trocarmos o modelo do blog por alí, ele retira todo e qualquer código, CSS, script que tiver em seu blog. A única solução é fazer manualmente, ou então, perder absolutamente tudo que já tiver feito de implementação em seu blog. Triste isso...

Pensando nisso, já começo a mexer nos novos templates, na verdade, no modelo Simple. É a partir dele que vou modificando e implementando hacks, scripts, slides entre outros. Portanto, posso te dar uma dica. Deixe como seu template nativo o Simple pois sou capaz de apostar que os blogueiros o usarão para esse fim.


Então, sem delongas, vamos lá...

Vá até o Modelo de seu blog, clique em Editar modelo

Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. 

Agora procure por:  

]]></b:skin>  

 

E acima dele, cole este código abaixo.

/*Sidebar------------------------------------------------------------*/
#sidebar-right-1, #sidebar-right-3, #sidebar-left-1, #sidebar-right-3 .widget, #sidebar-left-3, #sidebar-right-2-1, #sidebar-right-2-1, #sidebar-left-2-1, #sidebar-left-2-1, #sidebar-right-2-2, #sidebar-right-2-2, #sidebar-left-2-2,  #sidebar-left-2-2{
margin:2px 2px 2px 1px;
padding: 4px 5px 2px 5px;
background: #72a1d0;
}

#sidebar-right-1 .widget, #sidebar-right-3 .widget, #sidebar-right-3 .widget, #sidebar-left-1 .widget, #sidebar-left-3 .widget, #sidebar-right-2-1 .widget, #sidebar-right-2-1 .widget, #sidebar-left-2-1 .widget, #sidebar-left-2-1 .widget, #sidebar-right-2-2 .widget, #sidebar-right-2-2 .widget, #sidebar-left-2-2 .widget,  #sidebar-left-2-2 .widget{
background: #cc0000;
border: 1px dashed #808080;
padding: 6px 5px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
-moz-box-shadow: 0px 10px 10px -7px #888;
-webkit-box-shadow:0px 10px 10px -7px #888;
}
#sidebar-right-1 .widget-content, #sidebar-right-3 .widget-content, #sidebar-left-1 .widget-content, #sidebar-left-3 .widget-content, #sidebar-right-2-1 .widget-content, #sidebar-right-2-1 .widget-content, #sidebar-left-2-1 .widget-content, #sidebar-left-2-1 .widget-content, #sidebar-right-2-2 .widget-content, #sidebar-right-2-2 .widget-content, #sidebar-left-2-2 .widget-content,  #sidebar-left-2-2 .widget-content{
background: #fff;
padding: 2px 2px;
}

#sidebar-right-1 h2, #sidebar-right-3 h2, #sidebar-left-1 h2, #sidebar-left-3 h2, #sidebar-right-2-1 h2, #sidebar-right-2-1 h2, #sidebar-left-2-1 h2, #sidebar-left-2-1 h2, #sidebar-right-2-2 h2, #sidebar-right-2-2 h2, #sidebar-left-2-2 h2,  #sidebar-left-2-2 h2{
background: #ccc;
padding: 8px 2px;
margin: 3px 1px;
}

#sidebar-right-1 ul li, #sidebar-right-3 ul li, #sidebar-left-1 ul li, #sidebar-left-3 ul li, #sidebar-right-2-1 ul li, #sidebar-right-2-1 ul li, #sidebar-left-2-1 ul li, #sidebar-left-2-1 ul li, #sidebar-right-2-2 ul li, #sidebar-right-2-2 ul li, #sidebar-left-2-2 ul li,  #sidebar-left-2-2 ul li{
list-style: disc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1v208SXpQB1G-meGI01aqwgcUSrqiagu7koH9JTd_GGBirisrv0K24HxKjDeITOGjyb9fjFNwODFJWUzvq_ZjpUGDbN-P6lTTtVzMNbBgy-6VzrrpQkQxQK22WH0lZCoWIoj6hS92YlY/s1600/5.gif);
vertical-align: top;
padding-bottom: 1px;
margin-left: 2px;
border-bottom: 1px dotted #808080;
}

Salve. Codigos em vermelho são cores de fundo, em azul, cores das bordas.

Depois modifique as cores conforme seu gosto. Tabela de cores AQUI

Se quiser algo clean, use o código abaixo:

/*Sidebar------------------------------------------------------------*/
#sidebar-right-1, #sidebar-right-3,   #sidebar-right-2-1, #sidebar-right-2-2, #sidebar-right-2-3{
background: #fff;
margin:2px -14px 2px -31px;
padding: 4px 5px 2px 5px;
}

#sidebar-left-1, #sidebar-left-3,#sidebar-left-2-1, #sidebar-left-2-2, #sidebar-left-2-3{
background: #fff;
margin:2px -31px 2px -14px;
padding: 4px 5px 2px 5px;
}

#sidebar-left-1 h2, #sidebar-left-3 h2,#sidebar-left-2-1 h2, #sidebar-left-2-2 h2, #sidebar-left-2-3 h2, #sidebar-right-1 h2, #sidebar-right-3 h2,   #sidebar-right-2-1 h2, #sidebar-right-2-2 h2, #sidebar-right-2-3{
background: #eee;
text-align: center;
padding: 8px 0;
-moz-border-radius:8px;
-webkit-border-radius:8px;
-moz-box-shadow: 0px 10px 10px -7px #888;
-webkit-box-shadow:0px 10px 10px -7px #888;
}
#sidebar-right-1 .widget, #sidebar-right-3 .widget, #sidebar-right-2-1 .widget, #sidebar-right-2-2 .widget, #sidebar-right-2-3 .widget, #sidebar-left-1 .widget, #sidebar-left-2 .widget, #sidebar-left-2-1 .widget, #sidebar-left-2-2 .widget, #sidebar-left-2-3 .widget{
border: 2px dotted #ccc;
padding: 6px 5px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
-moz-box-shadow: 0px 10px 10px -7px #888;
-webkit-box-shadow:0px 10px 10px -7px #888;
}
#sidebar-right-1 .widget-content, #sidebar-right-3 .widget-content, #sidebar-left-1 .widget-content, #sidebar-left-3 .widget-content, #sidebar-right-2-1 .widget-content, #sidebar-right-2-1 .widget-content, #sidebar-left-2-1 .widget-content, #sidebar-left-2-1 .widget-content, #sidebar-right-2-2 .widget-content, #sidebar-right-2-2 .widget-content, #sidebar-left-2-2 .widget-content,  #sidebar-left-2-2 .widget-content{
background: #fff;
padding: 2px 2px;
}

#sidebar-right-1 ul li, #sidebar-right-3 ul li, #sidebar-left-1 ul li, #sidebar-left-3 ul li, #sidebar-right-2-1 ul li, #sidebar-right-2-1 ul li, #sidebar-left-2-1 ul li, #sidebar-left-2-1 ul li, #sidebar-right-2-2 ul li, #sidebar-right-2-2 ul li, #sidebar-left-2-2 ul li,  #sidebar-left-2-2 ul li{
list-style: disc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1v208SXpQB1G-meGI01aqwgcUSrqiagu7koH9JTd_GGBirisrv0K24HxKjDeITOGjyb9fjFNwODFJWUzvq_ZjpUGDbN-P6lTTtVzMNbBgy-6VzrrpQkQxQK22WH0lZCoWIoj6hS92YlY/s1600/5.gif);
vertical-align: top;
padding-bottom: 1px;
margin-left: 2px;
border-bottom: 1px dotted #808080;
}