Popular posts is a widget provided by blogger which reveals a list of most considered content from your weblog site. Nowadays We are going to discuss How to add rotating popular posts widget to blogger blog, in this widget when any user hover on the image thumbnail of popular content the rotating impact triggered and moves the thumbnail until the customer moves out from it. Generally when readers like a post they frequently visit that post and Blogger Popular post widget pick that post by the generating importance. In blogger default popular post with we cannot change but by using CSS3 we can easily operate the standard gadget. In the same way I have used CSS rule for adjusting this popular post widget. Earlier I have released various popular post widget. But this popular post is little different with fill color and hover effect. A Popular Posts gadget reveals the list of most well-known content on your weblog site along with an picture thumbnail and a small of the post.
Popular Posts is a widget which every good blogger uses. From small weblogs to all big weblogs you can see Popular Content gadget. It helps to reduce jump rate of your weblog site. I have already added three popular posts widget in my blog. The widget we will add shows the Thumbnail and Post Title when page is fully loaded. When hovered over, a bouncing snippet effect takes place. Popular post gadget is already given by the blog writer but here we are providing it for you in once again way.we are offering it here with rabbit float effect this gadget is simply CSS based and it's very simple to add it to your blog. In this tutorial I will show you Popular Posts Widget with Hover Effect for Blogger. Follow the steps below to continue to the tutorial.
Popular Posts Widget with Hover Effect for Blogger
Step-1 Go to your Blogger Dashboard.
Step-2 Go to Layout.
Step-4 Select Popular Posts Widget.
Step-5 Now you have checked image thumbnail and snippet box.
Step-7 Go To Blogger Dashboard>>Template>> Edit HTML.
Step-8 Find this tag ]]></b:skin>.
Step-9 Paste the below given code just above ]]></b:skin>
/* Popular Post Customization by hackpower.org */
.PopularPosts .widget-content ul li{padding:0;position:relative}
.item-snippet {font-size: 90%;line-height: 1.2em;position: absolute;width: 230px;background-color: whiteSmoke;padding: 7px;border-top: 2px solid #FF0202;z-index: 2;left: 300px;top: 60%;height: 4.5em!important;visibility: hidden;opacity: 0;transition: all 0.6s cubic-bezier(1,2,0,0) 0s;-moz-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;-webkit-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;-o-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;}
.PopularPosts .widget-content ul li:hover .item-snippet{left:60px;opacity:1;visibility:visible}
.PopularPosts img{width:50px;height:50px}
.PopularPosts .item-title{font-family:'Open Sans Condensed',"Arial Narrow",Arial,sans-serif;font-size:125%}
/* Popular Post Customization by hackpower.org */
Step-10 Now Save Template and You are Done.
ليست هناك تعليقات:
إرسال تعليق