New Popular Post Widget, For Blogger!!!

[UPDATED] Added a cool horizontal version, and a cooler opacity effect!! (And a couple of grammar corrections).

 
Bored with Blogger's Popular Posts design? I have a new one!!

Nope, no heavy javascript codes. It's made with the blazing fast CSS3 style.

Works best with: Chrome 18+, Mozilla 20+, Opera 11+.
Compatible with all blogger templates, except Dynamic Views.


Let's put it in your blog!

It's simple, just follow these steps:

Vertical Version

For demo, just check out my right sidebar.

First, go to Layout > Popular Posts > Edit

Uncheck "image thumbnail".

After that, go to Template > Edit HTML

And find this line:

]]></b:skin>

And above it, paste this code:

/* Made By Akhyar Kamili @akhyarkamili  */
/* Free to use and modify */
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {
background: transparent;
list-style-type: none;
margin:0 0 5px 0px;
padding: 0px 5px 5px 5px !important;
border: 1px solid #aaaadd;
border-radius:2px;
-moz-border-radius:2px;
-webkit-border-radius:2px;

}
.popular-posts ul li .item-title {
    margin-top: 2px;
    padding:2px;
}
.popular-posts ul li .item-title a {
    display:block;
    padding: 2px;
    min-width: 160px;
    background-color: #c6f6c6;
    border-left: 3px solid #c6c6ff;
    padding-left: 8px;
    border-radius:2px;
    webkit-border-radius:2px;
    moz-border-radius:2px;
}
.popular-posts ul li .item-title a:hover {
    border-left-color: #c6c6cf;
    text-decoration: none;
    background-color: #b6ffb6;
}
.item-snippet {
     display:block;
    -webkit-font-smoothing: antialiased;
     width:160px;
     height: 0px;
     margin-left: 5px;
     opacity: 0;
     transition: all 0.5s;
     /*For Safari & Chrome */
     -webkit-transition: all 0.5s;
    /* For Mozilla Firefox */
     -moz-transition: all 0.5s;
    /* For Opera */
     -o-transition: all 0.5s;

     visibility: hidden;
}
.PopularPosts .widget-content ul li:hover .item-snippet{
    height:100px;
    opacity: 1;
    visibility: visible;
}
.popular-posts ul li:hover {
border:1px solid #ddddff;
}

Horizontal Version

You want a cool horizontal version? Here it is!

First, go to Layout > Popular Posts > Edit 

Uncheck "image thumbnail".
Check "snippet".

In the "Display up until:" option, select '4' posts.

Click Save.

Next Step:

Go to Template > Edit HTML 
Click proceed if prompted.

find this line:

]]></b:skin>

Just above it, paste the following code:

/* Made By Akhyar Kamili @akhyarkamili  */
/* Free to use and modify */

.popular-posts li{
float:left;
display:inline-block;
min-width:180px;
max-width:200px;
background-color: transparent;
margin: 10px !important;
padding: 0px 5px 0px 5px !important;
border: 1px solid #aaaadd;
border-radius:2px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
}
.popular-posts ul li:hover {
border:1px solid #ddddff;
}
.popular-posts ul li .item-title {
    margin-top: 2px;
    padding:2px;
}
.popular-posts ul li .item-title a {
    display:block;
    min-width: 120px;
    max-width:160px;
    background-color: #c6f6c6;
    border-left: 3px solid #c6c6ff !important;
    border-radius:2px;
    webkit-border-radius:2px;
    moz-border-radius:2px;
}
.popular-posts ul li:hover .item-title a{
    border-left-color: #c6c6cf !important;
    text-decoration: none;
    background-color: #b6ffb6;
}
.popular-posts li .item-snippet {
     display:inline-block;
     width:200px;
     height: 0px;
     padding-left: 5px;
     opacity: 0;
     transition: all 0.5s;
     /*For Safari & Chrome */
     -webkit-transition: all 0.5s;
    /* For Mozilla Firefox */
     -moz-transition: all 0.5s;
    /* For Opera */
     -o-transition: all 0.5s;

     visibility: hidden;
}
.PopularPosts .widget-content ul li:hover .item-snippet{
    height:100px;
    opacity: 1;
    visibility: visible;
}
.popular-posts ul li:hover {
border:1px solid #ddddff;
}

Note: Header only.

For Live Demo: Click http://livedesignexprmnt.blogspot.com/

There you have it, your cool new popular posts widget!!

Thanks for reading, and Good Luck!