Como Colocar Anúncios ao Lado dos Posts Relacionados no Blogger

Adicione anúncios de publicidade ao lado dos artigos relacionados possibilitando receber mais cliques e obtendo lucro com seu blog.

Existem diversos locais dentro de um blog em que é possível a veiculação de anúncios de programas de afiliados. Dentre esses locais, alguns se destacam e rendem um taxa de conversão maior que outros motivando os blogueiros a testar a inserção de banners nessas áreas para buscar um melhor rendimento. Segundo pesquisas, anúncios inseridos dentro das postagens tendem a serem mais vistos que em outros locais da página, pois, o visitante se concentra naquele artigo ao qual estava interessado e acaba por juntamente visualizando aqueleanúncio.

Anúncios ao lado dos posts relacionados

Um outro local interessante para inserir banners é o final das postagens, por algumas observações, visitantes que se interessam pelo artigo proposto leem-no até o final e passam para formulário de comentário para se expressar, visualizando muito essa área dentro do blog. Justamente nesse ponto, podemos colocar anúncios, e, também inserindo um importante gadget que é o de posts relacionados.

Nesse artigo, mostraremos como é possível inserir juntamente posts relacionados e anúncios lado a lado gerando um maior interesse do visitante em novas opções e também o mesmo poder estar visualizando aquele anúncio. Outro ponto positivo, é que os artigos relacionados vem um visual bem atraente, exibindo quadrados com as imagens referentes aos posts e no seu interior os títulos dos mesmos, tudo isso atrelado a um efeito hover bem interessante.

 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.

Colocando Anúncios ao lado das postagens relacionadas em seu blog

>> Acesse seu Blogger, vá em "Modelo" e depois "Editar HTML".

>> Clique no código do template, pressione "CTRL+F" e pesquise por ]]></b:skin>

>> Logo ACIMA da tag encontrada, cole o seguinte código:

/* Postagens Relacionadas
----------------------------------------------- */
#related-posts{width:225px; margin-top:-3px; margin-right:5px; float:left;}
#related-posts h2{font-size:15px;}
#related-posts ul li a,#related-posts li a .title h4{color:#fff;font-size:10px}
#related-posts ul{margin-bottom:20px;padding:10px 0; margin-top:-14px}
#related-posts ul li{list-style:none;overflow:hidden;float:left;height:100px;margin:0 10px 10px 0;width:102px;font-size:13px;color:#fff;position:relative}
#related-posts ul li:last-child{margin:0 0 10px 0;}
#related-posts li .thumbR{width:102px;height:100px;overflow:hidden}
#related-posts img:hover{opacity:.7}
#related-posts li .thumbR img{height:auto;width:100%}
#related-posts li{background:#333}
#related-posts li .title{position:absolute;bottom:10px;left;10px;background:rgba(0,0,0,0.5);width:85%;padding:3px}

OBS: Caso não se adequar a seu blog, será necessário ajustar as larguras:

* Em LARANJA, largura total dos posts relacionados.

* Em VERMELHO, tamanho do título.

* Em VERDE, largura das imagens.

* Em AZUL, altura das imagens.

>> Pesquise agora por <div class='post-footer'>

* Você poderá encontrar dois trechos iguais, caso encontre opte pelo segundo.

>> Logo ABAIXO do trecho encontrado cole o seguinte código:

<!--INÍCIO POSTAGENS RELACIONADAS-->
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != "archive"'>
<div id='rel+ads'>
<div id='related-posts'>
                        <script type='text/javascript'>
                          //<![CDATA[
                          //Script by uong jowo
                          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]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm2zhNtnrf1C8pXZH3sqwhdX2qnt7JzSGrNt4srgqTjlj3hZGsvzsxQ2mwUz4LrLm4EzIKj4wTbLHU4podPMRoyRdCLkLdoSaMwMZa2hNnQWrHUA-I8FFoTcA3OFLR1gqgKvXRurEfcQ/s1600/no-logo.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('<h2><span>'+relatedpoststitle+'</span></h2>');
                            document.write('<ul>');
                            while (i < relatedTitles.length && i < 20 && i<maxresults) {
                              document.write('<li><a style="float:left;');
                              if(i!=0) document.write('"');
                              else document.write('"');
                              document.write(' href="' + relatedUrls[r] + '"><div class="thumbR"><img src="'+thumburl[r]+'"/><div class="title"><h4>'+relatedTitles[r]+'</h4></div></div></a></li>');
                              if (r < relatedTitles.length - 1) {
                                r++;
                              } else {
                                r = 0;
                              }
                              i++;
                            }
                            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>
                          <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&quot;' type='text/javascript'/>
                          </b:if>
                        </b:loop>
                        <script type='text/javascript'>
                          var currentposturl=&quot;<data:post.url/>&quot;;
                          var maxresults=4;
                          var relatedpoststitle=&quot;Postagens Relacionadas...&quot;;
                          removeRelatedDuplicates_thumbs();
                          printRelatedLabels_thumbs();
                        </script>
</div>
AQUI VOCÊ SUBSTITUI PELO CÓDIGO DO ANÚNCIO TAMANHO 300X250
</div>
</b:if>
</b:if>
<!--FIM POSTAGENS RELACIONADAS-->

* Substitua o trecho destacado em AMARELO pelo código do anúncio (320x250 px). Lembrando que se for do ADSENSE, o mesmo terá ser convertido para que funcione.

* Para converter o código, acesse o nosso Conversor de Código Adsense.

>> Clique em "Visualizar", não encontrando nenhum erro clique em "Salvar Modelo".

>> Vá em seu blog e veja como ficou.

Após a conclusão do processo, seu blog já contará com a função fundamental de exibir posts relacionados ao artigo, que, exibirá mais opções para que os visitantes permaneçam por mais tempo em suas páginas.  E, logo ao lado você poderá colocar um banner de publicidade para que o tráfego de seu blog gere lucros.

Deixe seu comentário, pois ele é a motivação para nosso trabalho.