Coloque postagens relacionadas ao final de cada artigo de seu blog.
Para deixar um blog "completo" não é necessário enchê-lo de widgets de todos os tipos, nem colocar com funções coloridas para chamar a atenção dos visitantes. Fazendo isso, o que você irá conseguir é encher seu blog de scripts deixando-o pesado e lento para abrir as páginas afastando assim os visitantes e perdendo "pontos" com o Google.
O que deixa o blog "completo", além de conter um conteúdo de qualidade, é a funcionalidade. Ou seja, ter aquelas funções que realmente são necessárias para a navegação e interação dos visitantes com o conteúdo das páginas.
Pensando nisso, trazemos mais uma novidade aos blogueiros de plantão, um widget que realmente é necessário e de grande importância no blog. Esse widget com postagens relacionadas ao seu artigo publicado mostrará novas opções contidas em seu blog o que poderá atrair seus visitantes a navegar por outras páginas.
Além da sua excelente funcionalidade e necessidade, o efeito desse widget é de chamar a atenção. Depois de instalado, ele aparecerá com as imagens referentes as postagens relacionadas a aquele artigo. Ao passar o mouse sobre essas imagens, um pequena caixa flutuante com o título e uma breve descrição da postagem relacionada aparecerá logo acima, fazendo com que o visitante possa ler e caso se interessar acessar essa postagem.
Se você gostou desse estilo e funcionalidade, veja a seguir como tê-lo em seu blog.
Recomendamos que antes de qualquer alteração no código faça um backup do template. Caso ainda não saiba como proceder, acesse o artigo Como Fazer Backup do Blog.
Instalando em seu blog
>> Acesse seu Blogger, vá em "Modelo" e depois "Editar HTML".
>> Clique no código de seu template, pressione "CTRL+F" e pesquise por ]]></b:skin>
>> ACIMA da tag pesquisada cole o seguinte código:
#related_posts{height:180px;}
#related_posts h4{font-size:220%;font-family:'Open Sans Condensed',"Arial Narrow",Arial,sans-serif;text-transform:capitalize;margin-top:20px;}
.isirelated h5{text-transform:capitalize;font-size:120%;margin-bottom:3px}
#relpost_img_sum img{width:120px;height:120px;border: 2px solid #1d1d1d;
border-radius: 5px;
background-image:-moz-linear-gradient(top,#ffffff,#eeeeee);
background-image:-webkit-gradient(linear,left top,left bottom,from(#ffffff),to(#eeeeee));
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#eeeeee);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffffff),color-stop(1,#eeeeee));
background:-moz-linear-gradient(center top,#fff 0,#eee 100%);
-pie-background:linear-gradient(270deg,#ffffff,#eeeeee);
-moz-box-shadow:0 0 0 4px rgba(100,100,100,0.1);
box-shadow:0 0 0 4px rgba(100,100,100,0.1);
-webkit-box-shadow:0 0 0 4px rgba(100,100,100,0.1);}
.isirelated{width:300px;z-index:2;padding:5px 8px;background-color:#F3F3F3;border-bottom:2px solid black;position:absolute;top:-70%;left:200px;visibility:hidden;opacity:0;transition:all 0.6s cubic-bezier(1,2,0,0) 0s;-moz-transition:all 0.6s cubic-bezier(1,2,0,0) 0s;-webkit-transition:all 0.6s cubic-bezier(1,2,0,0) 0s;-o-transition:all 0.6s cubic-bezier(1,2,0,0) 0s}
#relpost_img_sum li:hover .isirelated{visibility:visible;opacity:1;left:10px}
.isirelated::after{content:"";width:0;height:0;border-width:10px 5px;border-style:solid;border-color:black transparent transparent transparent;position:absolute;top:100%;left:11px}
#relpost_img_sum li{list-style:none;width:120px;height:120px;position:relative;float:left;margin-right:5px}
.news-text{font-size:90%}
#relpost_img_sum li{margin-right:15px;}
>> Pesquise agora por </head>
>> ACIMA da tag pesquisada cole o seguinte código:
<script>
//<![CDATA[
$(document).ready(function(){
if(!$.browser.msie) $(".glap ul li").hover(function() {$(this).siblings().stop().fadeTo(400,0.4);},
function() { $(this).siblings().stop().fadeTo(400,1); });
});
//]]>
</script>
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
var relnojudul=0;var relmaxtampil=4;var numchars=150;var reljudul=new Array();var relurls=new Array();var relcuplikan=new Array();var relgambar=new Array();function saringtags(d,c){var b=d.split("<");for(var a=0;a<b.length;a++){if(b[a].indexOf(">")!=-1){b[a]=b[a].substring(b[a].indexOf(">")+1,b[a].length)}}b=b.join("");b=b.substring(0,c-1);return b}function relpostimgcuplik(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];reljudul[relnojudul]=d.title.$t;postcontent="";if("content" in d){postcontent=d.content.$t}else{if("summary" in d){postcontent=d.summary.$t}}relcuplikan[relnojudul]=saringtags(postcontent,numchars);if("media$thumbnail" in d){postimg=d.media$thumbnail.url}else{postimg="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE0tvLoPkb5X6uCyYR-HuJXkuNCDrzRGa5bTg2R5Z4UMe2AuCJOv9qhK8Z79xuiTKzwpi0HEI2buUUsQfUPEnbZgV-AIMKkUmdlMWeL19uus-lAt6dcidJDE0GiSzaV3tqU69mBo8z4r8/s1600/no_image.jpg"}relgambar[relnojudul]=postimg;for(var a=0;a<d.link.length;a++){if(d.link[a].rel=="alternate"){relurls[relnojudul]=d.link[a].href;break}}relnojudul++}}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function artikelterkait(){var j=new Array(0);var h=new Array(0);var g=new Array(0);var d=new Array(0);for(var k=0;k<relurls.length;k++){if(!contains(j,relurls[k])){j.length+=1;j[j.length-1]=relurls[k];h.length+=1;h[h.length-1]=reljudul[k];g.length+=1;g[g.length-1]=relcuplikan[k];d.length+=1;d[d.length-1]=relgambar[k]}}reljudul=h;relurls=j;relcuplikan=g;relgambar=d;for(var k=0;k<reljudul.length;k++){var c=Math.floor((reljudul.length-1)*Math.random());var p=reljudul[k];var m=relurls[k];var f=relcuplikan[k];var b=relgambar[k];reljudul[k]=reljudul[c];relurls[k]=relurls[c];relcuplikan[k]=relcuplikan[c];relgambar[k]=relgambar[c];reljudul[c]=p;relurls[c]=m;relcuplikan[c]=f;relgambar[c]=b}var n=0;var a=Math.floor((reljudul.length-1)*Math.random());var e=a;var o;var l=document.URL;while(n<relmaxtampil){if(relurls[a]!=l){o="<li class='news-title clearfix'>";o+="<a href='"+relurls[a]+"' rel='nofollow' target='_top' title='"+reljudul[a]+"'><img src='"+relgambar[a]+"' /></a>";o+="<div class='isirelated'><h5>"+reljudul[a]+"</h5>";o+="<span class='news-text'>"+relcuplikan[a]+" ... </span></div>";o+="</li>";document.write(o);n++;if(n==relmaxtampil){break}}if(a<reljudul.length-1){a++}else{a=0}if(a==e){break}}};
//]]></script>
</b:if>
* A parte destacada em AZUL, representa a quantidade de postagens relacionadas que aparecerão.
>> Pesquise agora por <div class='post-footer-line post-footer-line-1'>
* Você poderá encontrar dois trechos como esse, caso encontre opte pelo segundo.
>> ABAIXO do trecho encontrado cole o seguinte código:
<b:if cond='data:blog.pageType == "item"'>
<div id='related_posts'>
<p style='color:#111; font-weight: bold; font-size: 22px;font-family: "Trebuchet MS",sans-serif; margin:0px 0px 5px 0px; '>Postagens Relacionadas:</p>
<b:loop values='data:post.labels' var='label'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=relpostimgcuplik&max-results=40"' type='text/javascript'/>
</b:loop>
<span class='glap'><ul id='relpost_img_sum'>
<script type='text/javascript'>artikelterkait();</script>
</ul></span>
</div>
</b:if>
* A parte destacada em VERMELHO, representa o estilo do título, altere caso desejar.
>> Clique em "Visualizar", não encontrando nenhum erro clique em "Salvar Modelo".
>> Vá em seu blog e veja o resultado.
Deixe seu comentário, pois ele é a motivação para nosso trabalho.
Comentários