CSS3 Popular Posts Widget with fill color and hover effect

CSS3 Popular Posts Widget with fill color and hover effect

2
data:blog.title
popular posts

Hi guys every blogger knows how important is popular post. Because it indicate that which posts are most popular in a blog. 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 manipulate the default widget. Similarly I have used CSS code for manipulating 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. Those who wants to keep improve blog loading speed they can use it. Because this popular posts widget display only Popular posts links with fill color as well as hover effect. You can change the color if you like.  using too much image blog loading time may increase. So using this widget would be wise decision. I hope you and your blog visitors would like it. So please follow the tutorial to install this popular widget into 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: Uncheck image Thumbnail and snippet. Because we will display only popular Post's links so we don't need that bulky image and unnecessary intro text.


most viewed posts


Step 4 Now Save the  "Popular Posts" Gadget.

Step 5 Now click on Edit HTML-> Unfold code  

Step 6 Now Find this code ]]></b:skin> by pressing  Ctrl + F

Step 7 Paste the below code  Before/above ]]></b:skin>  


/*CSS Popular Posts by http://www.bloggerspice.com*/
#PopularPosts1{
border: 0px solid #000000; /*Main Border Color */
margin: 0;
}
#PopularPosts1 ul{
margin: 0;
padding: 0;
list-style-type: none;
font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}
#PopularPosts1 a{
display: block;
margin: 0;
padding: 3px 5px 3px 5px;
text-decoration: none;
color: #ffffff;
background-color: #005C91;
width:300px;
border-bottom: 1px solid #90bade;
border-left: 5px solid #1958b7;
border-right: 5px solid #1958b7;
list-style-type:none;
}
#PopularPosts1 a:hover {
background-color: #04BDFA;
border-left-color: #1c64d1; /*Left border color On Hover*/
border-right-color: #1c64d1; /*Right border color On Hover*/
}

Step 8 Now simply save your template.

Customization

  • Change #005C91 for Popular Post widget background color
  • Change 300px for width of the widget
  • Change #04BDFA for Popular Post widget hover color
  • Change #1c64d1 for left and right border color

If you need any further help then feel free to contact with me. I will help you to solve the issue. Happy blogging!!!
CSS3 Popular Posts Widget with fill color and hover effect
4 Stars stars - "CSS3 Popular Posts Widget with fill color and hover effect " Hi guys every blogger knows how important is popular post. Because it indicate that which post...

Hello Brother I need your help .. i got complaint from my visitors that remove that quick edit option below every widget so i have tried but it is not getting hide how to hide that .....

Brother Nauman to remove quick edit please follow the tutorial from below link--

http://www.bloggerspice.com/2013/01/remove-quickedit-icon-from-blogger_9.html

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *