 |
| without thumbnail |
Hello every one. I hope you r doing well. Today m sharing you a gadget for making your blogspot blog more beautiful. It is for popular posts.you can set popular posts up to 10 and you can show image thumbnail or just a simple gadget in a blog. In left side you are seeing the stylish popular gadget without thumbnail in the left. you can see the demo for the gadget with thumbnail also. i have posted a pic containing image thumbnail.
I will recommend you to must use this widget since it will increase your site’s beauty.
since this code is in css so it will not effect loading time for your blog.
This blogger gadget will help in picking & showing the top visited posts inside your blogger blog in front of your visitors ” while using this gadget readers are easily landed on your previous Top ranking posts without searching them hardly. This gadget works on some fixed criteria. If you will select for 7 days. it will show all the popular posts according to selected days. if we could keep it for a month then it will show all the top visited posts according to the selected
 |
| with thumbnail |
duration of Time. if we could keep it for all the time it will show all the popular post from the starting date of your blog..
How To add Stylishly Popular Post widget in Blogger Blog ?
step 1 :
Go to your blogger Dashboard:
Selct Layout
Click on the Add a gadget and choose the gadget named popular posts gadget
Click all proper options below as shown in fig.below if you need to show posts with thumbnail if you don’t wanna show the thumbnail then don’t select it.
 |
| Don’t select Image thumbnail option if you don’t wanna show images . |
If you select snippet the summary will be shown.
Select digits from the option(maximum is 10) how many posts you wanna show.
Nest step:
Go to blogger template:
Click on edit html
Search for ]]></b:skin> and post the following code before it.
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(https://4.bp.blogspot.com/-oOVUW06ghgo/UHwuqL9TltI/AAAAAAAAGKU/Nj4DQnvft8k/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);
}
You are done.. finally click on save…
Nyc…you have done..Enjoy..
If you have any query plz ask to me in the comment box…
Thank you…God bless!!!!!
Leave a Reply