Gadget de postagens Populares personalizado com barras coloridas

Olá pessoal nessa semana eu encontrei um código para personalizar o gadget de postagens populares, ele é separado por barras coloridas...

1° Primeiro: Para colocar primeiro temos que adicionar o Gadget de postagens populares.

Então lá no seu blog vá em Layout >> depois em Adicionar um Gadget >> e em Postagens Populares:

Clique em Postagens Populares:

2° Segundo: Agora configure o Gadget Postagens Populares para Exibir no máximo 5 postagens, depois Salve:

.

Vamos agora Editar o HTML do Blog

1° Passo: Pra isso vá em Modelo >> depois em Editar HTML >> e em Prosseguir.

Agora marque a opção Expandir Modelo de Widget 

2° Passo: Vamos procurar uma seguinte parte do código, pra isso você vai utilizar um tecla de atalho ( Ctrl + F) do seu teclado para pesquisar essa seguinte parte do código:

/* Variable definitions

Quando encontrar ele vai está assim:

/* Variable definitions

 ==================== 

3° Passo: Cole esse código logo a baixo dele:

<Group description="PopularPosts Backgrounds" selector="#PopularPosts1">

<Variable default="#fa4242" description="background color1" name="PopularPosts.background.color1" type="color" value="#ff4c54"/>

<Variable default="#ee6107" description="background color2" name="PopularPosts.background.color2" type="color" value="#ff764c"/>

<Variable default="#f0f" description="background color3" name="PopularPosts.background.color3" type="color" value="#ffde4c"/>

<Variable default="#ff0" description="background color4" name="PopularPosts.background.color4" type="color" value="#c7f25f"/>

<Variable default="#0ff" description="background color5" name="PopularPosts.background.color5" type="color" value="#33c9f7"/>

</Group>

4° Passo: Agora procure por essa Tag: ]]></b:skin> 
E a cima dela cole esse código:

#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none;} #PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px;} #PopularPosts1 ul li:first-child{background:$(PopularPosts.background.color1);width:90%;} #PopularPosts1 ul li:first-child:after{content:"1";} #PopularPosts1 ul li:first-child + li{background:$(PopularPosts.background.color2);width:85%;} #PopularPosts1 ul li:first-child + li:after{content:"2";} #PopularPosts1 ul li:first-child + li + li{background:$(PopularPosts.background.color3);width:80%;} #PopularPosts1 ul li:first-child + li + li:after{content:"3";} #PopularPosts1 ul li:first-child + li + li + li{background:$(PopularPosts.background.color4);width:75%;} #PopularPosts1 ul li:first-child + li + li + li:after{content:"4";} #PopularPosts1 ul li:first-child + li + li + li + li{background:$(PopularPosts.background.color5);width:70%;} #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5";} #PopularPosts1 ul li:first-child:after,#PopularPosts1 ul li:first-child + li:after,#PopularPosts1 ul li:first-child + li + li:after,#PopularPosts1 ul li:first-child + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff;} #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:40px;height:40px;} #PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none;} #PopularPosts1 ul li a:hover{color:#222;text-decoration:none;}

5° Passo: Quinto passo e último, pesquise por essa linha do código:
<b:section-contents id='sidebar-right-1'>
Agora você vai substituí-la por esse código aqui:


<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'> <b:includable id='main'> <b:if cond='data:title'> <h2> <data:title/></h2> </b:if> <div class='widget-content popular-posts'> <ul> <b:loop values='data:posts' var='post'> <li> <b:if cond='data:showThumbnails == "false"'> <b:if cond='data:showSnippets == "false"'> <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a> <b:else/> <a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a> </b:if> <b:else/> <b:if cond='data:showSnippets == "false"'> <b:if cond='data:post.thumbnail'> <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/> <b:else/> <img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPetG93q1bl9gC_oawN8Y6conyvwTlg2rsM5H65fcRIUNIP2LSJ4aPWNwhoqslH-z48c-fAebLorVbDo2TpcQNAEiEZZ8tMRp6DNHbZSkadD8biwN_aIQXE2275vWFGkkcAeNGvkv3HcI/s1600/default.jpg'/> </b:if> <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a> <div class='clear'/> <b:else/> <b:if cond='data:post.thumbnail'> <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/> <b:else/> <img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPetG93q1bl9gC_oawN8Y6conyvwTlg2rsM5H65fcRIUNIP2LSJ4aPWNwhoqslH-z48c-fAebLorVbDo2TpcQNAEiEZZ8tMRp6DNHbZSkadD8biwN_aIQXE2275vWFGkkcAeNGvkv3HcI/s1600/default.jpg'/> </b:if> <a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a> <div class='clear'/> </b:if> </b:if> </li> </b:loop> </ul> <b:include name='quickedit'/> </div> </b:includable> </b:widget>

Prontinho agora é só visualizar para vê se você fez nada errado, e a seguir Salve.
Espero terem gostado deste tutorial.
participem do nosso blog, sigam o blog ou curtam a nossa página no facebook.
Fontes: Dicas Blogger