17 de jul. de 2011

Personalizar sidebar e widgets no novo Blogger


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;
}

5 comentários:

  1. Muito bom, depois das respectivas modificações 100% aprovado
    Obrigada
    http://empregodinheiro.blogspot.com/

    ResponderExcluir
  2. Legal esse post eu fiz deu tudo certinho

    ResponderExcluir
  3. Oi Elque Tubem?
    você poderia mim dá uma focinha?

    é que as colunas do meu blog parecen estar umas sobre as outras.

    caso vc queira dar uma olhada meu blog é esse ai en baixo:

    desde já gardeço:

    http://dariomeiraonline.blogspot.com

    ResponderExcluir
  4. ajudaaa
    quero personalisar meu blogger sem dawloads
    ajudem ae porfavor

    ResponderExcluir
  5. Olá queria deixar meu blogger com os novos modelos assim igual o seu como faço?

    ResponderExcluir

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube