How to Create a Cool Popular Posts Widget

Ruangngoprek.web.id - How to Create a Cool Popular Post Widget  - This time I will share how to create a cool popular post on a blog easily, maybe many of you don't know, for example, like the following image.

But first, we need to understand what popular posts actually are.
Popular posts is a blog feature that displays all the posts or entries most frequently viewed by visitors to your blog, which are displayed in a widget list.

Here's how:

• Open and log in to our blogger
• Then select the template menu, select Edit HTML
• Then look for the popular post code, for example .PopularePost or #PopularPost , please delete all the popular post codes and replace them with the popular post codes below.

/*Popular Post*/
.PopularPosts ul,.PopularPosts li,.PopularPosts li a{margin:0;padding:0;list-style:none;border-radius:10px;background:none;outline:none}
.PopularPosts ul{margin:0;list-style:none;color:black;counter-reset:num}.PopularPosts ul li{border-bottom:1px dashed #ddd;background-color:#eee;margin:0 0 0 0!important;padding:.5em 1.0em .8em .0em!important;counter-increment:num;position:relative;}
.item-thumbnail img{float:left;margin:0 10px 0 0}.PopularPosts a{color:#333!important}
.PopularPosts a:hover{color:#222!important}
.PopularPosts ul li:before,.PopularPosts ul li .item-title a,.PopularPosts ul li a{font-weight:bold;color:inherit;text-decoration:none}.PopularPosts ul li:before{content:counter(num)!important;font-weight:bold !important;
display:block;
position:absolute;
bottom:0px;
right:0px;
border-radius:16px;
background-color:#555;
color:#fff !important;
width:28px;
height:28px;
line-height:28px;
text-align:center;
padding-right:0px !important;
border:2px solid #07ACEC;display:block;position:absolute;background-color:#333;color:#fff!important;width:22px;height:22px;line-height:22px;text-align:center;bottom:0;right:0;padding-right:0!important}
.PopularPosts ul li:nth-child(1){background-color:#fff}
.PopularPosts ul li:nth-child(2){background-color:#fff}
.PopularPosts ul li:nth-child(3){background-color:#fff}
.PopularPosts ul li:nth-child(4){background-color:#fff}
.PopularPosts ul li:nth-child(5){background-color:#fff}
.PopularPosts ul li:nth-child(6){background-color:#fff}
.PopularPosts ul li:nth-child(7){background-color:#fff}
.PopularPosts ul li:nth-child(8){background-color:#fff}
.PopularPosts ul li:nth-child(9){background-color:#fff}
.PopularPosts ul li:nth-child(10){background-color:#fff}

• Save Template and view 

So that popular posts look slimmer, there are some settings we need to make again, if we use thumbnails or images it makes the appearance of popular posts less slim, the method is as follows:

How to make popular posts slimmer

• Go to the Layout menu
• On the popular post widget, click the Edit Menu
• Uncheck the image thumbnails and snippets.

• Then Save

Okay, our popular post widget is ready, I apologize for any shortcomings, good luck, I hope it works and is useful, thank you.