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..
