How To Add Popular Posts Gallery Above Blogger Posts

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 posts on your blog.


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 take a backup before making any changes in your Blogger template.

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

Step 2. Type or paste the below code inside the serach box.
]]></b:skin>

Step 3. Just above/before it, add 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/AVvXsEiKap5aaldGWaqnB1TWNXio7XHegPXGbRFzsF_o0XtY0WUgaWWkC5xkTHEO-mOPSgEP8Gewmhe4sBoPOSNXmkh3VM-XtWT6PpRQT12krntmURjIVAH8dzZR2c0exU4CokBFdKGS5u6ijtSA/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}

Step 4. Now, search the following tag: 
</head>
Step 5. Just above/before it, add the script for the popular posts. 
 <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/AVvXsEiibbu44eqGULAk517233_bp1v4zLg11aL52FIfAd4fBT3bkBEtRtfx9bL1FejZgchvTGD7MGcdFXdSiCHZiDLnKsthadihYNLuyCsgrIlinVrTXQaaIb_Z243eJN7D0DmdnrjzkeiijlzT/s1600/prev.png", -40, 25], rightnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi5mwveeHTEJFAHcuVa5NRK-ltJiskGJNnhFFnmBy9Y3HkaX4JLo_-djOtSofOX3O9syehQf7pcnrJz29SMSIPEZHMvdQ4edP-5RntSddQYoxjxwJdM5PvWqbX-1oJaFJGWSOvHaHwfc0a/s1600/next.png", -10, 25]},
contenttype: ["external"]
})
//]]>
</script> 
Step 6. Now, Search below Code.
<b:section class='main' id='main' name='Main' showaddelement='yes'>
Note : If you can't find it, then search below code :
<b:section class='main' id='main' name='Main' showaddelement='no'>
Step 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 == "false"'>
       <b:if cond='data:showSnippets == "false"'>
        <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/AVvXsEhblJj6owC78BeEGgBFPmikwLiNXOlwq6rv7Fez4y98SGshMNfm5AmDjAL7LzZldpMPnnCSeOsJOtj7eSp-G4nMB8xdEIWQshTNEpSd1zu-YF7W-F9Be2SSUQZxjvUA06OGTAmOOs_1JDbI/s1600/no-image.PNG'/>
        </b:if>
       </a>
      </b:if>
     </li>
    </b:loop>
   </ul>
  </div></div></b:if>
 </b:includable>
</b:widget>
Step 8. Preview your template and if everything is OK,  press the 'Save Button'. Now You are done adding the Popular Posts Gallery, Just view your blog and see it live above your Blogger Post.
Tim Editor

Aku tinggalkan sesuatu untuk kalian. Bila kalian berpegang teguh dengannya maka kalian tidak akan tersesat selamanya, yaitu Kitabullah dan Sunnahku.” (HR. Imam Malik, Al-Hakim dan dihasankan oleh Al-Albani dalam Al-Misykah no: 186)

download the most complete premium wordpress theme plugins, we provide original products from vendors, support updates forever, free installation


Enter Code [img] link images [/img] To Comment Using Image

Post a Comment (0)
Previous Post Next Post