Popular posts is a widget offered by blog writer which reveals a list of most considered content from your blog site.We have already distributed three hacks about popular posts widget. Popular Post is show’s the top click Post’s by the Visitor’s.Here i share a Stylish popular Publish Gadget for your blog site writer blog.this Icons Helps to Entice the People by Fashionable and Amazing look in your blogger Sidebars. this widget when any user hover on the image thumbnail of popular posts the spinning effect activated and rotates the thumbnail until the customer moves out from it.We will add this Technique with using genuine CSS3 i.e this will not impact the the loading speed of your blog.
Popular Posts is a widget which every good blog writer uses. From small weblogs to all big weblogs you can see Well-known Content gadget. It allows to reduce jump rate of your blog. The most read posts are displayed to let visitors know about other interesting posts or subjects they might like. This will let guests stay on your weblog site more time. This gadget is type of different from other popular widget, because it doesn’t only shows the popular post, but as well rotate when hovered on any of the pictures. There are many gadget designer personalize this gadget in different way. But the main problem is about popular post image. Because If you want to resize the image size then it will become cloud. So the remedy is JavaScript with CSS programming. Now you can able to increase your popular post image in any size. This widget created by Times of Blogging. You can easy to add this widget on your blog or site. Please follow this post and install it on your blog.
Square Popular Posts Widget with Rotating Effect in Blogger
Step-1 Go To Blogger Dashboard.
Step-2 Click on Layout.
Step-3 Click on Add Gadget.
Step-4 Select Popular Posts Widget.
Step-5 Check Mark Show thumbnail option.
Step-6 After Save Widget.
Step-7 Go To Blogger Dashboard>>Template>> Edit HTML.
Step-8 Find ]]></b:skin> tag.
Step-9 Paste the below given code just above ]]></b:skin>
.PopularPosts .item-title {
display:none;
}
.PopularPosts .widget-content ul li {
background: none repeat scroll 0 0 transparent;
float: right;
list-style: none outside none;
margin: 10px 0 0 !important;
padding: 0 !important;
}
.PopularPosts .item-thumbnail {
margin: 0 8px !important;
}
#PopularPosts1 img:hover{-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 0px rgba(255,0,0,.4), inset 0 0 0px rgba(255,255,255,1);-moz-box-shadow: 0 0 0px rgba(255,0,0,.4), inset 0 0 0px rgba(255,255,255,1);box-shadow: 0 0 0px rgba(255,0,0,.4), inset 0 0 0px rgba(255,255,255,1);}
.item-thumbnail img {
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
border: 3px solid #ccc;
height: 60px;
padding: 3px;
width: 60px;
}
Step-10 Now Save template and You are Done.
ليست هناك تعليقات:
إرسال تعليق