To run into it live, delight see the demo weblog below.
Adding Popular Posts Gallery Above Blogger Posts
Before adding the Popular posts widget every bit gallery inward Blogger, delight authorities annotation that this widget is non fully compatible amongst all templates, therefore it's recommended to brand a backup earlier making whatever changes inward your Blogger template.Now, follow these steps:
1. Go to Dashboard, click "Template" > hitting the "Edit HTML" clit as well as click anywhere within the code expanse > press the CTRL + F keys to opened upward the Blogger search box.
2. Type or glue this tag within the search box:
]]></b:skin>Note: you lot may convey to click the arrow side past times side to it, as well as therefore receive to notice ]]></b:skin> again.
3. Just above/before it, add together the next CSS:
#gallery{position:relative;margin:0 0 20px;height:126px;}Note: modify the value inward blood-red (126px) to suit the gallery height.
#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/AVvXsEiLv0WwHgALVSubc7TTOxgVqapnamC4VrBwvRwbwey5-PBQfNykRwAUVu4pSSpP4wEWtIbrwFqJVR7N_a6jd3bYYq3bXhI97bARocpvOskfkKTM9bn6sZOZtdp8gB1R7gzEs9ip5yAVK2Gl/s1600/bg-slider.png) bottom middle no-repeat;overflow:hidden}
#gallery .panel img{border:1px company #DDD;margin:7px 6px 6px;width:72px;height:72px;background:#FFF;padding:0px}
4. Now search the next tag:
</head>5. Just above/before it, add together the script for the Popular Posts gallery as well as jQuery:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/><script type='text/javascript'>Now that nosotros added the scripts to brand our gallery work, let's add together the HTML of the Popular Posts widget higher upward the Blogger posts.
//<![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))
supply document.cookie.match(re)[0].split("=")[1]
supply 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)}
supply 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 fault amongst your gear upward 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 fault amongst your gear upward 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/AVvXsEizMc99gM1Gcd4_t7PxeizfUfLxx4Ph1Su_pbITH5vQEnH5vqcSoGnfXAkT0ZRJTdODVvn4ReJuHwHtR_LuF0AvWZSbdfkHLb4-fSvwiT9nBJ_Tvq1NYt9WFUbS3Uj67kDEhc2gD4H2MFzo/s1600/prev.png", -40, 25], rightnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxiwftx8LH2GTqTHHU1wyMzIsLIKJG3him3tIWbo6eY7nb3rHRRztB0pf5XlZKB_5WO5CiDsUSDzW7C5omPlugGDgP4C0l1BiUmCWqs6h5FVydF7no_2mcGhp7q9GcsfT8OHdUNNbDNQCT/s1600/next.png", -10, 25]},
contenttype: ["external"]
})
//]]>
</script>
6. Search this line:
<b:section class='main' id='main' name='Main' showaddelement='yes'>Note: If you lot can't notice it, search this one:
<b:section class='main' id='main' name='Main' showaddelement='no'>7. Just below it, add together the next code:
<b:widget id='PopularPosts281' locked='false' title='Popular Posts' type='PopularPosts'>Note: Delete the lines inward blueish if you lot desire this widget to live displayed inward posts pages, every bit well.
<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/AVvXsEiqcumudo8UVCW9MF3NZlpyfIQ76mAiHNkjLEQlNVE3mYamRz6BJYSOP6LOnP9wMwBqsienatjD4cEi6HtF_1OpFo9cvDEpoxqDHnF5j5RuFvWp5TG5u01APi4Nop1D-yMsW7gTuoK8BxMD/s1600/no-image.PNG'/>
</b:if>
</a>
</b:if>
</li>
</b:loop>
</ul>
</div></div></b:if>
</b:includable>
</b:widget>
8. Preview your template as well as if everything is OK, press the 'Save Template'. Now you're done adding the Popular Posts Gallery! Just sentiment your weblog as well as run into it alive higher upward the Blogger posts.
Comments