Personalizando o sidebar e o footer do novo Blogger

Outro modelito de sidebar, widgets personalizados para vocês...

Essa tutorial é baseada em cima do template SIMPLE, que vem nativo no Blogger.

Modelo da sidenar

Modelo do footer

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. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011

Agora procure por: ]]></b:skin>  

 

Acima do código, cole este código abaixo.

/*Sidebar------------------------------------------------------------*/
#sidebar-right-1, #sidebar-right-3, #sidebar-left-1,  #sidebar-left-3, #sidebar-left-2-1,  #sidebar-right-2-1, #sidebar-left-2-2,  #sidebar-right-2-2 {
margin: 0;
padding: 0;
}

#sidebar-left-1 h2, #sidebar-left-3 h2, #sidebar-left-2-1 h2, #sidebar-left-2-2 h2,  #sidebar-right-1 h2,  #sidebar-right-3 h2,   #sidebar-right-2-1 h2,  #sidebar-right-2-2 h2 {
 background:  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguVu2OdVSieaFt2ADXNLKSM2ZKnzgJV06gSv5kmuzycRVBbyW0cCgssb_1k0wjqSpEnFBmo69PLfh5uC7awDp-rRz75-g2383nSaGe2YQnVH6i_eXDlJQnKACfFnUqPFmH_OQhDnOd3NJO/s1600/h2.png)  repeat-x;
text-align: right;
padding: 8px 0;
border-color:#F9F9F9 #F9F9F9;
border-style:solid solid none;
border-width:1px 1px  medium;
border-bottom: 1px solid #A8A8A8;
text-shadow: 1px 1px white, -1px -1px #333;
}

#sidebar-right-1 .widget,  #sidebar-right-2-1 .widget, #sidebar-right-2-2 .widget,  #sidebar-right-3 .widget, #sidebar-left-1 .widget,  #sidebar-left-2-1 .widget, #sidebar-left-2-2 .widget, #sidebar-left-3 .widget  {
margin:0;
border-color:#A8A8A8 #A8A8A8 #A8A8A8;
border-style:solid solid solid;
border-width:0px 1px thin;
padding: 0;
}

#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-2 .widget-content, #sidebar-left-2-1 .widget-content, #sidebar-left-2-2 .widget-content{
padding: 0;
}

#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-2 ul li, #sidebar-left-2-1 ul li, #sidebar-left-2-2 ul li{
list-style: disc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWy6JySdOykk0XGrcfU2geQ9R_hWIspSrGzMMDM5b_RaJGjRF3uaM4sniMK_LRh9gWSd7V382BTUVI_7aqKdcNudwLbB0Mr7KFc4H7Qznh0L4s3Vc_DTM6ZfpAGSGHPgQECQ1GjDmIlxvU/s1600/arrow.gif);
vertical-align: top;
padding-bottom: 1px;
margin-left: 8px;
border-bottom: 1px solid #A8A8A8;
}

/*Footer-------------------------------------------------*/
#footer-1,#footer-2-1, #footer-2-2, #footer-2-3{
margin: 0;
padding: 0;
}
#footer-1 h2, #footer-2-1 h2, #footer-2-2 h2, #footer-2-3 h2 {
 background:  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguVu2OdVSieaFt2ADXNLKSM2ZKnzgJV06gSv5kmuzycRVBbyW0cCgssb_1k0wjqSpEnFBmo69PLfh5uC7awDp-rRz75-g2383nSaGe2YQnVH6i_eXDlJQnKACfFnUqPFmH_OQhDnOd3NJO/s1600/h2.png)  repeat-x;
text-align: right;
font-size: 14px;
padding: 8px 0;
border-color:#F9F9F9 #F9F9F9;
border-style:solid solid none;
border-width:1px 1px  medium;
border-bottom: 1px solid #A8A8A8;
text-shadow: 0px 1px 0px #eee;
text-shadow: 1px 1px white, -1px -1px #333;
}
#footer-1  .widget,  #footer-2-1 .widget,   #footer-2-2   .widget, #footer-2-3 .widget {
border-color:#A8A8A8 #A8A8A8 #A8A8A8;
border-style:solid solid solid;
border-width:0px 1px thin;
padding: 0;
}
#footer-1  .widget-content, #footer-2-1 .widget-content, #footer-2-2  .widget-content, #footer-2-3 .widget-content{
padding: 0;
}

#footer-1  ul li, #footer-2-1 ul li, #footer-2-2 ul li, #footer-2-3  ul li {
list-style: disc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWy6JySdOykk0XGrcfU2geQ9R_hWIspSrGzMMDM5b_RaJGjRF3uaM4sniMK_LRh9gWSd7V382BTUVI_7aqKdcNudwLbB0Mr7KFc4H7Qznh0L4s3Vc_DTM6ZfpAGSGHPgQECQ1GjDmIlxvU/s1600/arrow.gif);
vertical-align: top;
padding-bottom: 3px;
margin-left: 8px;
border-bottom: 1px solid #808080;
}

Não terminou. Agora procure por esse trecho.

/* Columns
----------------------------------------------- */
.main-outer {
  border-top: $(main.border.width) solid $(body.rule.color);
}

.fauxcolumn-left-outer .fauxcolumn-inner {
  border-right: 1px solid $(body.rule.color);
}

.fauxcolumn-right-outer .fauxcolumn-inner {
  border-left: 1px solid $(body.rule.color);
}




Troque-o por:

/* Columns
----------------------------------------------- */
.main-outer {
  border-top: none;
}

.fauxcolumn-left-outer .fauxcolumn-inner {
  border-right: 0px solid $(body.rule.color); background: #E6e6e6;
}

.fauxcolumn-right-outer .fauxcolumn-inner {
  border-left: 0px solid $(body.rule.color); background: #E6e6e6;
}

Outro modelo de sidebar aqui