Stylizing Blogger Popular Post Widget With CSS3

Finally here we have one of the amazing tweaked widget that we ever shared before. After customizing Bloggers official popular post widget for hours and testing out different CSS3 stylize, we now have fully customize/stylized Bloggers default popular post widget that features an elegant bordering with image circular image hover effects. I am sure you guys would like the widget as much as i did customizing it. Have a look at it below.
 



You can test out the widget live on our sidebar too.

Stylizing Blogger Popular Post Widget


There are multiple hover effects applied to the popular post widget image that brings a whole new life to the widget. Now simply follow the steps below to customize your blogger blogs popular post widget.

Stylizing Blogger Popular Post Widget

Step #1 Open Edit HTML


Go to Blogger Dashboard >> Template >> Edit HTML and backup your template.

Once done find the following code below:

]]</b:skin>


Once you find it, follow the next step,


Step #2 Add the code


Now we'll override the default popular post widget code (override it) with our own new style. Paste the following code just above the code you found in step #1

    /*--- BeH Popular Posts Widget Customized--- */
   
.popular-posts .item-thumbnail img:hover {
   opacity: 1;

   /*Reflection*/
  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));

   /*Glow*/
  -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
  -moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
  box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
-webkit-transform: rotate(-7deg);
    -moz-transform: rotate(-7deg);
    -o-transform: rotate(-7deg);
}

.popular-posts .item-thumbnail img {
 
    border-radius: 100px 100px 100px 100px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    border: 5px solid #eee;

    /*Transition*/
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
 }

.popular-posts ul li {
margin: 12px;
    opacity: 0.8;
    border: 5px solid #eee;
 border-radius: 100px 100px 100px 100px;
    /*Transition*/
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;

    /*Reflection*/

}
.popular-posts a{
font-size: 13px solid;

}

 Help Desk


Thats all! Really hoped that you guys liked the effort. Would love to hear from you above the customization in the comment section below. And yea, do give it a 'like' :)

You may now like to read:

COMMENTS

.
Name

AdSense affiliate marketing Announcement AskHassam Blogger Blogging Tips Blogosphere News Bluehost Building Traffic BuySellAds Contest Customizations Disqus Tutorials Domain Hosting Drop Down Menus eBook Email Marketing Facebook Tutorials Feedburner Freelancing Giveaway Google Google Analytics Google Gmail Google Plus Tricks Guest Post HowTo Interview Making Money Online Monetization Motivation PayPal Pinterest Plugins review SEO Slideshare Social Media Top Lists Twitter Wordpress YouTube
false
ltr
item
BloggingeHow | Making Blogging Simpler: Stylizing Blogger Popular Post Widget With CSS3
Stylizing Blogger Popular Post Widget With CSS3
http://3.bp.blogspot.com/-NLhjTH93VbM/UfMeNsQM3OI/AAAAAAAALZ4/kcZPYLFfvhE/s1600/blogger+popoular+post+widget.png
http://3.bp.blogspot.com/-NLhjTH93VbM/UfMeNsQM3OI/AAAAAAAALZ4/kcZPYLFfvhE/s72-c/blogger+popoular+post+widget.png
BloggingeHow | Making Blogging Simpler
http://www.bloggingehow.com/2012/10/stylizing-blogger-popular-post-widget.html
http://www.bloggingehow.com/
http://www.bloggingehow.com/
http://www.bloggingehow.com/2012/10/stylizing-blogger-popular-post-widget.html
true
5839591175544873606
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy
Resources

Tools of the Trade