November 28, 2014

Friday, November 28, 2014
3 best Popular Post widget for Blogger
Blogger’s default Popular post widget is very simple, it just shows lines of titles. But this popular post widget can be customize by changing default CSS code of template. So I designed 3 different popular post widget with CSS and CSS3 codes. All you need to do is embed your favorite popular post widget codes in to your Blogger template. Let’s see how they look like and how to add them in your Blogger blog.


Flat popular post widget for Blogger


Very trendy designed, Flat color, CSS3 transition, Google font.

Preview-

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


Eye responsive, elegant designed with CSS3 transition, Google font.

Preview-

Shadowed 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: #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-

Colorful 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 {
    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…

0 comments:

Post a Comment

 
Copyright © 2013-16 Crawlist All Right Reserved
Designed By Me {K.Shazzad}