KellyConnect is Hiring Work from Home Now in the US! Join Now!
banner
Posts

5 Attractive Blogger Popular Post Widgets - 2019

Riken Maharjan
Attractive Blogger Popular post  -  In blogger site Popular post widgets is most useful and coolest widgets in blogger. Although default popular post also good. But in this post i have 4 list of new attractive popular post widget which is totally different than default post widgets. If you like to change to look your blog nice. please follow this steps : 

Step 1 - How to Add Attractive Blogger Popular Post In Blog:


  •  Sign In to Blogger Dashboard
  • Click on Design > Page elements > Add a Gadget (Old blogger interface)
  • Click on Layout > Add a Gadget (New blogger interface)
  • Add Gadget called " Popular Post "

Step 2 - How to Add Code :


  •  Download your recent templates first. (For Backup)
  •  Go to Template -> Edit HTML
  • Find ]]></b:skin> and copy the code of label style you like above ]]></b:skin>
  • Paste code shown in below
  • Save Templates

Style 1

Attractive Blogger Popular post

.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url() no-repeat scroll 5px 10px;
list-style-type: none;padding:5px 5px 5px 20px !important;
border: 1px solid #ddd;border-radius:30px;
-moz-border-radius:30px;
-webkit-border-radius:30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
height: 40px;
-moz-box-shadow: 3px 2px 5px #242424;
-webkit-box-shadow: 3px 2px 5px #242424;
box-shadow: 3px 2px 5px #242424;margin-bottom: 5px;height: 40px;
}
.popular-posts ul li a {
font-style: italic;
}
.popular-posts ul li:hover {
border:1px solid #d10202;
-moz-box-shadow: 3px 2px 5px #d10202;
-webkit-box-shadow: 3px 2px 5px #d10202;
box-shadow: 3px 2px 5px #d10202;
}
.popular-posts ul
li a:hover {
text-decoration:none;
}
.popular-posts .item-thumbnail img {
height:40px;width:40px;
webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.popular-posts .item-thumbnail img:hover{
-moz-box-shadow: 0px 0px 5px #d10202;
-webkit-box-shadow: 0px 0px 5px #d10202;
box-shadow: 0px 0px 5px #d10202;}
Enjoy My Other Posts Also Guys

Style 1

Attractive Blogger Popular post


#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:#ff4c54;width:97%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}
#PopularPosts1 ul li a{font-size:13px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts1 img{
-moz-border-radius: 130px;
-webkit-border-radius: 130px;
border-radius: 130px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
padding:4px;
border:1px solid #fff !important;
}
#PopularPosts1 img:hover {
border-radius: 0 0 0 0;
-moz-transform: scale(1.2) rotate(-711deg) ;
-webkit-transform: scale(1.2) rotate(-711deg) ;
-o-transform: scale(1.2) rotate(-711deg) ;
-ms-transform: scale(1.2) rotate(-711deg) ;
transform: scale(1.2) rotate(-711deg) ;
}

Style 3


.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl4riQSuztpa7id27et3j2o2VkStjUCZRLdD52UTFM6-GARVihhppuv4ccKK4FNE-mcsxq_MudkUvpg03GiwziSAYsh9WQn24cBhmQtJMflwY0T5J1gWx-03zjRSxCZIPkvsLO1rwzIUE/s1600/1.gif) no-repeat scroll 5px 10px;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid #ddd;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.popular-posts ul
li:hover {
border:1px solid #6BB5FF;
}
.popular-posts ul
li a:hover {
text-decoration:none;
}
.popular-posts .item-thumbnail img {
webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

Style 4


.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url() no-repeat scroll 5px 10px;
list-style-type: none;padding:5px 5px 5px 20px !important;
border: 1px solid #ddd;border-radius:30px;
-moz-border-radius:30px;
-webkit-border-radius:30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
height: 40px;
-moz-box-shadow: 3px 2px 5px #242424;
-webkit-box-shadow: 3px 2px 5px #242424;
box-shadow: 3px 2px 5px #242424;margin-bottom: 5px;height: 40px;
}
.popular-posts ul li a {
font-style: italic;
}
.popular-posts ul li:hover {
border:1px solid #d10202;
-moz-box-shadow: 3px 2px 5px #d10202;
-webkit-box-shadow: 3px 2px 5px #d10202;
box-shadow: 3px 2px 5px #d10202;
}
.popular-posts ul
li a:hover {
text-decoration:none;
}
.popular-posts .item-thumbnail img {
height:40px;width:40px;
webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.popular-posts .item-thumbnail img:hover{
-moz-box-shadow: 0px 0px 5px #d10202;
-webkit-box-shadow: 0px 0px 5px #d10202;
box-shadow: 0px 0px 5px #d10202;}

Style 5

Attractive Blogger Popular post

/* Popular Post */
.PopularPosts .widget-content ul{margin-top:-5px;margin-bottom:-1px;padding-right:20px!important;list-style-type:none}
.PopularPosts .widget-content ul li{position:relative;padding:10px!important}
.PopularPosts .widget-content ul li:first-child{background:#555;width:100%}
.PopularPosts .widget-content ul li:first-child:after{content:"01";background:#f88c00}
.PopularPosts .widget-content ul li:first-child+li{background:#666;width:100%}
.PopularPosts .widget-content ul li:first-child+li:after{content:'02'}
.PopularPosts .widget-content ul li:first-child+li+li{background:#777;width:100%}
.PopularPosts .widget-content ul li:first-child+li+li:after{content:'03'}
.PopularPosts .widget-content ul li:first-child+li+li+li{background:#888;width:100%}
.PopularPosts .widget-content ul li:first-child+li+li+li:after{content:'04'}
.PopularPosts .widget-content ul li:first-child+li+li+li+li{background:#999;width:100%}
.PopularPosts .widget-content ul li:first-child+li+li+li+li:after{content:'05'}
.PopularPosts .widget-content ul li:first-child+li+li+li+li+li{background:#aaa;width:100%}
.PopularPosts .widget-content ul li:first-child+li+li+li+li+li:after{content:'06'}
.PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li{background:#bbb;width:100%}
.PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li:after{content:'07'}
.PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li+li{background:#c1c1c1;width:100%}
.PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li+li:after{content:'08'}
.PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li+li+li{background:#ccc;width:100%}
.PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li+li+li:after{content:'09'}
.PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li+li+li+li{background:#ddd;width:100%}
.PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li+li+li+li:after{content:'10'}
.PopularPosts .widget-content ul li:first-child:after,.PopularPosts .widget-content ul li:first-child+li:after,.PopularPosts .widget-content ul li:first-child+li+li:after,.PopularPosts .widget-content ul li:first-child+li+li+li:after,.PopularPosts .widget-content ul li:first-child+li+li+li+li:after,.PopularPosts .widget-content ul li:first-child+li+li+li+li+li:after,.PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li:after,.PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li+li:after,.PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li+li+li:after,.PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li+li+li+li:after{position:absolute;bottom:1px;right:1px;background:#444;padding:6px 5px;width:20px;line-height:1em;text-align:center;color:#eee;font-size:13px!important}
.PopularPosts .widget-content{padding-right:10px}


Final Words

I hope you have enjoy this article, please share this post with your friends and stay tuned more interesting articles and i'm waiting for your reply. If you need any help please feel free to contact us or leave a comment below will reply will be highly appreciate thanks.

1 comment

  1. Is it true that you are wishing to buy Good BB Guns ? All things considered, everybody wants to purchase since bb firearms are the best for Airgun sports.
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.