Postagens Populares em Escala de Cores

Mais um gadget de postagens populares com um visual intuitivo e simples, onde será exibido os melhores artigos de seu blog em escala de cores.

Para adicionar este gadget é muito simples, basta que você siga este tutorial descrito abaixo.

Inserir Gadget de Postagens Populares com Barra de Cores e Numerado

Se você já usa uma barra de "postagens populares", exclua.

Depois que você remover vá em > Modelo > Editar HTML > Procure pelo código :

/* Variable definitions

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

Agora é preciso saber qual é o tipo de Template do seu Blog. Se for um modelo clássico, padrão do Blogger atual, use o seguinte código colando imediatamente abaixo do que foi indicado no item acima:

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

No caso de o seu template ser um modelo antigo (não o modelo padrão do blogger), então cole o seguinte código:

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

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

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

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

<Variable default="#0ff" description="background color5" name="PopularPosts.background.color5" type="color" value="#00ffff">

Procure pela linha ]]></b:skin> e cole o código abaixo, acima desta tag;

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

Agora procure o seguinte: <b:section-contents id=’sidebar-right-1′> (ou um código similar) e logo abaixo cole o seguinte:

<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/>

</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/>

</b:if>

<a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>

<div class='clear'/>

</b:if>

</li>

</b:loop>

</ul>

<b:include name='quickedit'/>

</div>

</b:includable>

</b:widget>

Agora vá ao menu “Layout” e no gadget de Postagens populares que apareceu, seleciona o numero de postagens que deseja exibir (recomendo não mas do que 5).

Por último, se você quiser mudar as cores de cada barra é simples…
Entre em ► Modelo ► Personalizar ► Avançado ► PopularPosts Backgrounds

E selecione as cores desejadas.

Mister Blogando

Alberto Monteiro

Comentários

Postar um comentário

Sobre Nós

Barra de comentários do Facebook no Blog

Imagens para Blog sem Direitos Autorais

Baixar Temas e Plugins Nulled é Seguro?

Contact form

Postagens Populares em Escala de Cores - Gadget

Alberto Monteiro

Recomendados

Comentários

Postar um comentário

Contact form