How To Add Popular Posts Gallery Above Blogger Posts - Hi guys!!! Ambo Nai, In the article that you are reading this time with the title How To Add Popular Posts Gallery Above Blogger Posts, we have prepared this article well for you to read and take the information in it. hopefully the content of the post Article Widget, what we write you can understand. all right, have a nice reading.

Title : How To Add Popular Posts Gallery Above Blogger Posts
link : How To Add Popular Posts Gallery Above Blogger Posts

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/AVvXsEiPvHeBL4hnlASpfxynReRC-N9HpOMI9o9YmnOmpoYaGtflDh75DzD41Ge7UJDedwUFq6Jy4JkPP7s1kYqYzUpwk6lsWmXAA8YfRzi0ksPT2p22DEXEWo9rSe_Y8CMhlrQFYsc451o-TDO2/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/AVvXsEinRCgb5F9mKAaWzhXXORVSkb-X9_X-ClTrjbKnHLCCO88ntKrwbNB3Ro8uXnqinOXq6ZWlJAOpewhOpEEWVy9pXIcqHTc948OeaYag_wc87r-EML9pKmu1GTLCZ94iEtEzuyBHrhMkm2sm/s1600/prev.png", -40, 25], rightnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3lVNJkVirtam3BxzsSstKTiYpcu3r9XsQV6mooEkYyyDI1vB2w7-s_ygW6My0iVXJQ9XfcjUi6b3DV7Vhhd_tPJLueoek2rqjsSABcfggb75Y66WxFlDTo8xco2tkq12TN03JDUFrmwwH/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, search this one :

<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/AVvXsEhMmM9ikj5pyegK_l0SJEDlC_5gj6fNeVvaHZLOXJxvYb-jfGAKGXPQLbWnbx3rsECOreBxUriEDG_9N1Fohy96D8WU4B_3Bir_dH0jSQQ4AuVUmPnOswIVBCMZromhYUlSsy_G9ige6biR/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.

Such is the article How To Add Popular Posts Gallery Above Blogger Posts

That's all the articles How To Add Popular Posts Gallery Above Blogger Posts this time, hopefully it can be of benefit to all of you. well, see you in another article post.

You are now reading the article How To Add Popular Posts Gallery Above Blogger Posts with the link address https://ambo-nai.blogspot.com/2021/02/how-to-add-popular-posts-gallery-above.html