Flat popular post widget for Blogger
Codes for copy-
/*crawlist.net pop post label starts*/@import url(http://fonts.googleapis.com/css?family=Droid+Serif);
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF no-repeat scroll 5px 10px;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid #dcdcdc;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
-webkit-transition: all 1.5s ease;
-moz-transition: all 1.5s ease;
-o-transition: all 1.5s ease;
-ms-transition: all 1.5s ease;
transition: all 1.5s ease;
}
.popular-posts ul li:hover {
color:#222222;
background:#F9690E;
-webkit-transition: all 1.5s ease;
-moz-transition: all 1.5s ease;
-o-transition: all 1.5s ease;
-ms-transition: all 1.5s ease;
transition: all 1.5s ease;
}
.popular-posts ul li a
{
text-decoration:none;
font-size:16px;
color:#222222;
font-family: 'Droid Serif', serif;
}
.popular-posts ul li a:hover {
text-decoration:none;
color:#fff;
}/*crawlist.net pop post label ends*/
Shadowed popular post widget for Blogger
/*crawlist.net pop post label starts*/@import url(http://fonts.googleapis.com/css?family=Droid+Serif);
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #ffffff no-repeat scroll 5px 10px;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid #dddddd;
border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
-webkit-box-shadow: 0px 1px 5px rgba(0,0,0,.25) inset;
-moz-box-shadow: 0px 1px 5px rgba(0,0,0,.25) inset;
box-shadow: 0px 1px 5px rgba(0,0,0,.25) inset;
-webkit-transition: all 1.5s ease;
-moz-transition: all 1.5s ease;
-o-transition: all 1.5s ease;
-ms-transition: all 1.5s ease;
transition: all 1.5s ease;
}
.popular-posts ul li:hover {
border:1px solid #555555;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-webkit-box-shadow: 0px 0px 0px rgba(0,0,0,0) inset;
-moz-box-shadow: 0px 0px 0px rgba(0,0,0,0) inset;
box-shadow: 0px 0px 0px rgba(0,0,0,0) inset;
-webkit-transition: all 1.5s ease;
-moz-transition: all 1.5s ease;
-o-transition: all 1.5s ease;
-ms-transition: all 1.5s ease;
transition: all 1.5s ease;
}
.popular-posts ul li a
{
text-decoration:none;
font-size:16px;
font-family: 'Droid Serif', serif;
color:#333333;
}
.popular-posts ul li a:hover {
text-decoration:none;
color:#555555;
}/*crawlist.net pop post label ends*/
Colorful popular post widget for Blogger
Eye catchy colored, pop glossy designed with Gradient color, CSS3 transition, Google font.
Preview-
Codes for copy-
/*crawlist.net pop post label starts*/@import url(http://fonts.googleapis.com/css?family=Droid+Serif);
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid #dddddd;
-moz-box-shadow:1px 1px 2px #dcdcdc;
-web-kit-box-shadow: 1px 1px 2px #dcdcdc;
-goog-ms-box-shadow:1px 1px 2px #dcdcdc;
box-shadow:1px 1px 2px #dcdcdc;
border-radius:3px;
background:-webkit-gradient(
linear,
right bottom,
right bottom,
color-stop(0, #51CDD1),
color-stop(1, #FA73C8)
);
background-image: -o-linear-gradient(right bottom, #51CDD1 0%, #FA73C8 100%);
background-image: -moz-linear-gradient(right bottom, #51CDD1 0%, #FA73C8 100%);
background-image: -webkit-linear-gradient(right bottom, #51CDD1 0%, #FA73C8 100%);
background-image: -ms-linear-gradient(right bottom, #51CDD1 0%, #FA73C8 100%);
background-image: linear-gradient(to right bottom, #51CDD1 0%, #FA73C8 100%);
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
}
.popular-posts ul li:hover {
-moz-box-shadow:1px 1px 2px #dcdcdc;
-web-kit-box-shadow: 1px 1px 2px #dcdcdc;
-goog-ms-box-shadow:1px 1px 2px #dcdcdc;
box-shadow:2px 2px 4px #333333;
border:1px solid #ccc;
color:#fff;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
}
.popular-posts ul li a
{
text-decoration:none;
font-size:16px;
color:#ffffff;
font-family: 'Droid Serif', serif;
}
.popular-posts ul li a:hover {
text-decoration:none;
}/*crawlist.net pop post label ends*/
How to add in Blogger
This popular post widget set up have 3 steps. Read on-
Step 1: Setting up Popular post widget
- First log into your Blogger account, Select your Blog,
- Go to ‘Layout’ tab. From sidebar select ‘Add a gadget’,
- From pop up window select ‘Popular post’.
- From ‘Popular post’ menu select how may title will be shown (out of 10)
- And uncheck ‘Image thumbnail’ and ‘Text Snippet’.
- Save ‘Popular post’ widget and ‘Save template’
Step 2: Installing styling
- Go to ‘Template’ tab, Select ‘Edit HTML’,
- Now search (Using Ctrl+F or Cmd+F) for ]]></b:skin>
- Above ]]></b:skin> copy and paste any style of popular post widget’s code.
- Finally ‘Save Template’, And check out your custom popular post widget.
Compatibility
- All effect’s (Shadow, Color, Transition) are optimized for maximum support for all web browsers.
Any question, recommendation or feedback please let me know via comment. New custom popular post widget will be release soon stay touch. Chill…
