estilo no gadget de postagens populares com CSS

Artigos populares é um dos gadgets importantes em um blog, o estilo padrão nem é tão agradável  mas temos várias formas de personalização e com a ajuda do grandioso CSS podemos dar estilos muito bacana, já mostrei algumas delas nos seguintes artigos.

1. Destacar o artigo mais popular do blog
2. Widget de artigos populares coloridos 

 E no artigo de hoje aprenderemos mais uma forma simples e fácil de personalização.

 

Na imagem acima temos o resultado final assim que aplicamos o estilo, e para conseguir este feito basta seguir os passos abaixo.

1º- Clique em Editar HTML e expandir modelos de widgets.

2º- Agora procure por ]]></b:skin>  e cole antes o seguite código. 

popular-posts ul{padding-left:0px;}

.popular-posts ul li {background: transparent
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguwtwfLD7sG1bsI30K2MVC-lb1Rl4u-CzWX7k3HEfapE2rZbeG3bLDCHzCX7DXSguIFUwKooBaQuKDjJXiAswnuQJyVbcKkO3YYb2PxyJ4z_hfbK2RAyHe719JfhCFoiaNsbzfsHx-ldvm/s128/popular.jpg) no-repeat scroll 0px 2px;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 2px solid #094c74;
border-radius:10px;/* radio del borde */
-moz-border-radius:10px;/* radio del borde */
-webkit-border-radius:10px;/*  radio del borde  */
}
.popular-posts ul li:hover {
border:2px solid #094c74;/* color de borde al pasar en cursor */
}
.popular-posts ul li a:hover {
text-decoration:none;
}

3º-  Agora temos que instalar o Gadget de artigos populares, para isso vá em Layout  > Adicionar um Gadget e adiciona Postagens populares.

OBS: Para que funcione corretamente precisamos desmarcar a opção miniatura de imagem como foi mostrada na imagem anterior

Gostou? Compartilhe mas não esqueça de deixar seu comentário.

Widget de artigos populares coloridos

Recentemente dei um estilo bacana no Gadget de postagens populares que ficou bacana, já havia personalizado antes mas era um modelo muito quadrado então resolvi mudar novamente até chegar neste que uso hoje como pode notar na sidebar do blog, tem efeitos hover nos links e o melhor extremamente fácil de editar o contrário dos modelos comuns que usamos quando precisamos do código /* Variable definitions onde muitos blogueiros iniciantes não tem a facilidade de adicionar em seu blog.

Recomendo que leia >> Destacar o artigo mais popular do blog

Vamos ao Tutorial:

1º- Clique em Editar HTML e expandir modelos de widgets.
2º - Aperte Ctrl+F e procure por ]]></b:skin> o cole antes o código seguinte.

#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
#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,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

 Agora salve.

3º- Agora temos que instalar o Gadget de artigos populares, para isso vá em Layout  > Adicionar um Gadget e adiciona Postagens populares.

Obs: recomendo que coloque 5 postagem a ser exibida.

Destacar o artigo mais popular do blog

Temos costume de mostrar os artigos mais populares do nosso blog,  e destacamos em diversos lugarem em nosso blog, tanto na sidebar, quanto no rodapé  e varios outros lugares, no meu caso aqui no TB tenho o Widget de artigos populares com cores diferentes e me ajuda bastante não só na divulgação deste artigo mas tambéns diminuindo a minha taxa de rejeição.por isso hoje mostrarei como colocar o artigo mais popular acima das postagem do blog,

 

OBS: Recomendamos que faça um backup antes de mexer no código do seu template, caso ocorra algum erro terá como recuperá-lo evitando qualquer transtorno no final.

 Vamos ao tutorial

1º- Clique em Editar HTML e expandir modelos de widgets.
2º- procure por <div id='content-wrapper'> e abaixo cole o código seguinte.

<b:section class='destacados' id='destacados' showaddelement='no'>
<b:widget id='PopularPosts7' locked='true' title='Lo más popular' 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 == &quot;false&quot;'>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
<a id="leermas" expr:href='data:post.href'>Leia mais</a>

            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>
</b:section>

3º- Procure por ]]></b:skin> e logo acima cole:

#destacados ul { /*NO TOCAR*/
list-style:none;
}

/*ENLACES*/

#destacados a:link {color:#fff;}
#destacados a:visited {color:#fff;}
#destacados a:hover {color:#fff;}

/*IMAGEN*/
#destacados .item-thumbnail img {width:64px;height:64px;background:#316b94;border:1px solid #c0c0c0; padding:6px;}

/*TÍTULO*/
#destacados .item-title {font-size:28px;}

/*RESÚMEN*/
#destacados .item-snippet {font-size:14px;}

/*BOTÓN LEER MÁS*/
#leermas  {color:#2d2d2d; border:1px solid #c0c0c0; padding:5px;border-radius:5px;float:right;}

