Add a Popular Posts Gallery just above your Blogger posts

The most popular web design trend over last couple of years are horizontal sliding panels, also known as sliders or carousels. One of the effective ways to increase the site usability and engage the user is to add a popular posts gallery above Blogger posts to display the most viewed 10 posts on your blog.

To see it live, please visit the demo blog below.



Adding Popular Posts Gallery Above Blogger Posts

Before adding the Popular posts widget as gallery in Blogger, please note that this widget is not fully compatible with all templates, so it's recommended to make a backup before making any changes in your Blogger template.

Now, follow these steps:

1. Go to Dashboard, click "Template" > hit the "Edit HTML" button and click anywhere inside the code area > press the CTRL + F keys to open the Blogger search box.

2. Type or paste this tag inside the search box:
]]></b:skin>
Note: you may have to click the arrow next to it, then try to find ]]></b:skin> again.

3. Just above/before it, add the following CSS:
#gallery{position:relative;margin:0 0 20px;height:126px;}
#gallery .belt{position:absolute;top:0;left:0;list-style-type:none}
#gallery .panel{float:left;margin:0px 10px 20px 0;width:84px;height:86px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkhg0qyV7xG0TCUc4CEqPs7tSLEtyY5d7Qhf-HSoDUq1e3gka2JJ1b-krW_gHjQJdUi9ApKF-guO5TgnCDJ-4ghbbo1mrtopX_WknHW12ubzANvQKfohqj6ry0j1drOEPqpfP0oKJbSFlL/s1600/bg-slider.png) bottom center no-repeat;overflow:hidden}
#gallery .panel img{border:1px solid #DDD;margin:7px 6px 6px;width:72px;height:72px;background:#FFF;padding:0px}
Note: change the value in red (126px) to adjust the gallery height.

