Recent post widget by tag style 2018 para blogger

recent post 2018 widget para blogger

Hoje vamos compartilhar esse tutorial para os amantes de Blogger se você deseja adicionar um widget que faça toda a difernça na pagina principal aconselhamos a utilizar esse tem um perfeito estilo alem de que isso da uma melhor visibilidade no template na questão de visualização e pode ser configurado com tag especifica por assunto para adicionar no seu template siga os passos abaixo

Recent post widget by tag style 2018 para blogger

Faça login no blogger va no menu tema então editar HTML com as teclas combinadas CTRL+F busque por </style> ou ]]></b:skin> e antes disso vamos adicionar o código Css abaixo:

/* CSS Recent Post by Label */
#recent-post{border-top:1px solid rgba(0,0,0,0.1);width:100%}
#recent-post{position:relative;display:block;width:1010px;margin:0 15px 15px 15px;box-sizing: border-box;background: #ffffff;padding:2px;}
#recent-post{border-top:1px solid rgba(0,0,0,0.1);top-width:100%}
#recent-post .recent-list{display:inline-block;width:32.3%;padding: 0 1%;box-sizing: border-box;vertical-align: top;}
#recent-post .recent-list .recentpost{font-size:0px;}
#recent-post a{color:#000;}
#recent-post .recent-list .recentpost ul,#recent-post .recent-list .recentpost ul li{padding:5px 3px;margin:0px auto;list-style: none}
#recent-post .recent-list .recentpost ul li,#recent-post .recent-list .recentpost h2{color:#000;font-size:14px;line-height: 21px;}
#recent-post .recent-list .recentpost h2{padding:2% 0 2% 0;margin:0 0 2%;border-bottom: 3px solid;border-color:#029ecc}
@media screen and (max-width:900px) and (max-width:400px){#recent-post .recent-list{display:block;}}

Então procure por </body> e antes disso copie e cole o seguinte código:

<script type='text/javascript'>
//<![CDATA[
function recentpostslist(e){document.write("<ul >");for(var t=0;t<e.feed.entry.length;t++){for(var r=0;r<e.feed.entry[t].link.length&&"alternate"!=e.feed.entry[t].link[r].rel;r++);var n="'"+e.feed.entry[t].link[r].href+"'",l=e.feed.entry[t].title.$t,i="<li><a href="+n+'" target="_blank">'+l+"</a> </li>";document.write(i)}document.write("</ul>")}
//]]>
</script>

Insira o Codigo HTML onde desejar melhor opção antes de wrapper na barra lateral 

<div id='recent-post'>
<div class='recent-list'>
    <b:section class='recentpost' id='recentpost1' preferred='yes'/>
</div>
<div class='recent-list'>
    <b:section class='recentpost' id='recentpost2' preferred='yes'/>
</div>
<div class='recent-list'>
    <b:section class='recentpost' id='recentpost3' preferred='yes'/>
</div>
</div>

Então va no menu layout e vai ver 3 tipos de widgets recent post então adicione o seguinte código 

<script src="/feeds/posts/summary/-/LABEL?max-results=5&alt=json-in-script&callback=recentpostslist"></script>


Obs: em label troque pela tag de conteúdo que deseja mostrar  5 altera o numero de postagem que deseja exibir 

salve e veja o resultado.

Click to comment