Lets Talk About: Redesigning Your Blog With This Attractive Popular Posts Widgets For Blogger

Tags

There's nothing bad in trying to keep your readers with similar posts, I love it and am sure you do too. So if you using blogger/blogsopt  as a platform for your personal or even business blog. I believe you are still looking for some ways to customize your blog and make it your very own just the way you want it to be.


If very clear just like i did say in my previous post that the essence of ll this is to make your webpages unique and eye-catching, and above all to make sure it stand out from the rest of other pages on the Internet. More also you want to grab the attention of your market, by that you want them to browse through your site and at the end becomes your loyal followers. This is what will call goal and there's nothing bad about it.

Good enough there're wonderful ways to personalize your blog the way you want it. And one of that way is to customize your Popular Posts widget. Well if you haven't install it yet you are really missing a lot but am sure by the time you finish reading this post you will learn the benefits and how to install it too.

As you know Adding the Popular Posts Widget for Blogger is very easy and simple.
Just login to your blogger account, click on your blog title, access the Layout menu, click "Add Widget" and choose "Popular Posts". A window will appear asking you to configure the widget by choosing which posts you'll feature (e.g. those that were most viewed in the past 7 days or 30 days or from the beginning of your blog). You also have option to choose how many posts you'll feature in your Popular Posts section and select if you'll show the post title only or along with the image thumbnail and/or the snippet. (Remember that each widget style has different requirements, so I do normally ask that you follow the instructions carefully to know if you'll need the snippet and image thumbnail or not).

Now once you've followed these instructions stated above, you'll get to see the basic version of the Popular Posts Widget for Blogger in your blog. You have option to stick with this if it matches your blog design like me. But if it doesn't suit your taste, there's no need to feel bad since you have option to personalize it to your choice. just scroll down and choose from the following styles below.

First Popular Posts Style 1 - Box within a box
This if you ask me is an interesting widget style since it uses your snippet and image thumbnail in a unique way. In fact a close look you will discover that your snippet is written in opaque text and placed in a small transparent box. This, in turn, is placed in a bigger rectangular box, wherein your image thumbnail is used as a background. Choosing this Popular Posts Widget for Blogger can be a great option if you want to brighten up your blog and grab the attention of readers with your colorful photos. To achieve this style use the CSS CODE below:

<style type='text/css'>
.sidebar .PopularPosts ul {
margin: 0;
padding: 0;
}
.sidebar .PopularPosts ul li {
list-style: none !important;
padding: 0 !important;
margin-bottom: 10px;
}
.sidebar .PopularPosts .item-thumbnail {
height: 190px;
margin: 0;
overflow: hidden;
width: 100%;
}
.sidebar .PopularPosts .item-title {
position: relative;
}
.sidebar .PopularPosts img {
height: 100%;
width: 100%;
object-fit: cover;
}
.sidebar .PopularPosts .item-title a {
color: #FFFFFF;
font: 15px &#39;Oswald&#39;, sans-serif;
text-transform: uppercase;
font-size: 20px;
padding: 10px;
position: absolute;
right: 0;
left: 0px;
margin: 0px auto;
text-align: center;
text-decoration: none;
top: 40px;
width: 60%;
height: 26px;
overflow: hidden;
z-index: 2;
}
.sidebar .PopularPosts .item-snippet {
background: rgba(0, 0, 0, 0.35);
border-top: 6px solid rgba(0, 0, 0, 0.1);
border-bottom: 6px solid rgba(0, 0, 0, 0.1);
color: #FFFFFF;
left: 0px;
right: 0px;
margin: 0px auto;
padding: 65px 10px 10px;
position: absolute;
font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
text-align: center;
top: 35px;
width: 60%;
z-index: 1;
}
.sidebar .PopularPosts .item-content {
position: relative;
}
</style>

