Popular Posts Slideshow Widget for Blogger

When it comes to building a fan base or readership of your blog, getting people to your site is half the battle. Encouraging them to stay and continue exploring your content is another important thing, which is sometimes overlooked by bloggers pouring a lot of their energies into SEO to drive new visits.

Giving your new and existing readers reasons and opportunities to stay longer can transform them from occasional visitors to true fans – a conversion that can worth its weight in gold if you also sell products and services on your site. You can gently push them to view additional posts and content via a number of strategies, but including popular posts in the sidebar or at the bottom of content has become especially popular among savvy bloggers.

• As usual go to blogger–> Template-> Edit HTML
• Search for </head> in your blogs HTML
• Copy and paste below code just above it.

 <style type="text/css"> 
 #gallery{position:relative;margin:0 35px 20px;width:500px;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/AVvXsEh1ktcR9jo6Aca1Y40Sl8UQQnT8Yjou_ZrcTl3RGHc7ReMj7hfS6NjnmHkVBYv_iwMvvC6bMtB1hAXlhUfVOz26qC8tT7TGRLOpV3Zo-9TaYM6_4_nZBeUjuUmafkYvprIDfQLwT3eyfRY/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} 
 </style> 
 <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/> 
 <script src='https://googledrive.com/host/0BwALzyMd6jXXNEtnV2Zja3lJc1E' type='text/javascript'/> 
 <script type='text/javascript'> 
 //<![CDATA[ 
 stepcarousel.setup({ 
 galleryid: "gallery", 
 beltclass: "belt", 
 panelclass: "panel", 
 autostep: {enable:true, moveby:1, pause:3000}, 
 panelbehavior: {speed:500, wraparound:true, persist:true}, 
 defaultbuttons: {enable: true, moveby: 2, leftnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilHkLu4jOyyBWBcJoI_ph-zYnefEcWT5KDPXb3moIkhs-AP6bKMIYrtZB_12b3GfP4Nowdd_bcu0e0ErLYM2mdzWy7PNP-XrXnLiShUzwgROCpswtXyj-JtNzPvPuRj2tRmhtFchPoD-Q/s1600/prev.png", -40, 36], rightnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivM0ZoBzZ3_E6FJdehc-v1vZLVpr5RFt2G742DkCFvPzezuHc9lQ8eROAueVCh9-DMTveOMSBc-5aV1VXxPwxJy__MlBhmqx53hg_-PkeL-makszzQN7-5-7kRSQm9Jt6FjS813FY6IZ0/s1600/next.png", 2, 36]}, 
 contenttype: ["external"] 
 }) 
 //]]> 
 </script> 

•  If your blog have already jquery plugin then remove above red colored line 
• Next search for code below

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

• Copy and paste the following code just after/below it.

 <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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMhGgSPCPHTAaf8KuGYOeKFQcokQ45SUmqxLS6bWmjX-hKR6tdmTYraMyFX94F5DmcHTM16WstEqIhE39U0-d-cBtQMJ9Vq-4YwdzstfxSRFvwnQ6SCZC8ZJ9kgPOd6IfDjhyETXmaok0/s1600/defaultimage.jpg'/> 
 </b:if> 
 </a> 
 </b:if> 
 </li> 
 </b:loop> 
 </ul> 
 </div></div></b:if> 
 </b:includable> 
 </b:widget> 

Now click on preview button, once you are satisfied with how your widget looks and behaves in the preview window you just need to save your template.