How to customize popular posts widget in blogger 2016
Hey Whats Up Guys! As we know that every thing in our blogger blog is very important.You
customize every thing you want by some HTML or Java Scripts.Todat In this article I am
going to show you that how you can customize popular post widget with CSS.This widget
comes in almost very template.It help blogger to increase user interaction.
So Let Start it Below:
How to Customize Popular Post Widget In Blogger:
1.Go to Blogger Dashboard>>Template.
2.Then Click on Edit HTML.
3.Now find the tag: ]]>
4.Now just above it paste the given code:
To add the popular posts widget in blogger just go Layout >> Add a Widget and add the popular posts widget from the widget list and make any setting as you want.
If you want to show the first line of your popular posts then tick the Snippet check box and also the image thumbnail will show the image of the post, select number of posts you want to show in the widget and also you can select the period of time for the popular posts. After adding the widget you can drag it any where on your blog, but if you keep it on side bar, it would be looking attractive.
I hope that after reading this article you can easily customize popular posts widget in blogger.If you like this article share it on social media to help other blogger friends.
customize every thing you want by some HTML or Java Scripts.Todat In this article I am
going to show you that how you can customize popular post widget with CSS.This widget
comes in almost very template.It help blogger to increase user interaction.
So Let Start it Below:
How to Customize Popular Post Widget In Blogger:
1.Go to Blogger Dashboard>>Template.
2.Then Click on Edit HTML.
3.Now find the tag: ]]>
4.Now just above it paste the given code:
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPhmMprPwcNspS0l68uIEmcHVZHdSg9P6_XbPFDd2CUYxNfQBBlTbhiS0_AATLnSjOo4xiwlDNorTtAB9V0YC4do0OFR9MRyRN8Wz9AKKvFdINxNdG_YhbYV9daWgt-Od59UHIzpViqIk/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);
}
.popular-posts ul li {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPhmMprPwcNspS0l68uIEmcHVZHdSg9P6_XbPFDd2CUYxNfQBBlTbhiS0_AATLnSjOo4xiwlDNorTtAB9V0YC4do0OFR9MRyRN8Wz9AKKvFdINxNdG_YhbYV9daWgt-Od59UHIzpViqIk/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);
}
To add the popular posts widget in blogger just go Layout >> Add a Widget and add the popular posts widget from the widget list and make any setting as you want.
If you want to show the first line of your popular posts then tick the Snippet check box and also the image thumbnail will show the image of the post, select number of posts you want to show in the widget and also you can select the period of time for the popular posts. After adding the widget you can drag it any where on your blog, but if you keep it on side bar, it would be looking attractive.
I hope that after reading this article you can easily customize popular posts widget in blogger.If you like this article share it on social media to help other blogger friends.
Let me know you if you have any problem regarding to this article.If you have any problem you can ank me in comment box.Thanks for reading this article.Stay tuned for more lectures.
No comments: