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