Blogger Popular Post Fancy Widget With Simple editing

Finally here I have one of the amazing Blogger widget that I ever shared before. Customizing Bloggers official popular post widget for a considerable length of time and trying out distinctive CSS3 stylize, I now have thoroughly customized Bloggers default notorious post widget that headlines a rich bordering with representation roundabout visualization.

I am sure you feels similar to the widget the same as i did altering it. Have a look at it below:

Step #1 Open Edit HTML

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

Backing up your Tempelate:
Copy your existing tempelate HTML by pressing ctrl+A follwed up with ctrl+C and then save it in a notepad, so that in case if you did sonething wrong, you will have your previous tempelate saved.

Once done with backing up,
find the following code below:

]]</b:skin>

(you can find it by pressing ctrl+F)

Once you find it, follow the next step,

Step #2 Add the code

Now we'll change the default popular post widget code with our own new style.
Paste the following code just above that code ]]</b:skin> you found in step #1

Code starts below:

    /*--- 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;

}

Code ends above

Yuppie...

Thats all my friends.!
I am also using this trick so no need to hesitate to use it.
This fancy widget will attract the visitors and will also increase blog traffic for you!
I Really hoped that you guys liked this effort.
I would love to hear from you above the customization in the comment section below. And yeah, do give it a 'like' :)
Enjoy Blogging..

Tweet