4. Now search the following tag:
</head>
5. Just above/before it, add the script for the Popular Posts gallery and jQuery:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/><script type='text/javascript'>
//<![CDATA[
var stepcarousel={ajaxloadingmsg:'<div style="margin: 1em; font-weight: bold"><img src="ajaxloadr.gif" style="vertical-align: middle" /> Fetching Content. Please wait...</div>',defaultbuttonsfade:0.4,configholder:{},getCSSValue:function(val){return(val=="auto")?0:parseInt(val)},getremotepanels:function($,config){config.$belt.html(this.ajaxloadingmsg)
$.ajax({url:config.contenttype[1],async:true,error:function(ajaxrequest){config.$belt.html('Error fetching content.<br />Server Response: '+ajaxrequest.responseText)},success:function(content){config.$belt.html(content)
config.$panels=config.$gallery.find('.'+config.panelclass)
stepcarousel.alignpanels($,config)}})},getoffset:function(what,offsettype){return(what.offsetParent)?what[offsettype]+this.getoffset(what.offsetParent,offsettype):what[offsettype]},getCookie:function(Name){var re=new RegExp(Name+"=[^;]+","i");if(document.cookie.match(re))
return document.cookie.match(re)[0].split("=")[1]
return null},setCookie:function(name,value){document.cookie=name+"="+value},fadebuttons:function(config,currentpanel){config.$leftnavbutton.fadeTo('fast',currentpanel==0?this.defaultbuttonsfade:1)
config.$rightnavbutton.fadeTo('fast',currentpanel==config.lastvisiblepanel?this.defaultbuttonsfade:1)},addnavbuttons:function(config,currentpanel){config.$leftnavbutton=jQuery('<img src="'+config.defaultbuttons.leftnav[0]+'">').css({zIndex:50,position:'absolute',left:config.offsets.left+config.defaultbuttons.leftnav[1]+'px',top:config.offsets.top+config.defaultbuttons.leftnav[2]+'px',cursor:'hand',cursor:'pointer'}).attr({title:'Back '+config.defaultbuttons.moveby+' panels'}).appendTo('body')
config.$rightnavbutton=jQuery('<img src="'+config.defaultbuttons.rightnav[0]+'">').css({zIndex:50,position:'absolute',left:config.offsets.left+config.$gallery.get(0).offsetWidth+config.defaultbuttons.rightnav[1]+'px',top:config.offsets.top+config.defaultbuttons.rightnav[2]+'px',cursor:'hand',cursor:'pointer'}).attr({title:'Forward '+config.defaultbuttons.moveby+' panels'}).appendTo('body')
config.$leftnavbutton.bind('click',function(){stepcarousel.stepBy(config.galleryid,-config.defaultbuttons.moveby)})
config.$rightnavbutton.bind('click',function(){stepcarousel.stepBy(config.galleryid,config.defaultbuttons.moveby)})
if(config.panelbehavior.wraparound==false){this.fadebuttons(config,currentpanel)}
return config.$leftnavbutton.add(config.$rightnavbutton)},stopautostep:function(config){clearTimeout(config.steptimer)
clearTimeout(config.resumeautostep)},alignpanels:function($,config){var paneloffset=0
config.paneloffsets=[paneloffset]
config.panelwidths=[]
config.$panels.each(function(index){var $currentpanel=$(this)
$currentpanel.css({float:'none',position:'absolute',left:paneloffset+'px'})
$currentpanel.bind('click',function(e){return config.onpanelclick(e.target)})
paneloffset+=stepcarousel.getCSSValue($currentpanel.css('marginRight'))+parseInt($currentpanel.get(0).offsetWidth||$currentpanel.css('width'))
config.paneloffsets.push(paneloffset)
config.panelwidths.push(paneloffset-config.paneloffsets[config.paneloffsets.length-2])})
config.paneloffsets.pop()
var addpanelwidths=0
var lastpanelindex=config.$panels.length-1
config.lastvisiblepanel=lastpanelindex
for(var i=config.$panels.length-1;i>=0;i--){addpanelwidths+=(i==lastpanelindex?config.panelwidths[lastpanelindex]:config.paneloffsets[i+1]-config.paneloffsets[i])
if(config.gallerywidth>addpanelwidths){config.lastvisiblepanel=i}}
config.$belt.css({width:paneloffset+'px'})
config.currentpanel=(config.panelbehavior.persist)?parseInt(this.getCookie(window[config.galleryid+"persist"])):0
config.currentpanel=(typeof config.currentpanel=="number"&&config.currentpanel<config.$panels.length)?config.currentpanel:0
if(config.currentpanel!=0){var endpoint=config.paneloffsets[config.currentpanel]+(config.currentpanel==0?0:config.beltoffset)
config.$belt.css({left:-endpoint+'px'})}
if(config.defaultbuttons.enable==true){var $navbuttons=this.addnavbuttons(config,config.currentpanel)
$(window).bind("load resize",function(){config.offsets={left:stepcarousel.getoffset(config.$gallery.get(0),"offsetLeft"),top:stepcarousel.getoffset(config.$gallery.get(0),"offsetTop")}
config.$leftnavbutton.css({left:config.offsets.left+config.defaultbuttons.leftnav[1]+'px',top:config.offsets.top+config.defaultbuttons.leftnav[2]+'px'})
config.$rightnavbutton.css({left:config.offsets.left+config.$gallery.get(0).offsetWidth+config.defaultbuttons.rightnav[1]+'px',top:config.offsets.top+config.defaultbuttons.rightnav[2]+'px'})})}
if(config.autostep&&config.autostep.enable){var $carouselparts=config.$gallery.add(typeof $navbuttons!="undefined"?$navbuttons:null)
$carouselparts.bind('click',function(){stepcarousel.stopautostep(config)
config.autostep.status="stopped"})
$carouselparts.hover(function(){stepcarousel.stopautostep(config)
config.autostep.hoverstate="over"},function(){if(config.steptimer&&config.autostep.hoverstate=="over"&&config.autostep.status!="stopped"){config.resumeautostep=setTimeout(function(){stepcarousel.autorotate(config.galleryid)
config.autostep.hoverstate="out"},500)}})
config.steptimer=setTimeout(function(){stepcarousel.autorotate(config.galleryid)},config.autostep.pause)}
this.statusreport(config.galleryid)
config.oninit()
config.onslideaction(this)},stepTo:function(galleryid,pindex){var config=stepcarousel.configholder[galleryid]
if(typeof config=="undefined"){alert("There's an error with your set up of Carousel Viewer \""+galleryid+"\"!")
return}
stepcarousel.stopautostep(config)
var pindex=Math.min(pindex-1,config.paneloffsets.length-1)
var endpoint=config.paneloffsets[pindex]+(pindex==0?0:config.beltoffset)
if(config.panelbehavior.wraparound==false&&config.defaultbuttons.enable==true){this.fadebuttons(config,pindex)}
config.$belt.animate({left:-endpoint+'px'},config.panelbehavior.speed,function(){config.onslideaction(this)})
config.currentpanel=pindex
this.statusreport(galleryid)},stepBy:function(galleryid,steps){var config=stepcarousel.configholder[galleryid]
if(typeof config=="undefined"){alert("There's an error with your set up of Carousel Viewer \""+galleryid+"\"!")
return}
stepcarousel.stopautostep(config)
var direction=(steps>0)?'forward':'back'
var pindex=config.currentpanel+steps
if(config.panelbehavior.wraparound==false){pindex=(direction=="back"&&pindex<=0)?0:(direction=="forward")?Math.min(pindex,config.lastvisiblepanel):pindex
if(config.defaultbuttons.enable==true){stepcarousel.fadebuttons(config,pindex)}}
else{if(pindex>config.lastvisiblepanel&&direction=="forward"){pindex=(config.currentpanel<config.lastvisiblepanel)?config.lastvisiblepanel:0}
else if(pindex<0&&direction=="back"){pindex=(config.currentpanel>0)?0:config.lastvisiblepanel}}
var endpoint=config.paneloffsets[pindex]+(pindex==0?0:config.beltoffset)
if(pindex==0&&direction=='forward'||config.currentpanel==0&&direction=='back'&&config.panelbehavior.wraparound==true){config.$belt.animate({left:-config.paneloffsets[config.currentpanel]-(direction=='forward'?100:-30)+'px'},'normal',function(){config.$belt.animate({left:-endpoint+'px'},config.panelbehavior.speed,function(){config.onslideaction(this)})})}
else
config.$belt.animate({left:-endpoint+'px'},config.panelbehavior.speed,function(){config.onslideaction(this)})
config.currentpanel=pindex
this.statusreport(galleryid)},autorotate:function(galleryid){var config=stepcarousel.configholder[galleryid]
if(config.$gallery.attr('_ismouseover')!="yes"){this.stepBy(galleryid,config.autostep.moveby)}
config.steptimer=setTimeout(function(){stepcarousel.autorotate(galleryid)},config.autostep.pause)},statusreport:function(galleryid){var config=stepcarousel.configholder[galleryid]
var startpoint=config.currentpanel
var visiblewidth=0
for(var endpoint=startpoint;endpoint<config.paneloffsets.length;endpoint++){visiblewidth+=config.panelwidths[endpoint]
if(visiblewidth>config.gallerywidth){break}}
startpoint+=1
endpoint=(endpoint+1==startpoint)?startpoint:endpoint
var valuearray=[startpoint,endpoint,config.panelwidths.length]
for(var i=0;i<config.statusvars.length;i++){window[config.statusvars[i]]=valuearray[i]
config.$statusobjs[i].text(valuearray[i]+" ")}},setup:function(config){document.write('<style type="text/css">\n#'+config.galleryid+'{overflow: hidden;}\n</style>')
jQuery(document).ready(function($){config.$gallery=$('#'+config.galleryid)
config.gallerywidth=config.$gallery.width()
config.offsets={left:stepcarousel.getoffset(config.$gallery.get(0),"offsetLeft"),top:stepcarousel.getoffset(config.$gallery.get(0),"offsetTop")}
config.$belt=config.$gallery.find('.'+config.beltclass)
config.$panels=config.$gallery.find('.'+config.panelclass)
config.panelbehavior.wraparound=(config.autostep&&config.autostep.enable)?true:config.panelbehavior.wraparound
config.onpanelclick=(typeof config.onpanelclick=="undefined")?function(target){}:config.onpanelclick
config.onslideaction=(typeof config.onslide=="undefined")?function(){}:function(beltobj){$(beltobj).stop();config.onslide()}
config.oninit=(typeof config.oninit=="undefined")?function(){}:config.oninit
config.beltoffset=stepcarousel.getCSSValue(config.$belt.css('marginLeft'))
config.statusvars=config.statusvars||[]
config.$statusobjs=[$('#'+config.statusvars[0]),$('#'+config.statusvars[1]),$('#'+config.statusvars[2])]
config.currentpanel=0
stepcarousel.configholder[config.galleryid]=config
if(config.contenttype[0]=="ajax"&&typeof config.contenttype[1]!="undefined")
stepcarousel.getremotepanels($,config)
else
stepcarousel.alignpanels($,config)})
jQuery(window).bind('unload',function(){if(config.panelbehavior.persist){stepcarousel.setCookie(window[config.galleryid+"persist"],config.currentpanel)}
jQuery.each(config,function(ai,oi){oi=null})
config=null})}}
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
stepcarousel.setup({
galleryid: "gallery",
beltclass: "belt",
panelclass: "panel",
autostep: {enable:true, moveby:1, pause:5000},
panelbehavior: {speed:800, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 2, leftnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLhlzbjvMbpXLIDACdZbUU5-ykWUWNIByzyptUSMSuQBkGeuU509AyonOe1iHR72tiHno2ZE4Kac-okBLCsNvyKTJRWlLm4HF48tgU1lqnRUnJPnuZjy5iANuqxBCt3tfmmb2NXtDchi9A/s1600/prev.png", -40, 25], rightnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGYEMB89p5leyJtMOCJENi5wiJ7bk6kUdH0eJYftO0yb2jkpauF_cvQFpqd3bf8Nw-dSzHpiMl83IOoDZ8mz4chhrGLJ77_MYfuJjG2V4OAGze2VOLxIpq7AQZ56UCs1I5ZW19cOjORsw9/s1600/next.png", -10, 25]},
contenttype: ["external"]
})
//]]>
</script>
Now that we added the scripts to make our gallery work, let's add the HTML of the Popular Posts widget above the Blogger posts.

