Helplogger
Home
Blog DesignWidgets SEO Menus Po ...
4 Different Styles For the Popular Posts Widget
17 comments
Blogger allows us to easily add a "Popular Posts" widget, that we select from its list of gadgets, and we can do that by going to the "Layout" of our Blog.
This gadget, as the name implies, shows which are the most visited blog posts, and you can set it to display the info you want infour possible combinations: (1) only the title of the post, (2) a thumbnail of the image and the post title, (3) post title with a summary, and (4) post title with a thumbnail and a post snippet.
This is an element that you shouldn't miss in your blog because it encourages your visitors to navigate through your content and that can result in higher income if you're monetizing your blog because it would generate an increase in the number of pages visited, and in turn, can attract the users' interest to subscribe to the blog and to read interesting content.
Preliminary steps: Add the gadget, if you haven't done it yet.
1.Select the "Layout" tab and add the "Popular Posts" gadget in that part of your blog you want to appear, such as in your sidebar, by clicking on "Add a Gadget".
2.Configure the widget to show only the post titles. You can do this by clicking on the "image thumbnail" and "snippet" checkboxes, as shown in the following image.
3.After configuring the widget, save the changes by clicking on Save, and then Save arrangement.
How to add the CSS to create the style of the Popular Posts widget
1.Choose a style, then copy the CSS that appears below the image that shows the style.
2.Select the "Template" tab, then click onCustomize>Advanced>Add CSSand then paste the CSS style that you like the most.
3.Once you add the CSS, Save changes by clicking on the "Apply to Blog" button.
Note: Some Blogger templates might not allow adding CSS in that location. In that case, for adding the CSS style you need to access the Template's HTML - from your Blogger Dashboard, go to Template > Edit HTML and paste the code just above the ]]> tag (press the CTRL + F keys to find it - you might need to click on the arrow to expand the code and after that search it again)
And that's it! You've already customized the popular posts widget when it shows only post titles.
Styles
Here is the CSS of each style, just choose the one you like the best and put it on your blog. You can see each of these styles in action in the following demo blog:
http://demo-blog343.blogspot.com
Style 1:
#PopularPosts1 h2{
padding:7px 0 3px 0;
width:100%;
margin-bottom:10px;
font-size:1.3em;
text-indent:-12px;
font-size:18px;
text-align:center;
color:#757575;/* Color of the widget's title */
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:8px 0px 1px;
left:-7px;
width:290px;
}
#PopularPosts1 li{
position:relative;
margin:0 0 10px 0;
padding: 3px 2px 0 17px;
left:-5px;
width:285px;
}
#PopularPosts1 ul li{
background: #eee;
position: relative;
display: block;
padding: .4em .2em .4em 2em;
*padding: .2em;
margin: .5em 0;
background: #ddd;
text-decoration: none;
border-radius: .3em;
transition: all .3s ease-out;
}
#PopularPosts1 ul li:before{
content: counter(li);
counter-increment: li;
position: absolute;
top: 50%;
margin: -1.3em;
height: 2em;
width: 2em;
line-height: 2em;
font-size: 15px;
color:#fff;/* text color of numbers */
background:#FB8835;/* background color of numbers */
border: .2em solid#fff;/* border color */
-webkit-box-shadow: 0 8px 5px -7px #888;
-moz-box-shadow: 0 8px 5px -7px #888;
box-shadow: 0 8px 5px -7px #888;
text-align: center;
font-weight: bold;
border-radius: 2em;
position: absolute;
left: 0;
transition: all .3s ease-out;
}
#PopularPosts1 ul li:hover{
background: #eee;
}
#PopularPosts1 ul li:hover:before{
transform: rotate(360deg);
}
#PopularPosts1 ul li a{
font:14pxGeorgia, serif;/* font size of post titles */
text-shadow: 0 -1px 2px #fff;
color: #444;
display:block;
min-height:25px;
text-decoration:none;
text-transform: uppercase;
}
#PopularPosts1 ul li a:hover{
color: #444;
}
Style 2:
#PopularPosts1 h2{
position:relative;
padding:8px 10px 6px 10px;
width:100%;
margin-bottom: 5px;
font-size:17px;
color:#757575;/* Color of the widget's title */
text-align:left;
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:10px;
left:-8px;
width:100%;
}
#PopularPosts1 li{/* Styles of each element */
width:100%;
position:relative;
left:0;
margin:0 0 1px 12px;
padding:4px 5px;
}
#PopularPosts1 ul li:before{
content: counter(li);
counter-increment: li;
position: absolute;
left: -30px;
top: 50%;
margin-top: -13px;
background:#8E8E8E;/* background color of the numbers */
height: 1.9em;
width: 2em;
line-height: 2em;
text-align: center;
font-weight: bold;
color: #fff;
font-size: 14px;
}
#PopularPosts1 ul li:after{
position: absolute;
content: '';
left: -2px;
margin-top: -.7em;
top: 50%;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left:10px solid#8E8E8E;/* background color of the right arrow*/
}
#PopularPosts1 ul li a{
color: #444;
text-decoration: none;
font-size:15px;
}
#PopularPosts1 ul li {
position: relative;
display: block;
padding: .4em .4em .4em .8em;
*padding: .4em;
margin: .5em 0 .5em 0.4em;
background: #ddd;
transition: all .3s ease-out;
text-decoration:none;
transition: all .1s ease-in-out;
}
#PopularPosts1 ul li:hover{
background:#eee;/* Background color on mouseover */
}
#PopularPosts1 ul li a:hover{
color:#444;/* Link color on mouseover */
margin-left:3px;
}
Style 3:
#PopularPosts1 h2{
position:relative;
right:-2px;
padding:8px 63px 6px 17px;
width:100%;
margin:0;
font-size:16px;
background:#4F4F4F;/* Background color */
color:#f2f2f2;/* Color of the widget's title */
text-align:left;
text-indent:18px;
}
#PopularPosts1 h2:before{
position:absolute;
content:"";
top:36px;
right:0px;
width: 0px;
height: 0px;
border-bottom:12px outset transparent;
border-left:12px solid #000000;
}
#PopularPosts1 h2:after{
position:absolute;
content:"";
top:-6px;
left:-5px;
width: 0px;
height: 0px;
border-bottom:24px outset transparent;
border-top:24px outset transparent;
border-left:24px solid#ffffff;/* Arrow background color on the left */
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:10px;
left:-8px;
width:100%;
}
#PopularPosts1 li{
width:100%;
position:relative;
left:0;
margin:7px 0 16px 12px;
padding:10px 4px 0 5px;
}
#PopularPosts1 ul li:before{
content:counter(li);
counter-increment:li;
position:absolute;
top:-2px;
left:-20px;
font-size:35px;
width:20px;
color:#888888;
}
#PopularPosts1 ul li a{
display:block;
font-size:16px;/* Font size of the links */
color:#666;/* Color of the links */
text-decoration:none;
transition: all .1s ease-in-out;font-weight: bold;
}
#PopularPosts1 ul li a:hover{
color:#3366FF;
margin-left:3px;
}
Style 4:
#PopularPosts1 h2{
padding:8px 10px 3px 0;
width:100%;
margin:0;
font-size:16px;
position:relative;
left:-20px;
display:block;
border-bottom:2px solid #ccc;
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:10px;
width:100%;
}
#PopularPosts1 li{ /* Styles of each element */
width:100%;
position:relative;
left:0;
margin:0 0 6px 10px;
padding:4px 5px;
}
#PopularPosts1 ul li:before{/* Style of the numbers */
content:counter(li);
counter-increment:li;
position:absolute;
top:3px;
left:-39px;
font-size:21px;
width:28px;
height:28px;
border-radius: 50%;
color:#777;/* Text color */
border: 2px solid #ddd;/* Rounded border color */
padding:0;
text-indent:9px;
}
#PopularPosts1 ul li a{
display:block;
position:relative;
left:-45px;
width:100%;
margin:0;
min-height:28px;
padding: 5px 3px 3px 39px;
color:#333;/* color of the links */
text-decoration:none;
font-size:14px;/* Font size of the links */
font-style: italic;
}
#PopularPosts1 ul li a:hover{
color:#3366ff;
margin-left:3px;
}
Final Notes
All the CSS is valid. I just have to mention that the numbering is not visible in Internet Explorer 7, since that version of the browser does not support properties that make the numbers appear. For example in the 4th style, the circles look squared in IE8 and earlier versions since, these versions do not support a property that makes them look as circles.
Like
5
Random Posts
How to remove Blogger Picture/Image Shadow and Border06/04/2012 - 382 Comments
How to Increase Alexa Ranking of your Blog19/10/2013 - 0 Comments
How to Add Different Background Color or Image in Each Blogger Post14/04/2012 - 17 Comments
Related Posts:
Add floating social media sharing b...
Add A CSS Animated Share Button on ...
Orbit - jQuery Image Slider Plugin ...
How to Add Numbered Page Navigation...
Add a Custom jQuery Lightbox To Blo...
17 comments:
ctfand 9/28/2013
thanks for the tutorial. keep it up! Reply
Lily Seymour 10/07/2013
Hi, for some reason my #10 is outside of the circle, i'm at http://www.wigweav es.com, if you could tell me how to fix that I would appreciate it, email me at lily@ lilyseymour.com. Reply
Kamran Ahmed 10/15/2013
What about the popular post gadget on your blog, how can we this style in our blog. Reply
Ciupercomania 10/17/2013
very well done, great work Reply
Enyinnaya Emma 10/19/2013
Great job... www.enyinnayaemma .blogspot.com Reply
Trish @TheOldPostRoad 10/22/2013
My numbers are cut off. I clearly don't know what I am doing. How do I fix?
http://theoldpostroadbl og.blogspot.com
Reply
Dok Simon 11/16/2013
nice working information man.... keep up Reply
Raghuveer onbv 12/05/2013
Thank you sir Reply
Gladys Jane 12/16/2013
hi, how can i costumize my popular posts using photos and then the title using a tooltip... tnx Reply
Demarco 1/04/2014
Thanks! Reply
Eleanor MayC 2/02/2014
I'm using style three, but want to remove the numbers. Which part of the CSS controls this? Thanks Reply
Replies
Admin 2/02/2014
Hi Eleanor,
You need to remove this part:
#PopularPosts1 ul li:before{
content:counter(li);
counter-increment:li;
position:absolute;
top:-2px;
left:-20px;
font-size:35px;
width:20px;
color:#888888;
}
Hope this works. Thanks for visiting!
Amit Kumar 2/11/2014
Hiii Bro,
thanks for this amazing post. you shared not only one but 4 different styles Popular Posts Widget here. all widget are very good looking and awesome :)
Thanks again for sharing this valuable article with us:) Reply
Arun 2/27/2014
Hi, Is there a way to use the same style for just basic numbering on post? Reply
Replies
Admin 2/28/2014
Hi Arun,
Please see here how to customize numbered lists. Thanks for visiting :)
Arun 2/28/2014
Thanks :)
Stephanie Bertuzzo 4/08/2014
I have two popular posts widgets on my blogger layout, is there a way to customize each of them? The first one I use changed perfectly, but I want to change the other one I have as well! Reply
Add comment
Comment as: Sign out
Notify mePublishPreview
Privacy Policy| Disclaimer| Terms of Service| Sitemap Back to Top DMCA PROTECTED
Search
Search
Follow on Facebook
Helplogger
Like
2,785 people like Helplogger .
Facebook social plugin
Follow on Blogger
Subscribe via Email
Receive Quality Tutorials Straight in your
Inbox by submitting your Email below.
Submit
Or subscribe via RSS Feed
Recent Posts
How to Add Numbered Page Navigation Widget for Blogger
5 Easy Ways to Improve the SEO of a blog & Boost Traffic
What is the difference between padding and margins?
Add a Custom jQuery Lightbox To Blogger
How to Use Cookies in Javascript
Recent Comments
irsah imihar
Customizing will always be easy with jquery and javascript. Even...
Missy G
Yay! Thank you for making this so easy! This is just what I...
divakar sivashankar
admin i have a problem even if i add the tag the ad is showing up...
Anonymous
I don't understand the instructions you have given :(
Nanette Benablo
your site is very helpful and easy to follow tutorials. thank you...
Popular Posts
Simple Recent Posts Widget for Blogger/Blogspot
Create A Rollover Image Effect (change image on mouseover)
Recent Comments Widget For Blogger
How to remove Blogger Picture/Image Shadow and Border
Hide/Show Widgets /Gadgets in Home/post /static/archive pages in Blogger
5
Like
No comments:
Post a Comment