Add jQuery Popular Posts Slideshow Widget to Blogger

According to me this is one of the best widget as I have tried it and was totally satisfied with the same. Let me tell you why. Do you want your visitors and readers to know about your recent posts instead of your old posts? Then what are you waiting and looking for? This is the widget which I would suggest you to use. As a popular posts widget is a widget which shows off yours blogs most popular and recent posts whether it may be post of the week, month or of all times. You can also add images to them to make it more attractive. You might have also seen so many sliders and carousels that works on the recent posts, that can be done manually as well as by setting it for automatic.
In this tutorial i will share with you the slider/image gallery that works on the popular posts. This widget shows your 10 popular posts images in the slider. To apply this trick you just have to add little snippets of CSS and jQuery code and you are done. Let’s watch yourself in image below.

 How to install this widget to blogger?
1) As usual go to blogger–>Template—>Edit HTML
2) Search for
in your blogs HTML
3) Copy and paste below code just above it.

Bookmark This Script:
<style type="text/css"> #gallery{position:relative;margin:0 35px 20px;width:500px;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/AVvXsEiW01RckVww8m08bpKcssc5jrIv_1efm3d6UUzdnpDYtVgw6DQLzG_5FDUNlILXiYpERFe4wo0ESStlcWP5MAp0ef6qfS94A3cR4VPwUZ5iHbY0yZR1McikxmWD59tMWkMCSyvsJSONRS4/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} </style> <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/> <script src='https://sites.google.com/site/gehadhussien/popular-posts.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ stepcarousel.setup({ galleryid: "gallery", beltclass: "belt", panelclass: "panel", autostep: {enable:true, moveby:1, pause:3000}, panelbehavior: {speed:500, wraparound:true, persist:true}, defaultbuttons: {enable: true, moveby: 2, leftnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvTt75ZyP1ApiWrB8FSlJNA8cdJXymk8O-5KM6LBL5F6ri8yAhvZ0AG9ZNqUKwAVCJgNgDtVwF79ZnGFtlmNqrhwcydywux1JEuQ4I0b3PK1vHVY3tGMHBhjryKLrfh2B2XdhzLKivRdk/s1600/prev.png", -40, 36], rightnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEYbhSp16AD4oUjuHQgb7eLh1eqeiRHbGkq4nUW_7Y4n55oJjl1t4TlnXBXtiQhM8fDkksJFs79hcziiNk49o_DLrciD1-S5VuRrz332qXnD4sU1GurWse_doO17NfnCWPuRsDz2Mo4aw/s1600/next.png", 2, 36]}, contenttype: ["external"] }) //]]> </script>

Note:- Javascript file and images are not hosted by me so please download and upload it in your server or download and take it safe in your pc as a backup.

4) Next search for code below

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

5) Copy and paste below code just after/below it.

Bookmark This Script:
<b:widget id='PopularPosts7' 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/AVvXsEhHApUhob4EXuK-xIfTpFAjULKNCo0weag6Xmswd8in3N6QXkyRmdrIZJKv04f99rEHpvS3T5MUyproUroHPxMWXIfpDSQvqRgk8W6hQG9pOJ29pZakCBbhR9jKOZwug_oxjv8EhbWd4rI/s1600/defaultimage.jpg'/> </b:if> </a> </b:if> </li> </b:loop> </ul> </div></div></b:if> </b:includable> </b:widget>

if your blog have already jquery plugin then remove above red colored line and click on preview button, Once you are satisfied with how your widget looks and behaves in the preview window you just need to save your template. and you have done !

---

If you have any queries or questions then feel free to post them below.I hope you will like this little Customization also while sharing this Article with your readers don’t forgot to attach a link to this article.