Create a blog, blogging: popular posts

The most strong and popular web design trend over last couple of years is a sliding horizontal panels also known as Sliders or Carousels. It's a very effective method to increase the web site usability and engage the user. This widget shows the most popular 10 posts on your blog just above your Blogger posts. You can see the Demo on my blog.

Let's start adding it

Before adding it you should know that this widget is not fully compatible with all templates, so please make a backup before making any changes to your blogger template. Now, follow these steps:

1. If you are using the old Blogger interface:

Go to Dashboard - Design - Edit HTML - (make a backup) Expand Widget Template

If you are using the new Blogger interface:

Go to Dashboard - Template - Edit HTML - Proceed - (make a backup) Expand Widget Template

2. Search (CTRL + F) for this piece of code:

]]></b:skin>

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/AVvXsEhHTg2XTf69LT0-lSPPYhtGB3njwMWuSBAZ-qlnaAj6-RrVI0782wqEvrOzEueone3jm5TmYorBZOz5EVD8G6RW6vJ1DIsmh3cwcBJYO8FIoVXnNQv3YDK80LEP4hkVSMYODZbar4jFX1bY/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: you can adjust the size of gallery, changing the values in red (590 and 126).

4. Now search for the following piece of code:

</head>

5. Just above/before it, add this code:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://bloggingcreate.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/AVvXsEhhedAtN4koHgGN06JDCH1evFx3DoSPgK-cFLXdD1qHQqiQ77nb1o3G-WFVUNkJhwdER-DAYBkJei7ftdxKcmEzU9urUv8fPCSGcrPeBduD12ozX8ToU3h616z1SiHNMZJcjKelY3XTMnjw/s1600/prev.png", -40, 36], rightnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid6DvL-xv-MoyY6ew9D8yViLsZYmTm40xzgE2mcaEJj6u2QdvZLC8ncFN_4HfpyxhM_Cy6_du89uvowMB0aRaVK8TQCeD7h_n2AoCFMrLM4ylUQIgM0xUAhwNKzJnkwYL5a47dlAxwPLC5/s1600/next.png", 2, 36]},
contenttype: ["external"]
})
//]]>
</script>

Next thing to do is to place the widget just above the blogger posts.

6. Search for this code:

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

...or if you can'find it, search for this one:

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

7. Just 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 == "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/AVvXsEj2rq3iWxIAsXiqbnYW5IaD4czMWBTmB5sf0rJ0N3NE5z9-B-F94fa6ezZkjk4yZ2TWHQeKrsVzhVnZjLp-Y38LhJG6gP-8gFj-2hKYHwEiffC3lQIBeR5m4IkWRrIEvpWU5y3fTtZBz7-M/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 displayed in posts pages also.

8. Preview and if everything is ok, Save the Template.

Popular Posts Widget is a widget provided by Blogger, showing the most viewed posts on the blog in the last 7 days, last month or of all time. It also has three displaying modes: display title only, display title with image thumbnail or display title along with the posts snippets.

To customize the popular posts widget, we must add a new variable and some css codes to our blogger template.

How to add multi-colored popular posts to Blogger

Step 1. Login to your Blogger Dashboard, go to Design >> Edit HTML >> check "expand widget templates" (make a backup first) and search for the following tag:

/* Variable definitions
====================

Step 2. Copy and paste just below/after this tag, the next code:

<Group description="PopularPosts Backgrounds" selector="#PopularPosts1">
<Variable name="PopularPosts.background.color1" description="background color1" type="color" default="#fa4242" value="#ff4c54"/>
<Variable name="PopularPosts.background.color2" description="background color2" type="color" default="#ee6107" value="#ff764c"/>
<Variable name="PopularPosts.background.color3" description="background color3" type="color" default="#f0f" value="#ffde4c"/>
<Variable name="PopularPosts.background.color4" description="background color4" type="color" default="#ff0" value="#c7f25f"/>
<Variable name="PopularPosts.background.color5" description="background color5" type="color" default="#0ff" value="#33c9f7"/>
</Group>

Step 3: Search for the following piece of code:

]]></b:skin>

Step 4. Just above/before it, add this code:

#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:$(PopularPosts.background.color1);width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:$(PopularPosts.background.color2);width:85%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:$(PopularPosts.background.color3);width:80%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:$(PopularPosts.background.color4);width:75%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:$(PopularPosts.background.color5);width:70%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child:after,#PopularPosts1 ul li:first-child + li:after,#PopularPosts1 ul li:first-child + li + li:after,#PopularPosts1 ul li:first-child + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:40px;height:40px}
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}

Step 5. Now find the following code:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>

Step 6. Delete it until you reach at this tag (delete this also):

</b:widget>

Note: Be very careful when removing it. The entire fragment of code should look like this:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == "false"'>
          <b:if cond='data:showSnippets == "false"'>
            
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == "false"'>
            
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Step 7. After you have deleted the above code, paste this in its place:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
   <b:if cond='data:title'>
    <h2><data:title/></h2>
   </b:if>
   <div class='widget-content popular-posts'>
    <ul>
     <b:loop values='data:posts' var='post'>
      <li>
       <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/>
         <a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
        </b:if>
       <b:else/>
        <b:if cond='data:showSnippets == "false"'>
         <b:if cond='data:post.thumbnail'>
          <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
         <b:else/>
          <img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP0fsL9cadqBoqvfGhCumWq0IdNn-FUjdut8CgTZ5hCfopzkYeApcVabEkeaSWY3gnfMnSbiHVJeVbWyNFgECM-hEO1uTOEwZp6ClNxk7OTWO-UlTzRgtabiIXA5xuGqHzNBkkOFXIyJE/s1600/default.jpg'/>
         </b:if>
         <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
         <div class='clear'/>
        <b:else/>
         <b:if cond='data:post.thumbnail'>
          <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
         <b:else/>
          <img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP0fsL9cadqBoqvfGhCumWq0IdNn-FUjdut8CgTZ5hCfopzkYeApcVabEkeaSWY3gnfMnSbiHVJeVbWyNFgECM-hEO1uTOEwZp6ClNxk7OTWO-UlTzRgtabiIXA5xuGqHzNBkkOFXIyJE/s1600/default.jpg'/>
         </b:if>
         <a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
         <div class='clear'/>
        </b:if>
       </b:if>
      </li>
     </b:loop>
    </ul>
   </div>
</b:includable>
</b:widget>

Step 8. Save template.

Settings

- Go back to Design >> Page Elements and click on the edit link of Popular Posts widget.
Select to "display up to 5 posts", then Save the widget.

- You can easily change the background color of the popular posts widget, going to Design >> Template Designer >> Advanced >> PopularPostsBackground and there you can select any color you want.

If you are enjoying reading this blog, please like & subscribe for more tutorials.
For any questions or suggestions, leave a comment below.

Create a blog, blogging

Sunday, April 8, 2012

Add a Popular Posts Gallery just above your Blogger posts

Sunday, March 11, 2012

Add Multi-Colored Popular Posts to Blogger