Galeria com Postagens Populares no Blogger

Galeria com Postagens Populares no Blogger
Crie em seu blog uma galeria/slide com as postagens mais visitadas e obtenha mais cliques em seus principais trabalhos.

Nos nossos blogs sempre há algumas postagens que se destacam, trazendo muito tráfego a cada dia. E, normalmente precisamos dar um destaque especial a elas para que visitantes que cheguem à procura de algo em especial possam também conhecer aquelas postagens que estão tendo um número maior de acessos e se sobressaindo as outras.

Para dar esse destaque, na maioria das vezes, colocamos o widget posts populares na sidebar do blog para que fique visível a todos que acessem e possam saber que aqueles artigos são os que mais recebem visitas e provavelmente possam despertar a curiosidade para também serem clicados. Outra importante forma de destacar os posts mais visitados é poder personaliza-los para que fiquem com um visual mais atraente e assim direcionar os olhares para aquele ponto do blog.

Galeria de posts populares estilo slider


Se você já se cansou daquele estilo simples do gadget posts populares, trazemos uma interessante opção para seu blog, uma galeria estilo slide para que suas páginas nunca mais sejam monótonas. Nela, seus melhores trabalhos ganharão um maior destaque do que já possuía e você poderá adicionar uma funcionalidade que trará uma nova perspectiva visual.

Falando um pouco sobre o visual, essa galeria contém um efeito slider, ou seja, as postagens ficarão alinhadas lateralmente e terão uma alternância gerada por um efeito jquery. Além disso, ao passar o mouse sobre as opções, as mesmas ficarão um efeito opacity que deixará ainda mais belo o seu gadget/slide de postagens populares.
Galeria com Postagens Populares após instalada

 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 Galeria de Posts Populares no 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 código a seguir:
#gallery{position:relative;margin:0 35px 20px;width:540px;height:126px;background:#ffffff}
#gallery .belt{position:absolute;top:0;left:0;list-style-type:none}
#gallery .panel{float:left;margin:20px;width:84px;height:86px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjWr3a3eRxVOEqhH_NVMTczWFCsHL2inTkAuOzfLYcoL4hv5thO4HVX1IleTu2yLiYtXTpNWYnXV7osRGhKlGiYCqa7FYjxmd-FWA1HbIWdQoMwDw8jhd6-FXE00uNQIZPLGtoDpfDT__V/s1600/bg-slider.png) bottom center no-repeat;overflow:hidden}
#gallery .panel img{float:left;border:1px solid #DDD;margin:5px;width:72px;height:72px;background:#FFF;padding:0px}
#gallery .panel img:hover{filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5}
* Em VERMELHO (width:540px) ajuste de acordo com a largura desejada.
* Em AZUL (height:126px) ajuste de acordo com a altura desejada.

>> Pesquise agora por </head>

>> Logo ACIMA da tag encontrada cole o código a seguir:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/82512544271/auto-slider.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
stepcarousel.setup({
galleryid: "gallery",
beltclass: "belt",
panelclass: "panel",
autostep: {enable:true, moveby:1, pause:6000},
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 2, leftnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZLsqtbQ0bmkPNMLP4ZR4v_JL8zyEHHZvTsqBP6XGCUqUGJIDcRKkEplAChMG-uYMUiPvdrUzvN1pP8QaCbDiZ3MexAfSldDGIf0VpVjyDm8z5598nefcZSYUOgQZgOnmqzOj0qsWPrSLb/s1600/prev.png", -40, 36], rightnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmus3BCBFNMq9I3Se-XvyjhGgd0X5-a75JV-FrNoPmo6hpJbpap6SYZlvUYx664fUhOHomQK_lq3MPlOvWmSpXQq2sOQRey_N7SFb7Ktap06zy8Kduk2tctq0Q2lQYe0HF2bw5UFXU2y30/s1600/next.png", 2, 36]},
contenttype: ["external"]
})
//]]>
</script>
>> Pesquise agora por <b:section class='main' id='main' showaddelement='no'>
* Utilizando esse trecho, sua galeria ficará acima das postagens do blog. Caso desejar outro local pesquise por outro trecho dentro do html do template.

>> Logo ABAIXO do trecho encontrado cole o código a seguir:
 <b:widget id='PopularPosts2' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div style='margin-top:20px;margin-bottom:70px;margin-left:-20px;'>
  <div id='gallery'>
   <ul class='belt'>
    <b:loop values='data:posts' var='post'>
     <li class='panel'>
      <b:if cond='data:showThumbnails == &quot;false&quot;'>
       <b:if cond='data:showSnippets == &quot;false&quot;'>
        <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
       <b:else/>
        <div class='item-title'>
         <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
        </div>
        <div class='item-snippet'>
         <data:post.snippet/>
        </div>
       </b:if>
      <b:else/>
       <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'>
        <b:if cond='data:post.thumbnail'>
         <img expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
        <b:else/>
         <img alt='no image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFRc8kNawCT8AiCt3ttfQ9dzk_2L8je8lGWnFbVZstQeVq7XoQ77EXD6257R_SWAKjR1kwaO2LExWanUjfivnaNq87QEPzCWRJD1QDYV2rfEM3yGDpU4fxgDrNsjTGQoIMW2H708Lv7nBH/s1600/no-image.PNG'/>
        </b:if>
       </a>
      </b:if>
     </li>
    </b:loop>
   </ul>
  </div></div></b:if>
 </b:includable>
</b:widget>
>> Clique em "Visualizar", não encontrando nenhum erro clique em "Salvar Modelo".

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

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

Comentários

 
Copyright ©2015 Canal Do MatheusBR Todos os Direitos reservados | Designed by Sinistro de BTN