6. Search this line:
<b:section class='main' id='main' name='Main' showaddelement='yes'>
Note: If you can't find it, search this one:
<b:section class='main' id='main' name='Main' showaddelement='no'>
7. Just below it, add the following code:
<b:widget id='PopularPosts281' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div style='margin:20px 0;'>
  <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/AVvXsEgpxlrQfx1tKN3cNc7kx0Jnn4gyP-5dHRGjcmp1UAZz1jI_HgXkmZVHbRji-cZsxhBnkGV1QEC0P5_sUFGboQS8cAwa5qW0rb16g-xBjjC5OQzZB66k_LuZ2PbMJyGZGWGKgQPRVEOMxPIP/s1600/no-image.PNG'/>
        </b:if>
       </a>
      </b:if>
     </li>
    </b:loop>
   </ul>
  </div></div></b:if>
 </b:includable>
</b:widget>
Note: Delete the lines in blue if you want this widget to be displayed in posts pages, as well.

8. Preview your template and if everything is OK, press the 'Save Template'.  Now you're done adding the Popular Posts Gallery! Just view your blog and see it live above the Blogger posts.

24 comments:

  1. yeah...nice post...but it is not showing in posts.. means it is only working on homepage....
    Pakistan's Best Site

    ReplyDelete
  2. what the heck is this... after installing this widget.. i remove it..and before instaling i already save html tempelate of my blog... but this popular post widget showing yet but now at the bottom of my blog and in vertical direct...shit.....and after reinstalling my old tempellate this widget still showing in vertical direction of my bottom of blog...give the solution...

    ReplyDelete
    Replies
    1. Well, sorry. This widget is not compatible with all blogger templates. I see you have solved your problem.

      Delete
    2. plzz.. tell me how you solve it?????

      Delete
  3. i have a question why some of my post in slidebar there is no image ? can u please help me to solve it. Thanks

    ReplyDelete
  4. That's because you haven't added any images to your posts. To change the default image, search for this address in your template (Design-Edit HTML):http://2.bp.blogspot.com/-mRxY2oEkLJc/T393wpt0z_I/AAAAAAAABrI/4blMjDaSOUY/s1600/no-image.PNG
    and replace it with your own. Or add your own pictures to your posts. Good luck

    ReplyDelete
  5. working thanks a ton http://lolsplanet.blogspot.com/

    ReplyDelete
  6. Working great on my both blog

    http://lolsplanet.blogspot.com/

    http://nannu4u.blogspot.in/

    Thanks

    ReplyDelete
  7. It's showing up vertically? I mean the arrows are properly positioned, bu the image snippets are vertical. Help?

    ReplyDelete
  8. Thanks for such an informative article and the extensive explanation, it's been very useful for me as well as others also...

    ReplyDelete
  9. hey its a good one.. but plz lemme know how can i have background of the widget as black?

    ReplyDelete
  10. Is there a way to use this widget, but select which specific posts appear?

    ReplyDelete
  11. If anybody wants to see what it looks like before they apply it, take a look at my blog. I didn't change any of the code:

    http://benendsbasement.blogspot.co.uk/

    Thanks helplogger!

    ReplyDelete
  12. its great but i noticed some images not loading. does it take a while to update?

    ReplyDelete
  13. hey can i maximaize the image?

    ReplyDelete
  14. after installing this widget.. . but this popular post widget showing yet but now this widget still showing .
    plz solve it..

    ReplyDelete
  15. admin, i faces the same problem here.
    i already added image in my post but only 1 image/post appear out of 10.
    already follow the instruction u gave, but i dont know how to replace n put all the popular post image? please help me?

    my blog - http://stk-deus.blogspot.com/

    ReplyDelete
  16. hi there, i have a question about gallery images, i've set up on the "photo" and "illustration" pages of my blog the gallery style posts, however, i would like to create a "blog" style posting system (the normal blogger posts) on the "blog" page, how to i code the html to make it an exception on the blog page? thanks!

    thenaptree.blogspot.com

    ReplyDelete
  17. its great but cant we change the width?? its not enough in mine..when i move it to anothr place in layouts it doesnt work, thats why

    ReplyDelete