The second Popular Posts Style 2 - Comes with Large thumbnails with small post titles underneath 
This uses the same code as the basic Blogger Popular Posts Widget with a few tweaks. Popularized by well-known blogs, One ting i l love so much about this style is the fact that it's eye-catching because it focuses on pictures, which don't only summarize the posts' content but also add visual drama to the entire page. So if you  are into clothes, makeup, art and other topics that highly depend on visual presentation to better express ideas. I believe this is particularly useful for your kind blogs. And to achieve this use the CSS below: 

<style type='text/css'>
.sidebar .PopularPosts ul {
counter-reset: popularcount;
margin: 0;
padding: 0;
}
.sidebar .PopularPosts ul li {
width: 100%;
list-style: none !important;
padding: 0 !important;
margin-bottom: 20px;
position: relative;
border: 0;
}
.sidebar .PopularPosts .item-thumbnail a {
clip: auto;
display: block;
height: auto;
height: 120px;
}
.sidebar .PopularPosts .item-thumbnail {
width: 100%;
position: relative;
margin-bottom: 15px;
}
.sidebar .PopularPosts .item-thumbnail::before {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border-bottom: 29px solid #fff;
border-left: 29px solid transparent;
border-right: 29px solid transparent;
bottom: 0px;
content: &quot;&quot;;
height: 0;
width: 0px;
left: 0px;
right: 0px;
margin-left: auto;
margin-right: auto;
position: absolute;
z-index: 3;
}
.sidebar .PopularPosts .item-thumbnail:after {
color: #000;
content: counter(popularcount, decimal);
counter-increment: popularcount;
font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
list-style-type: none;
position: absolute;
bottom: 0;
text-align: center;
margin: 0px auto;
left: 0px;
right: 0px;
z-index: 4;
}
.sidebar .PopularPosts .item-thumbnail img {
position: relative;
width: 100%;
height: 120px;
object-fit: cover;
}
.sidebar .PopularPosts .item-title {
font: 15px &#39;Oswald&#39;, sans-serif;
text-transform: uppercase;
text-align: center;
margin: 0px auto;
padding-bottom: 10px;
border-bottom: 1px solid #000;
}
.sidebar .PopularPosts .item-title a {
color: #000;
text-decoration: none;
}
.sidebar .PopularPosts .item-snippet {
padding: 10px 15px;
font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
text-align: center;
}
</style> 

The third Popular Posts Style 3 - is called Colorful boxes.
In case your blog needs a pop of color, believe me this is the right choice for you. This widget style presents your Popular Posts in several boxes that feature a thumbnail image and have bright, eye-catching shades like light green, talk of ocher yellow and vivid orange. wow wonderful design. Each box has a different color, and you can add up to four boxes if you like. To achieve this use the CSS CODE below:

<style type='text/css'>
.sidebar .PopularPosts ul {
padding: 0;
margin: 0;
}
.sidebar .PopularPosts .item-thumbnail a {
clip: auto;
display: block;
height: auto;
overflow: hidden;
}
.sidebar .PopularPosts .item-thumbnail {
width: 130px;
height: 130px;
border-right: 5px solid #fff;
margin: 0px 10px 0px 0px !important;
position: relative;
}
.sidebar .PopularPosts .item-thumbnail img {
position: relative;
height: 100%;
width: 100%;
object-fit: cover;
}
.sidebar .PopularPosts ul li {
float: left;
margin-bottom: 5px;
max-height: 130px;
min-width: 250px;
overflow: hidden;
}
.sidebar .PopularPosts ul li:first-child {
background: #D9EDF7;
}
.sidebar .PopularPosts ul li:first-child + li{
background: #F2DEDE;
}
.sidebar .PopularPosts ul li:first-child + li + li {
background: #DFF0D8;
}
.sidebar .PopularPosts ul li:first-child + li + li + li {
background: #FFEEBC;
}
.sidebar .PopularPosts ul li:first-child + li + li + li + li{
background: #E0E0E0;
}
.sidebar .PopularPosts .item-title {
font: 13px &#39;Oswald&#39;, sans-serif;
text-transform: uppercase;
padding: 10px 5px 10px;
}
.sidebar .PopularPosts .item-title a {
color: #000;
text-decoration: none;
}
.sidebar .PopularPosts .item-snippet {
font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
padding-right: 5px;
}
.sidebar .PopularPosts .widget-content ul li {
padding: 0px 5px 0px 0px!important;
}
</style> 

