Popular posts widget is a best widget to show off your blog’s popular
posts of week,month or all time as you choose. You might have seen so
many sliders or carousels that works on the recent posts
or you have to add images in it manually. 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?
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.
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.
- as usual go to blogger–>Template—>Edit HTML
- Tick on Expand widget templates check box.
- Search for </head> in your blogs HTML
- Copy and paste below code just above it.
<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/AVvXsEit7jN9GcqQ70Fm44N9uiASviXZ_f4-nrouKZz_Eq5u3OLmn95pyA6NwZkg6mlod1-mxo5eKlCqYIbLjSo9xz1F_6gajsJpJCVS5_J0DBMgDoSXHlV6LPNeV8L9dy7TnAFrgirHLP7Hg_c/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/AVvXsEhYUpZPMXwIWhFmxke1o1D2grpvovPjU4zGbmG8O_EnEvrbaspwRylLKz-MRKyUSagpTR47gAlHicygjPrefNH5ParnC6LGYvdyi_wOf0ZBK_uqimuEkIjhWQiAvrikhbB_VVddZ1ectSk/s1600/prev.png", -40, 36], rightnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjTMm_IttJo9C3S4EBFjXRZ_mupC1ooKsM4ePuHSJPTXuEQLbJLe3WwyBfZmsGWN-WKHm5VmCOqD4P_oamMjPq6dQEsrlP3T88rrAhBD_6JtqOqIQ0MRz-EVLUnzwGvn7qt0xnff8fz-4/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.
- Next search for code below,
<b:section class='main' id='main' showaddelement='no'>
- Copy and paste below code just after/below it.
<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/AVvXsEgtYh-CqjoKyNKItEMylR8j5Qs5QVC0KfTsnYW0OXBKzYmN9nHqp5-Fg8UPWU9spqDfx2Q8_rGY-uaLDY-A4NeZgMhtCe4zCA1C1ZE8uSFg54DH0GClVdjd2C-E2kOccRKPfbmgxMYXzYU/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.
This comment has been removed by the author.
ReplyDelete