How To Add Popular Post Widget Like Wordpress in Blogger

	Share
Tweet

Multi-colored Popular Post widget on wordpress was very charming and colorful. Now blogger users also can use this widget. We also use this widget in this blog. You also definitely will love it. 

Note: Before making any changes to your template, take a full backup of your blogger template.

#Step:

1. Go to Dashboard ->> Layout ->> Add a gadget ->> POPULAR POST




2. Save. Now, go to Template ->> Edit HTML

3. Click Expand Widget Template. Search this code (Ctrl + F), 

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

4. Just under the code, paste this code below:

<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"/>
<Variable name="PopularPosts.background.color6" description="background color6" type="color" default="#ff0" value="#7ee3c7"/>
<Variable name="PopularPosts.background.color7" description="background color7" type="color" default="#ff0" value="#f6993d"/>

5. Then, search this code (Ctrl + F), ]]></b:skin>. Paste the code below before it.

#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   li   li   li   li  li{background:$(PopularPosts.background.color6);width:65%}
#PopularPosts1 ul li:first-child   li   li   li   li   li:after{content:"6"}
#PopularPosts1 ul li:first-child   li   li   li   li   li  li{background:$(PopularPosts.background.color7);width:60%}
#PopularPosts1 ul li:first-child   li   li   li   li   li   li:after{content:"7"}
#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,
#PopularPosts1 ul li:first-child   li   li   li   li   li:after,
#PopularPosts1 ul li:first-child   li   li   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}
#PopularPosts1 img{-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;transition:all 0.5s ease;padding:4px;background: #eee;background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);box-shadow: 0 0 3px rgba(0,0,0,.7);}
#PopularPosts1 img:hover{-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);}
.JayRyan-moresubs {
background: none repeat scroll 0 0 #EBEBEB;
border-style: solid;
border-width: 1px;
border-color: #fff #ccc #ccc;
padding: 3px 8px 3px 3px;
text-align: right;
font-size: 7px;
letter-spacing: 1px;
}
.JayRyan-moresubs a {
display: inline-block;
font-weight: bold;
color: #1E598E;
text-decoration: none;
text-shadow: 1px 1px 1px #fff;
}

6. Then, highlight this code. From <b:widget id='PopularPosts1' to </b:widget>

<b:widget id='PopularPosts1'

-----------

</b:includable>
</b:widget>

7. Replace the higjligted code with this code:

<b:widget id='PopularPosts1' locked='false' title='Top 3 Of The Week' 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 == &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/>
<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 == &quot;false&quot;'>
<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/AVvXsEjrPLsJsea3y_TMSPLYv6lCu4ql1UE7aMy_pjyZt0U43mwEMBnd5rDwwFMANCBAzv_haskbEHeoz7_Od6VG-Q1hv-C9a8T2Y5Kw9x0zLNSI5rd5ghH-E2UifniHlTjQZxJx1k0vj5cMBts/s1600/Default..Logo.png'/>
</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/AVvXsEjrPLsJsea3y_TMSPLYv6lCu4ql1UE7aMy_pjyZt0U43mwEMBnd5rDwwFMANCBAzv_haskbEHeoz7_Od6VG-Q1hv-C9a8T2Y5Kw9x0zLNSI5rd5ghH-E2UifniHlTjQZxJx1k0vj5cMBts/s1600/Default..Logo.png'/>
</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>
<div class='JayRyan-moresubs'>
<a href=' '> </a>
</div>
</b:includable>
</b:widget>

8. Save it. Done!

Refresh your blog to see the result.

• You can show up to 7 most popular entries.
• You can change the background color of the popular posts widget, going to Design >> Template Designer >> Advanced >> PopularPostsBackground and select any color you want.

Share it to recommend it!