Widget jQuery slideshow de posts populares

Olá amigos Mult-foco! Vamos neste post trazer um maravilhoso recurso para o seu blog. Trata-se do Widget  jQuery slideshow  de posts populares, muito interessante e de fácil instalação. Dê uma olhadinha comofica clicando em DEMO.

DEMO
Como vamos mexer no HTML do Blogger é aconselhável, fazer um backup do template antes de começar, se não sabe como faz é só aprender aqui.

Leia todo o post antes de começar.

Agora que já fez o backup, mãos a obra.

1) Vá em Blogger-> Template-> Editar HTML
2) Procure por </head> 
3) Copie e cole o código abaixo logo acima de </head>.

 <b:widget id='PopularPosts7' 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='http://i1316.photobucket.com/albums/t609/Multfocos/defaultimage_zps49f9264d.jpg'/>  
 </b:if>  
 </a>  
 </b:if>  
 </li>  
 </b:loop>  
 </ul>  
 </div></div></b:if>  
 </b:includable>  
 </b:widget>  

Se o seu blog tem o plug-in jquery, remova esta parte do código em destaque abaixo.

<scriptsrc='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'type='text/javascript'/>

4) Em seguida procure o código abaixo,

<b:section class='main' id='main' showaddelement='no'>

5) Copie e cole o código abaixo logo abaixo do código acima.

 <div class="codeBox">  
 <pre class="brush: linguagem">  
 <b:widget id='PopularPosts7' 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='http://i1316.photobucket.com/albums/t609/Multfocos/defaultimage_zps49f9264d.jpg'/>  
 </b:if>  
 </a>  
 </b:if>  
 </li>  
 </b:loop>  
 </ul>  
 </div></div></b:if>  
 </b:includable>  
 </b:widget>  

6) clique no botão de visualização, Quando estiver satisfeito com a forma como o seu widget parece e se comporta na janela de visualização, você só precisa salvar o modelo.
Pronto agora é só comentar, obrigado!