Obs: Certamente aparecerar um Gadget de postagem popular acima das postagem caso não aparece basta adicioná-lo e para configurar o numero de postagem a ser mostrada  troque o 10 pelo numero que deseja, no caso abaixo coloquei 1.

Por ultimo salve.

Posts relacionados com miniaturas efeito maior e opacidade

Desta vez trago a vocês como colocar artigo relacionado no fim do post, é outra forma de miniaturas de posts relacionados maior efeito quando você passa o mouse sobre eles.  Ótimo para manter o leitor em seu blog diminuindo as taxa de rejeição.

  Antes de qualquer modificação recomedo que faça um Backup de seu layout para evitar qualquer trantorno mais tarde.

Vamos ao tutorial:

1º- Clique em Editar HTML e expandir modelos de widgets.

2º- Aperte Ctrl + F e procure por </head>  e cole o código abaixo antes.

<script type='text/javascript'>
//<![CDATA[
imgr=new Array();imgr[0]="http://imgclasificados3.emol.com/78987370_0/imagen_no_disponible.gif";showRandomImg=true;aBold=true;summaryPost=200;summaryTitle=20;numposts1=12;numposts2=4;function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}function showrecentposts(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();document.write('<ul>');for(var i=0;i<numposts1;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;var trtd='<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="200" height="250" class="alignnone" src="'+img[i]+'"/></a></div><p><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></p></li>';document.write(trtd);j++}document.write('</ul>')}function showrecentposts5(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts1;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var trtd='<li id="nav-post-'+i+'" class="ui-tabs-nav-item"><a href="#post-'+i+'"><img width="100" height="69" src="'+img[i]+'"/><span>'+posttitle+'</span></a></li>';document.write(trtd);j++}}function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();if(numposts2<=json.feed.entry.length){maxpost=numposts2}else{maxpost=json.feed.entry.length}for(var i=0;i<maxpost;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;pcm='<a href="'+posturl+'">'+pcm+' comments</a>';var trtd='<div class="col_maskolis"><h2 class="posttitle"><a href="'+posturl+'">'+posttitle+'</a></h2><a href="'+posturl+'"><img class="maskolis_img" src="'+img[i]+'"/></a><div class="clear"></div></div>';document.write(trtd);j++}}var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.gform_foot.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d}else thumburl[relatedTitlesNum]='http://imgclasificados3.emol.com/78987370_0/imagen_no_disponible.gif'}if(relatedTitles[relatedTitlesNum].length>35)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"...";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<h1>'+relatedpoststitle+'</h1>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;margin:0 10px 10px 0;float:left;background:#e6e6e6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz_CSP7_2vSEXBXetYH0Ht5qMuWt4XGh4mhFwMioj_7gkCmC43k-pgnQd-LeD5CQEClwixPve0rTfpYw4sDpzl5Gdl51XOIdKTpaLwVUx7fjZII01KHNtrZGXGV7xXuyMSNx-wtx6rlss/s1600/bar-bg2.png) repeat-x top;border:1px solid #c9c9c9;');if(i!=0)document.write('background:#e6e6e6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz_CSP7_2vSEXBXetYH0Ht5qMuWt4XGh4mhFwMioj_7gkCmC43k-pgnQd-LeD5CQEClwixPve0rTfpYw4sDpzl5Gdl51XOIdKTpaLwVUx7fjZII01KHNtrZGXGV7xXuyMSNx-wtx6rlss/s1600/bar-bg2.png) repeat-x top;border:1px solid #c9c9c9;"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="maskolis_img" src="'+thumburl[r]+'"/><br/><div style="width:132px;padding:0 10px;color:#333;height:35px;text-align:center;margin:0px 0px; font:14px PT Sans Narrow; line-height:16px;">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
//]]>
</script>

3º Agora procure por ]]></b:skin>  e cole antes o código abaixo.

  #related-posts{float:left;width:105%;}
#related-posts h1{background:none;color:#173b3c;font:16px Oswald;padding:3px;text-shadow:0 1px 1px white}
#related-posts .maskolis_img {border:4px solid #999;padding:0px 0px;width:132px;height:165px;transition:all 400ms ease-in-out;-webkit-transition:all 400ms ease-in-out;-moz-transition:all 400ms ease-in-out;-o-transition:all 400ms ease-in-out;-ms-transition:all 400ms ease-in-out;margin:10px 8px 5px}
#related-posts .maskolis_img:hover{opacity:.8;filter:alpha(opacity=80);-moz-opacity:.7;-khtml-opacity:.7}

4º Procure por <div class='post-footer-line post-footer-line-3'> e debaixo dele cole o código abaixo.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=12&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=6;
var relatedpoststitle=&quot;<b>Otros Post Interesantes</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/>
</b:if>

O número 6 corresponde numeros de artigos que irão aparecer