Subscribe to our mailing list to get the updates to your email inbox...
Popular Post widget has been published by Blogger long time ago . A helpful widget that show the most viewed posts in blog . In this post ,I will show you how to style this widget ,add colors to this one to make it look nice and exciting :D
This post contain Blogger API code ,CSS and a little of Javascript ,so it will be easier if you are familiar to them . Please read my posts on Blogger API to understand Blogger API and it structure , the 'section' and 'widget' code . If you are not sure on what is going on ,pls do backup template ,it will be helpful in case of any error .
Demo here
How to do it
1,Go to Dashboard ->Template - > Edit HTML
2,Add the CSS code right before ]]></b:skin>
.mostpopular {
list-style: none outside none;
margin: 0.3em 0 !important;
padding: 0;
}
.mostpopular_li {
background-image: none !important;
border: 0 none;
list-style: none outside none !important;
margin: 0 0 -7px !important;
padding: 13px 0 8px 8px !important;
position: relative;
width: 100%;
}
.mostpopular_li.color0 {
background-color: #EE5826 !important;
width: 100%;
}
.mostpopular_li.color1 {
background-color: #27B6E2 !important;
width: 93%;
}
.mostpopular_li.color2 {
background-color: #C5E627 !important;
width: 89%;
}
.mostpopular_li.color3 {
background-color: #FF6F51 !important;
width: 84%;
}
.mostpopular_li.color4 {
background-color: #D59B8E !important;
width: 80%;
}
.mostpopular_li.color5,
.mostpopular_li.color6, .mostpopular_li.color7, .mostpopular_li.color8,
.mostpopular_li.color9, .mostpopular_li.color10,
.mostpopular_li.color11, .mostpopular_li.color12,
.mostpopular_li.color13, .mostpopular_li.color14,
.mostpopular_li.color15 {
background-color: #888888 !important;
width: 74%;
}
a.barlinko {
background: none repeat scroll 0 0 transparent;
display: block;
font: italic 13px georgia,serif;
margin: 0 6px 0 0;
padding: 0;
text-decoration: none !important;
}
a.barlinko:hover {
color: #FFFFFF;
}
.barco {
display: block;
right: 0;
}
.mostpopular_li img {
margin-top: 15px;
position: absolute;
right: 5px;
}
a.thethingwithc {
border: 0 none !important;
color: #FFFFFF !important;
display: block;
font-family: arial;
font-size: 11px;
font-weight: bold;
padding: 0 9px 0 0;
text-align: right;
text-decoration: none !important;
}
3,In template ,choose the position where you want to insert this widget ,and then add the code
<b:section id='sidebar' showaddelement='yes'>
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<div id='sidebartitlewrapper'>
<b:if cond='data:title'><h3><span><data:title/></span></h3></b:if>
</div>
<div class='sectioncont'>
<ul class='mostpopular'>
<script type='text/javascript'>
//<![CDATA[
var i=0;
//]]>
</script>
<b:loop values='data:posts' var='post'>
<script type='text/javascript'>
//<![CDATA[
document.write ('<li class="mostpopular_li color'+i+'">');
var i= i +1;
//]]>
</script>
<a class='barlinko' expr:href='data:post.href'><data:post.title/><data:post.id/></a>
<span style='display: inline-block;width:100%;'>
<span style='float: left;font-size:10px;color:#f5f5f5;'> </span>
<span class='cb'/>
</span>
<script type='text/javascript'>
//<![CDATA[
document.write ('</li>');
//]]>
</script>
</b:loop>
</ul>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<div id='sidebartitlewrapper'>
<b:if cond='data:title'><h3><span><data:title/></span></h3></b:if>
</div>
<div class='sectioncont'>
<ul class='mostpopular'>
<script type='text/javascript'>
//<![CDATA[
var i=0;
//]]>
</script>
<b:loop values='data:posts' var='post'>
<script type='text/javascript'>
//<![CDATA[
document.write ('<li class="mostpopular_li color'+i+'">');
var i= i +1;
//]]>
</script>
<a class='barlinko' expr:href='data:post.href'><data:post.title/><data:post.id/></a>
<span style='display: inline-block;width:100%;'>
<span style='float: left;font-size:10px;color:#f5f5f5;'> </span>
<span class='cb'/>
</span>
<script type='text/javascript'>
//<![CDATA[
document.write ('</li>');
//]]>
</script>
</b:loop>
</ul>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
Insert this code into sidebar as other script . Do not insert in other section element .For the question what 'section' is ,pls read this post
Save changes and go back to Dashboard .
4, Click on View blog to see the result . We need some work here
Click on the wrench icon in the right corner of widget
I marked it with a circle .
A dialog will display . Change the setting as picture bellow
Save settings .
That's all for this widget . Hope it works ^^
Nice Work Man
ReplyDeleteBravo friends
ReplyDeletehey awesm post bro.. :)
ReplyDeletebut please help me out i want to add related post like option like you and i know too you must had posted it in your blog but m not getting it i've searched more than 10 times please let me know that link or tell me how to add related post help me out please :D
waiting 4 ur reply
looks great. i love this blog
ReplyDeleteFirst I'd like to congratulate you for this awesome job.
ReplyDeleteI can't make it work. I'm stuck at step 3. When I attempt to save the template an error shows up saying that the ID "sidebar" is already taken.
Please help me. I tried to read the "sections" articles but I still don't understand.
Regards!
two thumbs up, promise to share in my blog with indonesian language
ReplyDeleteGreat,,,, Like Wordpress Popular Posts Widget...
ReplyDeletenice tut,your best of the best...
ReplyDeleteI like the way you code, it's so simple but always effective.
ReplyDeleteI also write many unique post on Blogger Items in English, but have no many readers as my target. Can you share some your tips to have a large number of fans for SimplexDesign?
Thank so much.
@se7en : Sorry for this inconvenience . My blog has changed domain ,so blogger search can't index the older posts . Here are two link you can refer for related post :
ReplyDeletehttp://www.thesimplexdesign.com/2009/09/easiest-way-to-create-related-posts-for.html
or
http://www.thesimplexdesign.com/2010/03/make-thumbnail-for-related-posts.html
@Cartero : Name of section must be unique ,if the name 'sidebar' has been taken ,you can try sidebar1 ,sidebar2 ...etc
@Tien Nguyen : One thing I learned from blogging, number of visitors can't increased extremely in one night . If your posts are great, you followed all instruction for SEO ,and you try all way to SEO-off page (Comment in other blogs ,post in forums ...) ,but the number of visitor is still low ,pls wait. It took me 3 years to increase the number of subscriber from zero to 4000+ . Believe it or not ,the pageview for my blog in oneday is only 2000+ ,not a big number ,and income from my blog is less than 80$/month .
I'm a lazy blogger,because I have a full-time work, so if you have more free time and passion ,you would get the better result (do more in SEO,blog posting ...)
Btw,you can try blackhat methods :D you will be in fast track in short time . But I do not guarantee for the final result .
Building a blog is not only for fast money (Adsense or other ad network) ,but also building a brandname in blogger sphere ,a real business,in my opinion ^^ I think it will be helpful in someway (not money at this time ^^).Keep blogging and sharing :d follow the passion and you will find the result ^^
An error on my blogging in last year is also from rushing black hat SEO. And I will never try again, never!
ReplyDeleteThank you very much, nhamngahanh. Your advises make my head become smart. I will do more and just patient.
@nhamngahanh thnq man :)
ReplyDeleteThanks for this wonderful post nhamngahanh!
ReplyDeletekind of MISS YOUR STUFFS :)
Best Regards!
Nice post Thanks for sharing this information which is useful for all.
ReplyDeletephp web development
Your post about widget, blogging tips and template always amazing Mr. @nhamngahanh
ReplyDeleteThis my first comment but not the first visit simplexdesign
Thanks for this tutorial. Really Nice Widget
ReplyDelete:-)
i need it. good widget for blogger :-)
ReplyDeleteNICE ONE...U R THE BEST BLOGGER...;-)
ReplyDeletenice, before this only see at WP,
ReplyDeletenow blogspot also can :)
thx you
one more great blogger hack, thanks for share this
ReplyDeleteGood work, bad tutorial
ReplyDeletehaha,thanks for your comment :D I'm trying to improve my writing skill :D it really hard to explain what to do in a tutorial for all readers ,and sometimes I am confuse when reading my posts :D It would be better if you can help :D
Deletehi, great widget. but if u can add comments count, it will be more great. Anyway thanks for this widget. luv it
ReplyDeleteI am having a hard time understanding step 3. need help
ReplyDeleteI added the code given in step1 just before the script(]]>).
ReplyDeleteThen I added the script given in step3 into one of sidebar position where I want it.. but oops it didn't work.. just little red color appears and no other thing is there:(