4 Stylish Custom Popular Posts Widgets to Blogger

Popular posts widget is one of the most commonly used widgets on each and every blog. Blogger has its own default popular posts widget for its blogs but this widget is not very attractive. It displays a simple list of popular posts without any customization in it.. For this reason it looks very ugly and effects the whole design of the blog. But one good thing about this widget is that it can be easily customized by using CSS code. In this post we will discuss 4 different styles for customizing default popular posts widget in blogger.   

Adding popular posts widget to blogger:
• Go to your blogger dashboard.
• Select Template option.
• Select Edit HTML.
• In the template code find ]]></b:skin>
• Just above it paste code of one of the following popular posts widget and save the template.

Style A:

Code (Style A):

.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:5px;

background: rgb(44,83,158); /* Old browsers */

background: -moz-linear-gradient(top,  rgba(44,83,158,1) 0%, rgba(44,83,158,1) 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(44,83,158,1)), color-stop(100%,rgba(44,83,158,1))); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top,  rgba(44,83,158,1) 0%,rgba(44,83,158,1) 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top,  rgba(44,83,158,1) 0%,rgba(44,83,158,1) 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top,  rgba(44,83,158,1) 0%,rgba(44,83,158,1) 100%); /* IE10+ */

background: linear-gradient(to bottom,  rgba(44,83,158,1) 0%,rgba(44,83,158,1) 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c539e', endColorstr='#2c539e',GradientType=0 ); /* IE6-9 */

    }

    .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 #333333;

color:#fff;

    }

.popular-posts ul li a

{

text-decoration:none;

font:16px Georgia, verdana;

color:#ffffff;

}

    .popular-posts ul li a:hover {

    text-decoration:none;

    }

Style B:

Code (Style B):

.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:7px;

    -moz-border-radius:7px;

    -webkit-border-radius:7px;

    }

    .popular-posts ul li:hover {

        border:1px solid #555555;

    }

.popular-posts ul li a

{

text-decoration:none;

font:16px Georgia, verdana;

color:#333333;

}

    .popular-posts ul li a:hover {

    text-decoration:none;

    color:#555555;

    }

Style C:

Code (Style C):

.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:10px;

    -moz-border-radius:10px;

    -webkit-border-radius:10px;

    }

    .popular-posts ul li:hover {

    background:#FF8040;

    }

.popular-posts ul li a

{

text-decoration:none;

font:14px Georgia, verdana;

color:#222222;

}

    .popular-posts ul li a:hover {

    text-decoration:none;

    color:#fff;

    }

Style D:

Code (Style D):

.popular-posts ul

{

padding-left:0px;

    -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: 1px solid #dcdcdc;

}

    .popular-posts ul li {

    list-style-type: none;

    margin:0 0 5px 0px;

    padding:5px 5px 5px 20px !important;

   border-bottom:1px dashed #dcdcdc;

       background:#ffffff;

    }

  .popular-posts ul li a

{

text-decoration:none;

font:16px georgia,verdana;

color:#3d87c4;

}

    .popular-posts ul li a:hover {

    text-decoration:none;

    color:#333333;

    }

How to Add Sticky Notification bar to Blogger

Sticky Notification Bar for Blogger

Sticky Notification bar is the best way to highlight the latest topics or updates of any blog.It sits on the top of blog and display latest and popular stories of blog and attracts blog visitors to check out the popular articles of a blog without any headache.It also helps in increasing page views of the blog.This guide is about adding a simple CSS powered Sticky Notification bar to Blogger blogs.

Features of our sticky notification bar
1. Stylish and attractive design.
2. Inbuilt close button for hiding the bar.
3. Light weight CSS and small JavaScript code.
4. Easily customizable according to your blog design.
5. Easy integration with blogger blogs.
6. It do not slow blog`s loading speed.

Add this notification bar to blogger:
• Log in to your Blogger dashboard.
• Select your blog.
• Select Template.
• Click Edit Html and then click Proceed.
• Tick Expand Widgets.
• In the Template Code search for </body>
• Paste following code just above the </body>

<style>

#wcsticky-container {

  height:46px;

  width:100%;

 position:fixed;

z-index:99999;

  top: 0px;

left:0px;

 background:#222222;

    -moz-border-radius:5px;

    -webkit-border-radius:5px;

color:#ffffff;

 border-bottom:solid 2px green;

-moz-box-shadow:5px 5px 5px #333333;

-web-kit-box-shadow: 5px 5px 5px #333333;

-goog-ms-box-shadow: 5px 5px 5px #333333;

box-shadow:3px 2px 4px green;

}

#wc-stickylinks

{

color:green;

font:14px verdana;

margin-top:12px;

margin-left:20px;

text-decoration:none;

}

#wc-stickylinks a

{

font:14px verdana;

color:#ffffff;

text-decoration:none;

}

#wcstickyclose

{

float:right;

margin-top:15px;

margin-right:20px;

}

#wcstickyclose a

{

color:#ffffff;

text-decoration:none;

font:14px verdana;

padding:3px;

background:red;

border-radius:10px;

}

#wcsticky-main

{float:left;

}

</style>

<script language='JavaScript'>

function closesticky() {

document.getElementById("wcsticky-container").style.visibility = "hidden";

}

</script>

<div id='wcsticky-container'>

<div id="wcsticky-main">

<p id='wc-stickylinks'> Popular Topics:<a href='http://ablogfortuts.blogspot.com/search/label/money%20making'>  Make money online</a> | <a href='http://ablogfortuts.blogspot.com/2014/04/how-to-add-sticky-notification-bar-to.html'>Get this notification bar</a></p>

</div>

<div id="wcstickyclose">

<a href="javascript:closesticky();" >X</a>

</div>

  </div>

After pasting the code save the template and open your blog to see the new notification bar in action.

SOURCE