[Update] Add Popular Post Gallery Slider in Blogger

Blogger widget

Blogger give to freedom to edit your blog as you want  you may have visited a blog and you see gallery post slider .popular post  gallery slider is very charming and useful it increase beauty of your blog.Also easy for user to use.default gadget of popular post is available by blogger you can install it.To  install default gadget given by blogger go to layout and then choose popular post and save it.

This widget of popular post is stylish.In this widget slider move post from left to right and right to left.some people like simple widget put gallery slider in good for video  blog.It look more impressive and eye catching but this is quite difficult to add in blogger because you have to change some codes in setting so if you want to made a gallery of popular post you need a little effort.I try my best to describe step by step.

how to make popular post gallery slider

step1: Go to blogger and login  then go to template

edit it. but before edit get back up of your

template because gallery slider may not

consistent with your template.

step2: click any where in code area and press ctrl+f 

and search code given below 

]]></b:skin>

step3 click on arrow beside ]]></b:skin> and you 
find it ]]></b:skin> again.

step4: paste the given code  above ]]></b:skin>

#gallery{position:relative;margin:0 35px 20px;width:590px;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/AVvXsEgH8cxsq-XJzS_lHz2dKQdIn0_M22ocJmx6ZivtodV5Wu9ymJrXEftn0rHhOr7kEglXHUMDijGYRXVJeIP4kFB8mxdEJoGw8nEQHcgWAfKh6v2CyGml7Bu-JOBIn_PNA01p4qHRvHXb6fD3/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}


step5: now search for this

</head>

step6: just above it past given code

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/><script src='http://helplogger.googlecode.com/svn/trunk/auto-slider.js' type='text/javascript'/><script type='text/javascript'>//<![CDATA[ stepcarousel.setup({ galleryid: "gallery", beltclass: "belt", panelclass: "panel", autostep: {enable:true, moveby:1, pause:6000}, panelbehavior: {speed:500, wraparound:true, persist:true}, defaultbuttons: {enable: true, moveby: 2, leftnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFBcIDRG1X-VrKPhU7Bz5CcAImlxuUucUldb5-tR97NTei9STeYV-cOkoUUZrOtxLtvHhi2vPMd4GoKq5UcGUKbNmZfMoactnR9_3vVVjylQP_82xLiZIgtgDqef97EVc9Zp-NC3675fgi/s1600/prev.png", -40, 36], rightnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif7rWCpBKbDogC4s9kpk-2IjNxnsv5eCInsp_BarsgIglGMUOe4_dbWim4IUvTO22u8RZ2SnVr3tHA0T430qpJsOC7ComX8shTT7LWdY5RNdkRoMnrsuy5ymK9d9QIBVxbcG7pbQ4lXxzh/s1600/next.png", 2, 36]}, contenttype: ["external"] }) //]]></script>

step7: search this code


<b:section class='main' id='main' showaddelement='yes'>

if you do not find search this

<b:section class='main' id='main' showaddelement='no'>

step8: just above it paste following code

<b:widget id='PopularPosts2' 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 == "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/AVvXsEg62xbWN6UBEbgh0nGdZrf6XC6-Txs4XfEttqSrCxl1FcoO10oBzBbpUpj2_hEtNQkyzUd61zLlp63_oxYq1v3rFC5mZoHr1DXl6nS1WEXb6DHc0-PHYRcI4SL4odha-W1JsqM6StM4M-Sp/s1600/no-image.PNG'/> </b:if> </a> </b:if> </li></b:loop> </ul></div></div></b:if> </b:includable></b:widget>


Save your template and view your
blog  to confirm.

Share this post