WIDGET ARTIGOS RELACIONADOS COM PUBLICIDADE NO FIM DO POST

Olá Pessoal, hoje estarei ensinando a vocês como adicionar em seu blog um widgetmuito legal, trata-se do widget de artigos relacionados que contêm um espaço para inserir um banner de publicidade ao lado do mesmo, esse efeito na minha opinião é excelente pois economiza bastante espaço em seu blog, o exemplo pode ser visto aqui mesmo no final desse artigo, pois o código que estarei disponibilizando é exatamente o mesmo que uso aqui no Ajudinha Blog.


Adiciona esse widget é bem fácil, para isso é só seguir o tutorial abaixo e desfrutar de um excelente recurso em seu blog.

Acesse o painel do blogger, clique em Modelo, editar Html marque Expandir Modelos de Widgets e procure imediatamente pela tag ]]></b:skin> e acima dela cole o código abaixo.


/*----Artigos Relacionados com publicidade by http://www.ajudinhablog.hol.es----*/

#subscribe {font: 16px/1.2 Arial,Helvetica,san-serif; color:#000;}#substext {background:#fff; color:#000; padding:8px; margin:2px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;font-size:16px; border:1px solid #222;}#subsbuttom {background:#e04a21; color:#fff; padding:8px; margin:2px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;font-size:16px; border:1px solid #222;}#related{background:#f7f7f7; float:center; width: 98%; border:0px solid #ccc; border-bottom:1px solid #ddd; border-right:1px solid #ddd;margin:-130 0 5px;padding:10px}ul#related-posts{font:normal normal 11px Oswald;list-style:none;text-transform: none;margin:0px 21px;padding:0}#related .related-posts{width:50%;float:right;font:normal normal 16px Oswald;text-transform: uppercase;color:#333;}#related .related-posts p{margin:0}ul#related-posts li{float:left;height:auto;list-style-type:none;margin:0 5px;padding:2px 1px}*html ul.rp#related-posts li{margin:0 13px}ul#related-posts li a{-moz-box-shadow:0 1px 2px rgba(0,0,0,0.15);border:2px solid #ccc; display:block; height:72px;position:relative;width:72px;color:#333;text-decoration:none;}ul#related-posts li .overlay{height:66px;line-height:16px;position:absolute;width:66px;z-index:10;padding:6px 0 0 6px}ul#related-posts li a:hover .overlay{background:#fff;display:block!important;opacity:0.7}ul#related-posts li img{bottom:0;padding:0!important}ul#related-posts li a:hover{-moz-box-shadow:0 1px 3px rgba(0,0,0,0.25)}#related .subscribe{width:40%;float:left;color:#000;font-size: 14px;}#related .subscribe p.intro{font-weight:400}#related .subscribe p.feed{margin-bottom:10px;font-weight:700;padding-left:21px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj91BWt4fuTV6RStTMNXyf_Gq3dCYXKE6lq44Fs1ZLmCF0lqqbwu3g1U5iOddhL6LmlZcBOGrJqO5Oo2bY0S795XQBIb91GYw1Yvq7p9_KTtzyUiduNosejUGsikwnajqHd0zBe16_Mjeo/) 0 50% no-repeat;vertical-align:middle}.clearfix:after{content:&quot;.&quot;;display:block;height:0;clear:both;visibility:hidden}.clearfix{display:inline-block}#barra-post {width: 98%;background: #2780c7;border: 1px solid #CCC;height: 25px;padding: 5px 5px 1px 5px;margin: 8px;}#barra-post div {float: left;}#compartilhe {font-size: 14px;margin-right: 20px;color: #FFF;}
/*----Artigos Relacionados com publicidade by http://www.ajudinhablog.hol.es----*/

Ainda dentro do Html do seu blog procure pela tag <div class='post-footer'> e logo depois dela adicione o código a seguir, visualize para ver se esta tudo ok e salve.

<div class='clearfix' id='related'>
<div class='related-posts'>
<p align='center'><strong>Artigos relacionados</strong></p>
<script type='text/javascript'>
var defaultnoimage=&quot;&quot;;
var maxresults=9;
</script>
<script type='text/javascript'>
//<![CDATA[
//Script by Aneesh of www.bloggerplugins.org
//Released on August 19th August 2009
// Modified By Bloggerzbible.com
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.media$thumbnail.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 {if(typeof(defaultnoimage) !== 'undefined') thumburl[relatedTitlesNum]=defaultnoimage; else thumburl[relatedTitlesNum]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwRcoiynCH1okLmF9qwOWpzTte4cq1_PpRHK1Dq4uBTD9LYPTillJGubDTjiR6rXgXSlApFulcIXMuIEa6aIjwP5sM_DwDnzV7-O1tvQZ7VZewyfbWZJNIaSbCvkNaheSyBLxcxoRq598/s400/noimage.png";}
}
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(current) {
var splitbarcolor;
if(typeof(splittercolor) !== 'undefined') splitbarcolor=splittercolor; else splitbarcolor="#d4eaf2";
for(var i = 0; i < relatedUrls.length; i++)
{
if((relatedUrls[i]==current)||(!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('<ul id="related-posts">');
while (i < relatedTitles.length && i < 20 && i<maxresults) {
document.write('<li><a');
document.write(' href="' + relatedUrls[r] + '"><span class="overlay" style="display:none;">'+relatedTitles[r]+'</span><img style="width:72px;height:72px;border:0px;" src="'+thumburl[r]+'"/></a></li>');
i++;
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
}
document.write('</ul>');
relatedUrls.splice(0,relatedUrls.length);
thumburl.splice(0,thumburl.length);
relatedTitles.splice(0,relatedTitles.length);
}
//]]>
</script>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<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=6&quot;' type='text/javascript'/>
<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=6&quot;' type='text/javascript'/>
<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=6&quot;' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div>
<div class='subscribe'>
CÓDIGO DO ANÚNCIO </div>
</div>
</div>

OBS: Troque a parte do código destacado em vermelho pelo código do anúncio, lembrando que o anúncio usado aqui no AJB é de 300x250, mas você também pode usar de 250x250 devido a largura da área do post ser menor. Espero que tenham gostado do widget, não deixe de compartilha-lo nas redes sociais.

Gostou do widget? Tem alguma dúvida sobre a instalação em seu blog? 

Comente e dê sua opinião.