Just Another Stunning Popular Posts Widget With Hover Effect
Just Another Stunning Popular Posts Widget With Hover Effect
Popular Posts widget will make your blog more attractive and
this is a way to highlighting your most viewed or popular posts. So a visitors
can easily get info about Popular Posts. So continuously I am working on to
make some new and spicy. I have just designed another popular posts widget that
is best fit for those website those are using 600+ wide images for the posts. On
the other hand our integrated popular post can able to show only 75px X 75px
wide images which is not suitable for wide images. However this popular posts widget can show widescreen
widget with Posts summary as well as I have added hover effects on this widget .
This widget has not any limitations. You can display up to 10 popular posts in
your blog.
Step 1 Log in to your Blogger account and Go to your Blogger Dashboard
Step 2 Go to your Layout tab.
Step 3 Click on "Add a Gadget" then select "Popular Posts" Widget.
Note
- Put Tick on image Thumbnail and snippet. Because we will display popular Post's image with summary.
- You can display between 1 to 10 posts. So choose 7 posts or more.
Step 4 Now Save the "Popular Posts" Gadget.
Step 5 Click on -> Template -> Edit HTML
Step 6 Now Find this code ]]></b:skin> by pressing Ctrl + F
Step 6 Now Find this code ]]></b:skin> by pressing Ctrl + F
Step 7 Paste the below code Before/above ]]></b:skin>
/*-- Stunning Popular Post By http://www.bloggerspice.com--*/
.PopularPosts .item-title {
display:none;
}
.PopularPosts .widget-content ul li {
background:#FEFEFE;
border:1px solid #009999;
border-radius:10px;
float: left;
color:#999;
list-style: none outside none;
margin: 5px 0 0!important;
padding: 5px !important;
}
.PopularPosts .item-thumbnail {
margin: 3px !important;
}
.item-thumbnail img {
background:#111111;
border: 1px solid #191919;
height: 75px;
padding: 5px;
width: 250px;
border-radius:10px;
}
.item-thumbnail img:hover {
border:0px solid #009999;
}
Step 8 Now Save the widget.
3 comments
www.carriebradshawlied.com
Thank you!
bloggerspicebd@gmail.com