8 de mar. de 2011

Costumizar o widget Postagens populares

O widget Postagens populares pode ser muito útil principalmente para quem usa templates costumizados. Só que ele tem um pequeno problema, quando o instalamos no blog ele fica todo torto e eu sempre tenho que costumiza-lo. Trago pra vocês então, o código para fazerem isso nos widgets em seus blogs.
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. Estas dicas se aplicam aos templates feitos até junho de 2010. Para reinstalar o antigo template clique AQUI


Modelo 1

Vá até o HTML de seu blog e acima de:



]]></b:skin>


 Cole o código abaixo.


Modelo 1

/*Postagens populares------------------------------------*/

#PopularPosts1 {
background: #fff;/*cor de fundo do widget*/
margin: 8px;
padding: 6px;
}
#PopularPosts1 h2 {
background: #000; /*corde fundo do título*/
color: #cc0000; /*cor da letra do título*/
font-weight: bold;
}
#PopularPosts1 li {
margin: 8px 6px;
padding: 6px 3px 6px 12px;
border-bottom: 1px dashed #000;/*borda que separa os itens*/
color: #808080;/*cor das letras*/
}
#PopularPosts1 a:link {
color: #cc0000;/*cor dos links*/
font-size: 12px;
}
#PopularPosts1 a:hover {
color: #ccc; /*cor das letras ao passar o mouse*/
font-size: 14px;
}
#PopularPosts1 a:visited {
color: #008080;/*cor das letras visitadas*/
font-weight: bold;
}





































-------------------------------------------------X---------------------------------------


Modelo 2
Modelo 2

/*PopularPosts1--------------------------------*/
#PopularPosts1 {
background: #eee;
border: 1px solid #ccc;
padding: 2px;
}
#PopularPosts1 h2 {
font-weight: bold;
background: #cc0000;
text-align: center;
font-size: 14px;
color: #fff;
text-shadow: 0 1px 3px #222222;
}
#PopularPosts1 img{
background: #fff;
border: 2px solid #000;
width: 145px;
height: 80px;
margin: 2px 2px;
padding: 8px;
}
#PopularPosts1 li {
font-size: 10px;
padding: 2px 2px 2px 8px;
margin: 2px 2px 2px 8px;
}
#PopularPosts1 a:link, a:visited {
text-shadow: 0 1px 3px #222222;
font-size: 12px;
font-weight: bold;
color: #cc0000;
}



























-------------------------------------------------X--------------------------------------- 


Modelo 3


Modelo 3



/*Popular Posts--------------------------------------*/
#PopularPosts1{background: #57748F;margin:5px auto;width:100%;}
#PopularPosts1 img{width: 150%;float: center; height: 55px; }
#PopularPosts1 ul{list-style:none;margin:2px;padding:0;width:100%;}
#PopularPosts1 li{
background: #889BAC;
font-size: 10px;
border:0;
float:left;
list-style:none;
height:120px;
margin:6px 1px;
padding:3px 4px;
text-align:center;
width:29%;}

#PopularPosts1 li:hover{background:#fff;}
#PopularPosts1 span{
display:block;
font-size:80%;
line-height:1.2em}

#PopularPosts1 a,
#PopularPosts1 span a,
#PopularPosts1 a:link,
#PopularPosts1 span a:link,
#PopularPosts1 a:visited,
#PopularPosts1 span a:visited,
#PopularPosts1 a:hover,
#PopularPosts1 span a:hover{
color:#222;
text-decoration:none;}

Um comentário:

  1. muito bom esse estilo de post popular sera que tem como fazer isso com o post recente?


    Eu te admiro muito e adoraria que vc me respondesse seria como um idulo falando com um fan
    um beijo grande e sucesso :)

    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