The forth Popular Posts Style 4 - Is called Grid layout
It's Just like the large-picture widget style, the grid layout believe me is an excellent option if you want to showcase your pictures or if your blog depends on visual information which i believe most blogs nowadays do. But bear in mind that the title of your posts won't be included in the layout, so readers will have to hover their mouses on the images to read the titles. And to achieve this use the CSS CODE below:

CSS code: 
<style type='text/css'> 
.sidebar .PopularPosts ul {
padding: 0;
}
.sidebar .PopularPosts ul li:first-child{
width: 100%;
max-height: 100%;
opacity: 0.9;
}
.sidebar .PopularPosts ul li:nth-child(even){
margin-right: 2%;
}
.sidebar .PopularPosts ul li {
box-sizing: border-box;
position: relative;
padding: 0px !important;
width: 49%;
max-height: 120px;
opacity: 0.4;
overflow:hidden;
float: left;
margin-bottom: 2%;
-webkit-transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-ms-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
}
.sidebar .PopularPosts ul li:hover {
opacity: 1;
}
.sidebar .PopularPosts .item-thumbnail {
margin: 0;
width: 100%;
}
.sidebar .PopularPosts ul li img {
box-sizing: border-box;
width: 100%;
height: 100%;
object-fit: cover;
padding:0;
}
.sidebar .PopularPosts .item-content:hover .item-title a,
.sidebar .PopularPosts .item-thumbnail-only:hover .item-title a {
visibility: visible;
opacity: 1;
}
.sidebar .PopularPosts .item-title a {
color: #fff;
background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.93) 100%, rgba(0, 0, 0, 0.85) 100%);
text-decoration: none;
position: absolute;
text-align: center;
font: 13px &#39;Oswald&#39;, sans-serif;
left: 0;
right: 0;
bottom: 0%;
padding: 100px 10px 10px;
opacity: 0;
visibility: hidden;
}
.sidebar .PopularPosts .item-snippet {
display: none;
}
</style>

And the last but not the least is Popular Posts Style 5 - Called Numbered posts
Are you in love with numbered lists?, or just like to make your blog more organized, this can be the perfect option if you ask me. By using the code for this widget style, your Popular Posts will be automatically numbered and will feature clean, minimalistic boxes that include your snippet and image thumbnail. And to achieve this in this blog use the CSS CODE below:

<style type='text/css'>
.sidebar .PopularPosts ul {
counter-reset: popularcount;
margin: 0;
padding: 0;
}
.sidebar .PopularPosts ul li {
float: left;
max-height: 130px;
min-width: 250px;
position: relative;
}
.sidebar .PopularPosts .item-thumbnail::after {
color: rgba(255,255,255, 0.63);
content: counter(popularcount, decimal);
counter-increment: popularcount;
font: 70px &#39;Oswald&#39;, sans-serif;
list-style-type: none;
position: absolute;
left: 5px;
top: -5px;
z-index: 4;
}
.sidebar .PopularPosts .item-thumbnail::before {
background: rgba(0, 0, 0, 0.3);
bottom: 0px;
content: &quot;&quot;;
height: 100px;
width: 100px;
left: 0px;
right: 0px;
margin: 0px auto;
position: absolute;
z-index: 3;
}
.sidebar .PopularPosts .item-thumbnail a {
clip: auto;
display: block;
height: auto;
overflow: hidden;
}
.sidebar .PopularPosts .item-thumbnail {
width: 100px;
height: 100px;
margin: 0px 10px 0px 0px !important;
position: relative;
}
.sidebar .PopularPosts .item-thumbnail:hover:before {
display: none;
}
.sidebar .PopularPosts .item-thumbnail img {
position: relative;
padding-right: 0px !important;
height: 100%;
width: 100%;
object-fit: cover;
}
.sidebar .PopularPosts .item-title {
font: 13px &#39;Oswald&#39;, sans-serif;
text-transform: uppercase;
padding: 0px 5px 10px;
}
.sidebar .PopularPosts .item-title a {
color: #000;
text-decoration: none;
}
.sidebar .PopularPosts .item-snippet {
font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
}
.sidebar .PopularPosts .widget-content ul li {
padding: 0px 5px 0px 0px !important;
}
.sidebar .PopularPosts .item-content {
padding: 5px 0px;
border-bottom: 1px dotted #dedede;
overflow: hidden;
height: 100px;
position: relative;
}
</style>

