Learn How To Become a blogger ,Free Templates,Blogger Widgets, Blogger Gadgets,Blogger Tricks And Tips ,Download browsers,software,Net

Sunday, August 12, 2012

Add Popular Post Slideshow Gallery In Blogger

You might have seen so many sliders or crousels that works on the recent posts or you have to add images in it manually. In this tutorial i will give you the slider/image gallery that works on the popular posts.

 This widget shows your 10 popular posts images in form of slider.
How To Install
  1. Next, click on the 'template' tab
  2. Backup your Template before making any changes to your blog
  3. Now Expand Widget Templates
  4.  click on the "Edit HTML".
  5. Now find this code
 </head>
<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(http://3.bp.blogspot.com/--vnNKoYAWRU/UBLHqbo0LlI/AAAAAAAABFM/9C7kVOw9Py4/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: ["http://4.bp.blogspot.com/-CHulc2Jhqr8/UBLHrnn75uI/AAAAAAAABFc/q2N7t1YZwUU/s1600/prev.png", -40, 36], rightnav: ["http://3.bp.blogspot.com/-Ig54ZobU_W0/UBLHq4bQSvI/AAAAAAAABFU/g2kaq0fh4DA/s1600/next.png", 2, 36]},
contenttype: ["external"]
})
//]]>
</script> 

Now Find the code shown below using [ctrl+F]
 <b:section class='main' id='main' showaddelement='no'>
  • Now Paste the Code Shown Below just below/after 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 == &quot;false&quot;'>
       <b:if cond='data:showSnippets == &quot;false&quot;'>
        <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='http://4.bp.blogspot.com/-A6NQTW-MBZY/T37HVOov53I/AAAAAAAAAys/XLjZX6HrE50/s1600/defaultimage.jpg'/>
        </b:if>
       </a>
      </b:if>
     </li>
    </b:loop>
   </ul>
  </div></div></b:if>
 </b:includable>
</b:widget>

  • Now save your template
Enjoy

0 comments:

Post a Comment

Please do not spam Spam comments will be deleted immediately upon our review.

Regards,
JeHad Hussein

Note: Only a member of this blog may post a comment.

Subscribe via email for free

Activate your subscription by clicking on the link in an email from Feedburner. We respect your privacy.

Most Popular

 

random topics

Followers

Are you looking for?

Become a Fan On Facebook!

Follow @Bloggertofree