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