Alright these are just some of the widget styles you can choose from. Though there are a lot of them but i believe this few will give you what you what. Important thing to note is. Please when you've picked a style you want, kindly make sure to copy its CSS code very well in fact that's why am using red ti highlight it. Now once you do so, go to your blog, click on "Template" and select "Edit HTML" under the template preview.

Now to achieve our goal these next codes need to be pasted above the "</head>" or "</body>" tags, so check the instruction to know exactly where you need to put the code.
Lets Add the CSS
Now when the template editor has opened, just click anywhere inside the code area and hit CTRL + F or Command F but CTRL+F is easy, inside the search box that will appear past </head> and hit enter key to search the following tag:
</head>
You have seen it good, Just ABOVE the </head> tag, copy and paste the CSS code of your choice  styles above.

Please pay serious attention. If the Popular Posts widget is located in the footer of your blog, remove the .sidebar class found in the CSS code in order to make it work. Though i believe most of us love to have it by side but is good to say so for some that love to have it in the footer.

Remember that most of the styles are using the Oswald font which you need to add to your template's code as well. Just follow the instruction below is easy to do.

So to achieve our target search for this tag <head> just like you did the first one above. But this time BELOW it add this CODE

<link href='https://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'/>

Next is to Add the JavaScript, which also require JavaScript style codes in order to resize the popular posts image / thumbnail and trim the post snippet and title. 
To add the JavaScript, search the </BODY> tag and paste the following script just above it:
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/>
<script type='text/javascript'>
$(&#39;.popular-posts img&#39;).attr(&#39;src&#39;, function(e, t) {
return t.replace(&#39;/w72-h72-p-nu/&#39;, &#39;/s350-c/&#39;)
});
$(&#39;.popular-posts ul li .item-snippet&#39;).each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(&#39; &#39;);
if(j&gt;10)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,&#39;...&#39;));
});
$(&#39;.popular-posts ul li .item-content a&#39;).each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(&#39; &#39;);
if(j&gt;=6)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,&#39;...&#39;));
});
</script>

Please  if you have already the jQuery library in your template, remove the line in blue before pasting.

On a finally note. Once you have added all the codes in the right place, as instructed above just press the "Save template" button to save the changes. and there you have it your customize Popular Post widgets.

If you ask me i believe this five Popular Posts widgets for Blogger featured today are all great solutions for adding a popular post section to your blog. The great thing about it all is the fact that they all have different appearance for determining what makes a post popular, And the end result is the same: Just like the popular saying, your visitors are always one click away from your best content. Try some of these styles, find your favorite, and see how it impacts the performance of your blog. Am sure in one way or the other it will lead to traffic increase and you will be glad you did. If you still have questions kindly use the comment box and i will do my best to have them answered.


2 comments

Nice one bro
http://damytechs.com

Thank you Paul hope you do come back for more appreciate

Lets Talk About It! Join Me Please
EmoticonEmoticon