Sunday, 28 July 2013

Popular posts: add a customized popular posts widget to blogger

customized popular posts widget
بِسْمِ اللَّهِ الرَّحْمَـٰنِ الرَّحِيم
Start with the name of Allah the most merciful and the most beneficent. Popular posts widget is a very simple widget, but I have unique type of popular posts widget. In this popular posts widget have not any rocket science I only customized this widget via CSS. I don't think that you saw this customized popular posts widget anywhere, if you saw this widget so it's being good but if you can't see customized popular posts widget so don't worry I am also providing you the demo of customized popular posts widget.

You like this customized popular widget? If you want to add this type of popular widget to your blog so you are at right place.
  • also read:  

 Adding a customized popular posts widget to blogger

  • Go to blogger,
  • go to template >> edit HTML,
  • now paste the below code just above ]]></b:skin> tag.
.popular-posts {
border:2px dotted #6BB5FF;
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, .4);
box-shadow: 0 1px 5px rgba(0, 0, 0, .4);
}
.PopularPosts .item-thumbnail img {
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
border:3px solid #6BB5FF;
}
.popular-posts ul li:hover {
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
border:2px dotted #6BB5FF;
font-weight: 300;
font-size:13px;
}

.popular-posts ul li a:hover {
text-decoration:blink;
}
#rb-form iframe{

background:#ffffff url(http://i1175.photobucket.com/albums/r628/realonekazz/priestblack.jpg
) repeat-x;
border:1px solid #ddd;
-moz-border-radius:6px;
-webkit-border-radius:6px;
box-shadow: 5px 5px 5px #CCCCCC;
padding:5px;
font:normal 12pt "ms sans serif", Arial;
color:#ffffff;
width:560px; height:215px !important;
}
#rb-form a{
color:#fff;
}
#PopularPosts1 {    max-width: 300px}
#PopularPosts1 dd {    float: left;    border-bottom: none;    margin: 8px 8px 0 8px;    background: none;    display: block;    padding: 0}
#PopularPosts1 img {    -webkit-transition: all 0.5s ease;    -moz-transition: all 0.5s ease;    transition: all 0.5s ease;    padding: 4px;    background: #eee;    background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));    background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);    -webkit-border-radius: 4px;    -moz-border-radius: 4px;    border-radius: 4px;    -webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);    -moz-box-shadow: 0 0 3px rgba(0,0,0,.7);    box-shadow: 0 0 3px rgba(0,0,0,.7);}
#PopularPosts1 img:hover {    -moz-transform: scale(1.2) rotate(-350deg);    -webkit-transform: scale(1.2) rotate(-350deg);    -o-transform: scale(1.2) rotate(-350deg);    -ms-transform: scale(1.2) rotate(-350deg);    transform: scale(1.2) rotate(-350deg);    -webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);    -moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);    box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);}

Still remaining:

Go to layout >> add a gadget >> select popular post and click to save.
Customized popular posts widget has been added to your blog....

Last word:

I spent my too much of time on it only 4 my blog visitors and I will be happy when you share this customized popular posts article with your friends and with others.

Do you Like this Article?

rss twitter facebook
Subscribe us and get daily updates directly to your email inbox.
We will not share you email with anyone so you don't have to worry.

No comments:

Post a Comment

Subscribe this blog and get daily this blog articles to your email.