4 Different Styles For the Popular Posts Widget

Blogger allows us to easily add a Featured Posts widget that we select from its list of widgets, and we can do this by going to the Layout section of our blog.

This gadget, as the name suggests, shows you which blog posts are the most visited, and you can customize it to display the information you want in four possible combinations : (1) post title only, (2) image thumbnail and post title, (3 ) the title of the post with annotation and (4) the title of the post with the thumbnail and post excerpt.

This is an element that should not be missing from your blog because it encourages your visitors to view your content and can generate more revenue if you monetize your blog because the number of pages visited will increase. , you can attract users to subscribe to blogs and read interesting content.

Beginning of work. Add a gadget if you haven't already.

1. Select the Design tab and add the Featured Posts widget to the part of the blog you want to display, such as the sidebar, by clicking Add Widget.

2. Set the widget to display only the title of the message. You can do this by clicking on the "image thumbnail" and "crop" box as shown in the image below.

3. After customizing the widget, save your changes by clicking Save and then Save Settings.

How to Add CSS to Style the Popular Posts Widget

1. Select a style, then copy the CSS that appears below the image showing the style.

2. Select the " Template " tab, then click " Customize " > " Advanced " > " Add CSS ", then enter the CSS style you like.

3. After adding the CSS, save the changes by clicking the " Apply to Blog " button.

Note. Some Blogger templates do not allow you to add CSS in these places. If so, you need to access the HTML template in order to add CSS styles. In your Blogger dashboard go to Templates > Edit HTML and paste the code just above ]]> tag (press CTRL+F to find it - you may need to click the arrow to expand the code and then find it again)

And all this! You have configured the featured posts widget to display only the titles of the posts.

Style

Here is the CSS for each style, just pick the one you like best and paste it on your blog. You can see each of these styles in action in the demo blog below:

http://demo-blog343.blogspot.com

Style 1:

#Popular post1 h2{
padding: 7px 0 3px 0;
width: 100%;
bottom margin: 10px;
font size: 1.3 m;
text depth: -12px;
font size: 18px;
text alignment: center;
color: #757575 ; /* widget title color */
}
#Popular posts1 ul{
list style: no;
reset counter:li;
padding: 8px 0px 1px;
left: -7px;
width: 290px;
}
#Popular post1 li{
relative position;
margin: 0 0 10px 0;
padding: 3px 2px 0 17px;
left: -5px;
width: 285px;
}
#Popular posts1 ul li{
background: #eeee;
relative position;
see block;
content: .4em .2em .4em 2em;
*fee: 0.2em;
limit. 0.5em 0;
background: #ggd;
text format: no;
edge radius: 0.3 m;
transition all breaks 0.3;
}
#Popular posts1 ul li:to{
content: counter(li);
reverse growth. there;
position: absolute;
above - 50%;
fields: -1.3 m;
height: 2m;
width: 2m;
line height - 2 m;
font size: 15px;
color: #fff ; /* number text color */
background: #FB8835 ; /* number background color */
margins: .2em solid #fff ; /* border color */
-webkit-shadow box. 0 8px 5px -7px #888;
-moz-box-shadow: 0 8px 5px -7px #888;
block shadow: 0 8px 5px -7px #888;
text alignment. Medium
font weight: bold;
edge radius: 2 m;
position: absolute;
left 0;
transition all breaks 0.3;
}
#Popular posts1 ul li:hover{
background: #eeee;
}
#Popular posts1 ul li:hover:before{
transform: rotate (360 degrees);
}
#Popular posts1 ul li a{
font: 14px Georgian serif; /* message header font size */
text-shadow: 0-1px 2px #fff;
color: #444;
see block;
minimum height: 25px;
text format: no;
text conversion: upper case;
}
#Popular posts1 ul li a:hover{
color: #444;
}

Style 2:

