Add a Popular Posts Gallery Just above your Blogger posts

The most solid and popular web design incline over last couple of years is a sliding horizontal type of Panels knows as Sliders. It is a very useful way to increase your website traffic and connect with the users. This widget appears the most poplar 10 posts on your site just over your Blogger posts.

How to Add

Note: Before adding, make a backup of your template because this widget is not fully useful for all templates.

Step # 1: Go to your dashboard > Template > Edit HTML > Press Ctrl + F and open search box

Step # 2: copy and paste the following code in the search box

 ]]></b:skin>  

Step # 3: Just Above/before it, add the following code.

#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/AVvXsEiFDuQa-T8pfW3OmB3HpCC4WmoxWVr2DiqHzmnxjXQq9IqkupF6728YIhgBhcwd-Nh2vgqlTgB8fVa-cYcq3VyOmwI2GpHjTUL1-vpOLJNG5DkgQi3vJi9EkVGHdRwgDGqZh8KeFPXDeCEW/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} 

Note: Now you can set the size of gallery, according to your need, change the values in red ( 590 and 126)

Step # 4:  Now search the following code

</head>

Step # 5: Just above/before it, add the following 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/AVvXsEh_6P9F-BIk1qcXjBCmmzrpn1Nz_c_RALqSCUuyub9RCZCn34fbW0w32E0Pqc-D-BctH_tvSLkRJoiKQEwQaOJI2DK5pD5v-cIuZS850LNYIlAiD_347CG_kAGBXzsNYINQXAmwEusMIKYS/s1600/prev.png", -40, 36], rightnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy7UM08_KTS3zYli2q5eOxscDtVOwccEb6KnzuiEMHw1LaW7XDAFmS5kr-bwfiJD_E66J8mC49OHPonXxHynqgMfeUMsPmlr6dzj_7zuu0zRWVM7ehVQF14_vrCBlH-lZNEWRpgLAdqu4F/s1600/next.png", 2, 36]},
contenttype: ["external"]
})
//]]>
</script>

Next step to do is to place the widget just above the blog post

Step # 6: Search the following code

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

or if cannot the find than find the following code

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

Step # 7: Now below it, add the 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 == &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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGBcBqB4SteWjOgJQX6xJFDwM3Q_QdUav4WbaCjH-FRTJmhQ0RTVtmx4ledIHqeH7LOVuCXncMs6DoCpBLsvj41VBmFINtfTjSBPePBFucYS9xTbm3gQcyjq2cIeAuu7jhynk-xWDihqpo/s1600/no-image.PNG'/>
        </b:if>
       </a>
      </b:if>
     </li>
    </b:loop>
   </ul>
  </div></div></b:if>
 </b:includable>
</b:widget>

Note:delete the fragments of code in blue if you want this widget to be show in post pages also

Step # 8: Save template

Done. i hope this post become useful for you.

Share on Google Plus

About Unknown

My Name is Usman Ali and i am SEO Consultant, Online Mentor who has been working since 2012. Blogging is my pession. I can help you in Make Money Online, Blogging, Teachnology, Tips and Tricks, How to and Specially SEO Related issues.