Stylizing Blogger Popular Post Widget with Css3
Popular Post is the important part of any blogger .Finally here one of the amazing and effective tweaked widget that we ever shared before. After customizing official Popular Post Widget for hours and testing out different CSS3 Stylize, We now have fully stylized Blogger 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 so much did customizing it .Have look at it Below
You can test out widget live on our Sidebar too
There are Multiple hover effect applied to the popular post widget image that brings a whole new life to the widget .Now simply follow the steps below to customize you blogger blogs popular post widget .
Step #1
Go to Blogger Dashboard >> > Template >>>Edit HTML .
Once done find the following code below.
To Find on click template code Press Ctrl and F
After this show a search box on Template
Search Below code
Once you find it ,Follow the next Step
Step # 2 Add The code
/*--- 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;
}