Add Popular Post Slider/Image Gallery In Blogger

You might have seen so many sliders or crousels that works on the recent posts or you have to add images in it manually. In this tutorial i will give you the slider/image gallery that works on the popular posts. This widget shows your 10 popular posts images in form of slider. This slider is made by dynamicdrive.com and i make some changes to make it popular post slider

Popular Posts Slider Preview

Popular Post Slider Demo

Live Demo

How To Add Popular Post Slider/Image Gallery To Blogger

• Go to Blogger Dashboard 
• Click on DropDown Menu and select Template
• Backup your Template before making any changes to your blog
• Now Click on Edit HTML --> Proceed --> Expand Widget Templates
• Press Ctrl + F and search the code shown below

</head>

• Now Paste the Code shown below just before/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/AVvXsEjRcSSNT4Zbcs1dz9Xl6k0AWGQ8rRzkmUL_Zf9ivu4PSQJqghI4AFQd9jrx7EB_IjfsuETj0oYpbHhQmjP8mjGGcJSOVeX9lX4QZrI9kR1-YOHXdaTblkaIO9U9a8nnlmIsI9o7J5dKqCo/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='http://latest-hacks.googlecode.com/svn/gadgets/popularposts/popular-posts.js' 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/AVvXsEiXq-3WVRyrzCeDyQxmvOXQLYTG9-TIJmvZmneX6I8ao_JmaSGF22YUk_tCPsiTD94l-ZJS2wi-Bp5LSJMbnCOayXDCYWJl-ObPmZOb2ALEQp7D_ErQEzwPnk_rWyNxIFIk_1ETavnfPak/s1600/prev.png", -40, 36], rightnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtH9bX5yva-hLo1SvusELMabDT8eX1OwLcz0D7kRhiI5sHWf6Cup5RBZ6LHR-jGSgN_UX_fwTxCy0bZmT0Lzn5VJumtfIk_7iPMYiDi8ie0guEwEHE5-dOZ4EFLCdIeSxdGjHtdTs_XT4/s1600/next.png", 2, 36]},
contenttype: ["external"]
})
//]]>
</script>

• Now Find the code shown below using [ctrl+F]

<b:section class='sidebar' id='sidebar' preferred='yes'>

• Now Paste the Code Shown Below just below/after 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/AVvXsEgn_yWQ9XTfrK7m_eTfF6DJp7eY-F9i6e23YDQSQPuZwrhDzTVLM8nourSPFx30h-BWm6XwxDcqLtp0pn83NM0nCPepc9_dbELm7Z15WCkW6a5EjUvNiMcPSmkO2PUwZ4Eo_5mqLyNWiUs/s1600/defaultimage.jpg'/>
        </b:if>
       </a>
      </b:if>
     </li>
    </b:loop>
   </ul>
  </div></div></b:if>
 </b:includable>
</b:widget>

• Now save your template

Like it? Share it.