Popular posts widget is a widget which shows the popular posts with title means it show the most visited posts of your blog. Blogger provides its default popular posts widget that you can easily add to your blog's sidebar. But today we are going to share that how you can customize blogger popular posts widget and make it more attractive. Today we've 3 Different popular posts styles to customize popular posts. Customizing this widget is easy more than you think. So, guys follow the below steps to Customize popular posts widget in blogger.
Recommended For You :
Add 2 Stylish Custom Popular Posts Widget to Blogger
Recommended For You :
Add 2 Stylish Custom Popular Posts Widget to Blogger
How to Customize Popular Posts widget
Step 1. Add the Default Blogger Popular posts and Configure it in such a way that it shows only post titles as you can see it below :- Remove the check marks from Snippet and Image Thumbnails by clicking on them
]]></b:skin>
Step 5. Now copy any one code that you like from the following 3 codes and paste it just above/before it ( ]]></b:skin> ).
Custom Style 1 :
#PopularPosts1 h2{
position:relative;
padding:8px 10px 6px 10px;
width:100%;
margin-bottom: 5px;
font-size:17px;
color:#757575;
text-align:left;
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:10px;
left:-8px;
width:100%;
}
#PopularPosts1 li{
width:100%;
position:relative;
left:0;
margin:0 0 1px 12px;
padding:4px 5px;
}
#PopularPosts1 ul li:before{
content: counter(li);
counter-increment: li;
position: absolute;
left: -30px;
top: 50%;
margin-top: -13px;
background: #8E8E8E;
height: 1.9em;
width: 2em;
line-height: 2em;
text-align: center;
font-weight: bold;
color: #fff;
font-size: 14px;
}
#PopularPosts1 ul li:after{
position: absolute;
content: '';
left: -2px;
margin-top: -.7em;
top: 50%;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left:10px solid #8E8E8E;
}
#PopularPosts1 ul li a{
color: #444;
text-decoration: none;
font-size:15px;
}
#PopularPosts1 ul li {
position: relative;
display: block;
padding: .4em .4em .4em .8em;
*padding: .4em;
margin: .5em 0 .5em 0.4em;
background: #ddd;
transition: all .3s ease-out;
text-decoration:none;
transition: all .1s ease-in-out;
}
#PopularPosts1 ul li:hover{
background: #eee;
}
#PopularPosts1 ul li a:hover{
color:#444;
margin-left:3px;
}
Custom Style 2:
#PopularPosts1 h2{
padding:8px 10px 3px 0;
width:100%;
margin:0;
font-size:16px;
position:relative;
left:-20px;
display:block;
border-bottom:2px solid #ccc;
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:10px;
width:100%;
}
#PopularPosts1 li{
width:100%;
position:relative;
left:0;
margin:0 0 6px 10px;
padding:4px 5px;
}
#PopularPosts1 ul li:before{
content:counter(li);
counter-increment:li;
position:absolute;
top:3px;
left:-39px;
font-size:21px;
width:28px;
height:28px;
border-radius: 50%;
color:#777;
border: 2px solid #ddd;
padding:0;
text-indent:9px;
}
#PopularPosts1 ul li a{
display:block;
position:relative;
left:-45px;
width:100%;
margin:0;
min-height:28px;
padding: 5px 3px 3px 39px;
color:#333;
text-decoration:none;
font-size:14px;
font-style: italic;
}
#PopularPosts1 ul li a:hover{
color:#3366ff;
margin-left:3px;
}
Custom Style 3 :
#PopularPosts1 h2{
padding:7px 0 3px 0;
width:100%;
margin-bottom:10px;
font-size:1.3em;
text-indent:-12px;
font-size:18px;
text-align:center;
color: #757575; /* The Color of widget title */
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:8px 0px 1px;
left:-7px;
width:290px;
}
#PopularPosts1 li{
position:relative;
margin:0 0 10px 0;
padding: 3px 2px 0 17px;
left:-5px;
width:285px;
}
#PopularPosts1 ul li{
background: #eee;
position: relative;
display: block;
padding: .4em .2em .4em 2em;
*padding: .2em;
margin: .5em 0;
background: #ddd;
text-decoration: none;
border-radius: .3em;
transition: all .3s ease-out;
}
#PopularPosts1 ul li:before{
content: counter(li);
counter-increment: li;
position: absolute;
top: 50%;
margin: -1.3em;
height: 2em;
width: 2em;
line-height: 2em;
font-size: 15px;
color: #fff; /* numbers text color \\ */
background: #FB8835; /* numbrs background color */
border: .2em solid #fff; /* border color */
-webkit-box-shadow: 0 8px 5px -7px #888;
-moz-box-shadow: 0 8px 5px -7px #888;
box-shadow: 0 8px 5px -7px #888;
text-align: center;
font-weight: bold;
border-radius: 2em;
position: absolute;
left: 0;
transition: all .3s ease-out;
}
#PopularPosts1 ul li:hover{
background: #eee;
}
#PopularPosts1 ul li:hover:before{
transform: rotate(360deg);
}
#PopularPosts1 ul li a{
font: 14px Georgia, serif; /* Font size of Post Titles */
text-shadow: 0 -1px 2px #fff;
color: #444;
display:block;
min-height:25px;
text-decoration:none;
text-transform: uppercase;
}
#PopularPosts1 ul li a:hover{
color: #444;
}
Step 6. Hit the Save template Button
Congratulations : You've customized your Popular Posts Successfully.
Thanks for sharing.I found a lot of interesting information here. A really good post, very thankful and hopeful that you will write many more posts like this one.
ReplyDeleteucbrowser.vip
shareit.onl
mxplayer.pro
This comment has been removed by the author.
ReplyDeleteHi Sir, thanks for this informative article, this will definitely help me in the future.
ReplyDeletenew whatsapp status
Best Friend Status 2020
Love Attitude Status 2020
Hurt Status for Whatsapp
Alone Status for Whatsapp
Hi Sir, thanks for this informative article, this will definitely help me in the future. My Veterans Day
ReplyDeleteNice information shared, good work
ReplyDeletestatus2k
Best Friend Status 2020
Love Attitude Status 2020
Hurt Status for Whatsapp
Alone Status for Whatsapp
Amazing information providing by your article, thank you so much for taking the time to share a wonderful article. Kindly visit the Need Assignment Help website we providing the best assignment help services in Australia.
ReplyDeletemobdro and also tubemate
ReplyDeleteHere you can see all restaurants latest menu price with latest updates. If you need to know Burger King or McDoanld's menu price list before going to the restaurant or ordering any food online, you can easily view and check out the price list here of your favorite food items.
ReplyDeletehttps://latestmenuprice.site/
ReplyDeleteclick here and check the awesome website.
ReplyDeleteIf you are at your office and want to order the food, you can check and view all restaurants menu price list on your desk and get easily the food that you are craving for.
ReplyDeleteSo here are the details of all the food items from starter to desserts you wanted to check out and compare the easy and tasty food by your own at any place click here.
I read this article! I hope you will continue to have such articles to share with everyone! thank you!
ReplyDeletevidmate download
instasave
Service Provider of Work From Home Jobs - Data Entry Projects, Form Filling Service, Online Work From Home and Online Work From Home Process
ReplyDeleteMobile job app
Work from home jobs
Amazing information providing by your article, thank you so much for taking the time to share a wonderful article. shareit vidmate app
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDelete