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
- 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
.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
- 10 Stylish Blogger Labels Widget
For Blog
- 5 Attractive Blogger Popular Post
Widgets - 2019
- 350 Websites List To Earn Money
Online
- Free website submission to 1000
search engines
- Top 20 Trusted PTC Sites 2019 |
Get Paid To Click
- Free website submission to 1000
search engines
Style 1
#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
/* 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.