#Popular post1 h2{
relative position;
padding: 8px 10px 6px 10px;
width: 100%;
bottom margin: 5px;
font-size: 17px;
color: #757575 ; /* widget title color */
text alignment: left;
}
#Popular posts1 ul{
list style: no;
reset counter:li;
padding: 10px;
left -8px;
width: 100%;
}
#Popular Posts1 li{ /* Style for each element */
width: 100%;
relative position;
left: 0;
margins: 0 0 1px 12px;
padding: 4px by 5px;
}
#Popular posts1 ul li:to{
content: counter(li);
reverse growth. there;
position: absolute;
left -30px;
above - 50%;
top margin: -13px;
background: #8E8E8E ; /* number background color */
height: 1.9 cm;
width: 2m;
row height: 2m;
text alignment. Medium
font weight: bold;
color: #ff;
font-size: 14px;
}
#Popular posts1 ul li:after{
position: absolute;
content: '';
left -2px;
Upper limit. -0.7em;
high: 50%;
width: 0;
height: 0;
border: 8px transparent solid;
bottom edge. transparent solid 8px;
left border: 10px solid #8E8E8E ; /* right arrow background color */
}
#Popular posts1 ul li a{
color: #444;
text format: no;
font size: 15px;
}
#Popular posts1 ul li {
relative position;
see block;
content: .4em .4em .4em .8em;
*cost: 0.4em;
margins: 0.5em 0.5em 0.4em;
background: #ggd;
transition all breaks 0.3;
text format: no;
all .1 transitions make entry and exit easier;
}
#Popular posts1 ul li:hover{
background: #eeee ; /* Background color on hover */
}
#Popular posts1 ul li a:hover{
color: #444 ; /* Link hover color */
left margin: 3px;
}

Style 3:

#Popular post1 h2{
relative position;
right: -2px;
padding: 8px 63px 6px 17px;
width: 100%;
fields: 0;
font-size: 16px;
background: #4F4F4F ; /* background color */
color: #f2f2f2 ; /* widget title color */
text alignment: left;
text depth: 18px;
}
#Popular posts1 h2:next {
position: absolute;
content: "";
top: 36px;
Ok 0px;
width: 0px;
height: 0px;
bottom edge. transparent top 12px;
left border: 12px solid #000000;
}
#Popular post1 h2:after{
position: absolute;
content: "";
up. -6 pixels;
left: -5px;
width: 0px;
height: 0px;
bottom edge. transparent top 24px;
border-top: 24px transparent initial;
border left: 24px Strong #ffffff ; /* Left arrow background color */
}
#Popular posts1 ul{
list style: no;
reset counter:li;
padding: 10px;
left -8px;
width: 100%;
}
#Popular post1 li{
width: 100%;
relative position;
left: 0;
margin: 7px 0 16px 12px;
padding: 10px 4px 0 5px;
}
#Popular posts1 ul li:to{
content: counter(li);
against growth: whether;
position: absolute;
up. -2 pixels;
left: -20px;
font size: 35px;
width: 20px;
color: #888888;
}

#Popular posts1 ul li a{
see block;
font size: 16 pixels ; /* Link font size */
color: #666 ; /* Link color */
text format: no;
all transitions .1 are easily accessible; font weight: bold;
}
#Popular posts1 ul li a:hover{
color: #3366FF;
left margin: 3px;
}

Style 4:

#Popular post1 h2{
padding: 8px 10px 3px 0;
width: 100%;
fields: 0;
font-size: 16px;
relative position;
left: -20px;
see block;
bottom edge. 2px hard #ccc;
}
#Popular posts1 ul{
list style: no;
reset counter:li;
padding: 10px;
width: 100%;
}
#Popular Posts1 li{ /* Style for each element */
width: 100%;
relative position;
left: 0;
margins: 0 0 6px 10px;
padding: 4px by 5px;
}
#Popular Post1 ul li:before{ /* Number style */
content: counter(li);
against growth: whether;
position: absolute;
up. 3 pixels;
left: -39px;
font-size: 21px;
width: 28px;
height: 28px;
border radius - 50%;
color: #777; /* Text color */
border: 2px solid #ddd; /* rounded border color */
charge 0;
text depth: 9px;
}
#Popular posts1 ul li a{
see block;
relative position;
left: -45px;
width: 100%;
fields: 0;
minimum height: 28px;
padding: 5px 3px 3px 39px;
color: #333; /* Link color */
text format: no;
font-size: 14px; /* Link font size */
font style: italic;

}
#Popular posts1 ul li a:hover{
color: #3366ff;
left margin: 3px;
}

Last note

All CSS are valid. Just note that the numbering is not displayed in Internet Explorer 7 because that version of the browser does not support the numbering feature. For example, style 4 frames look square in IE8 and earlier because those versions don't support features that make them look like frames.