7 Style for Popular Post Widget In Blogger ~ GrowTechInfo.com

In this post I am presenting seven style for popular post widget in blogger. First you need to add Popular post widget in blog. For that, Go to Layout >Add a Gedget, then select Popular Post widget. Then uncheck image thumbnail and snippet. If you all ready have a popular post widget then uncheck image thumbnail and snippet.

Next, some time header of popular post outside the div where we apply style. So you need to put this header under that div. For that, Go to Template > Edit HTML > Check Expand Widget Template and Search with the name given to Popular widget. Which is look like this,


<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>  
  <b:if cond='data:title'><h2><data:title/></h2></b:if>        
  <div class='widget-content popular-posts'>
    .    
    .
    .
    .
  </div>
</b:includable>
</b:widget>

<b:if cond='data:title'><h2><data:title/></h2></b:if> if this code is out side the div display in yellow then cut and paste inside that div.
Now when you apply style to widget then this will apply to header of widget also.
Next, find below code

]]></b:skin>

and copy the css code of style and paste above it.

Style 1

.popular-posts {
    background-color:#efefef;
    border-radious:5px;
    -webkit-box-shadow: 0px 3px 5px 1px #dadada;
    box-shadow: 0px 3px 5px 1px #dadada;
    padding:10px 10px 10px 15px;
    font-family:Georgia, "Times New Roman", Times, serif;
}
.popular-posts h2 {
    font-family:Tahoma, Geneva, sans-serif;
    height:25px;
    margin-top:0px;
    margin-left:20px;
    margin-bottom:15px;
    font-size:14px;
    color:#000;
}
.popular-posts ul li {
    list-style:disc;
    margin-bottom:5px;
}
.popular-posts ul li a {
    color:#000;
}
.popular-posts ul li a:hover {
    color:blue;
    text-decoration:underline;
}

Style 2

.popular-posts {
    background-color:#fff;
    border-radious:5px;
    -webkit-box-shadow: 0px 3px 5px 1px #dadada;
    box-shadow: 0px 3px 5px 1px #dadada;
}
.popular-posts h2 {
    font-family:Tahoma, Geneva, sans-serif;
    margin-top:1px;
    height:25px;
    margin-bottom:10px;
    font-size:14px;
    color:#f4f4f4;
    background-color:#5a77a0;
    height:25px;
    border-bottom:#163b70 solid 1px;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
    padding:8px 0 0 20px;
}
.popular-posts ul {
    margin:10px 10px 15px 10px;
    font-family:Georgia, "Times New Roman", Times, serif;
}
.popular-posts ul li {
    margin-bottom:5px;
    vertical-align:middle;
    list-style:square;
}
.popular-posts ul li a {
    color:#000;
}
.popular-posts ul li a:hover {
    color:blue;
    text-decoration:underline;
}

Style 3

.popular-posts {
    background-color:#fff;
    border-radious:5px;
    -webkit-box-shadow: 0px 3px 5px 1px #dadada;
    box-shadow: 0px 3px 5px 1px #dadada;
    padding:0px;
}
.popular-posts h2 {
    font-family:Tahoma, Geneva, sans-serif;
    margin-top:1px;
    height:25px;
    margin-bottom:10px;
    font-size:14px;
    color:#f4f4f4;
    background-color:#5a77a0;
    height:25px;
    border-bottom:#163b70 solid 1px;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
    padding:8px 0 0 20px;
}
.popular-posts ul {
    margin:10px 0 15px 0px;
    font-family:Georgia, "Times New Roman", Times, serif;
    list-style-type: none;
}
.popular-posts ul li {
    padding-left:28px !important;
    margin-bottom:5px;
    margin-left:-15px;
}
.popular-posts ul li:nth-child(odd) {
    background-color:#f4f4f4;
}
.popular-posts ul li a {
    color:#000;
}
.popular-posts ul li a:hover {
    color:blue;
    text-decoration:underline;
}

Style 4

.popular-posts {
    padding:0px;
}
.popular-posts h2 {
    font-family:Tahoma, Geneva, sans-serif;
    color:#000;
    margin-top:1px;
    height:25px;
    margin-bottom:10px;
    font-size:14px;
    height:25px;
    padding-top:8px;
    text-align:center;
}
.popular-posts ul {
    margin:10px 0 15px 0px;
    font-family:Georgia, "Times New Roman", Times, serif;
    list-style-type: none;
}
.popular-posts ul li {
    padding-left:20px !important;
    margin-bottom:5px;
    margin-left:-15px;
    border:#dfdfdf solid 1px;
    border-radius:5px;
}
.popular-posts ul li:hover {
    background-color:#f4f4f4;
}
.popular-posts ul li a {
    color:#000;
    text-decoration:none;
}
.popular-posts ul li a:hover {
    text-decoration:none;
}

Style 5

.popular-posts {
    padding:0px;
}
.popular-posts h2 {
    font-family:Tahoma, Geneva, sans-serif;
    color:#000;
    margin-top:1px;
    height:25px;
    margin-bottom:10px;
    font-size:14px;
    height:25px;
    padding-top:8px;
    padding-left:28px;
}
.popular-posts ul {
    margin:10px 0 15px 0px;
    font-family:Georgia, "Times New Roman", Times, serif;
    list-style-type: none;
}
.popular-posts ul li {
    padding-left:20px !important;
    margin-bottom:10px;
    margin-left:-15px;
    border:#dfdfdf solid 1px;
    background-color:#f4f4f4;
    -webkit-box-shadow: 0px 3px 5px 1px #dadada;
    box-shadow: 0px 3px 5px 1px #dadada;
    list-style:none;
}
.popular-posts ul li:hover {
    -webkit-box-shadow: 0px 0px 0px 0px #dadada;
    box-shadow: 0px 0px 0px 0px #dadada;
}
.popular-posts ul li a {
    color:#000;
    text-decoration:none;
}
.popular-posts ul li a:hover {
    text-decoration:none;
}

Style 6

.popular-posts {
    padding:0px;
}
.popular-posts h2 {
    font-family:Tahoma, Geneva, sans-serif;
    color:#000;
    margin-top:1px;
    height:25px;
    margin-bottom:10px;
    font-size:14px;
    height:25px;
    padding-top:8px;
    padding-left:28px;
}
.popular-posts ul {
    margin:10px 0 15px 0px;
    font-family:Georgia, "Times New Roman", Times, serif;
    list-style-type: none;
}
.popular-posts ul li {
    margin-bottom:10px;
    margin-left:-15px;
    list-style:disc;
    border-bottom:#dedede solid 1px;
}
.popular-posts ul li:hover {
    list-style:circle;
}
.popular-posts ul li a {
    color:blue;
    text-decoration:none;
}
.popular-posts ul li a:hover {
    text-decoration:underline;
    color:orange;
}

Style 7

.popular-posts {
    padding:0px;
}
.popular-posts h2 {
    font-family:Tahoma, Geneva, sans-serif;
    color:#000;
    margin-top:1px;
    height:25px;
    margin-bottom:10px;
    font-size:14px;
    height:25px;
    padding-top:8px;
    padding-left:28px;
}
.popular-posts ul {
    margin:10px 0 15px 0px;
    font-family:Georgia, "Times New Roman", Times, serif;
    list-style-type: none;
}
.popular-posts ul li {
    padding-top:15px !important;
    padding-bottom:15px !important;
    padding-left:30px !important;
    margin-left:-15px;
    background: #ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRKZIrHyBRgy3if7ErQDB6heX5o9S17oMT6o5I1uD5pOff01222Mqq_gSDfamSC3ws81HCJp8x3j66paKNKTJGnRFrxcDqOtn48iK1vVATTt0agFpRq_A2ottl3-s1sJMiu2kNW3OHR-4/h120/asterisk_orange.png) no-repeat 0 10px;
    border-bottom:#999 dotted 2px;
}
.popular-posts ul li:hover {
    background: #ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaErK7mHNqRTe4Q2_njIQirjLeOCpmtPAFIDVVwEm-sGUPItTv3P7yZ7JmLnO-xFWHajD5dqoWwhPPHakqbA70zMKLjeEUO0bUSC_N9eTrwt_j_vm8rx08YkeRlrJZrujl9DEyRofPLqs/h120/asterisk_yellow.png) no-repeat 0 10px;
    background-color:#f9f9f9;
}
.popular-posts ul li a {
    color:#000;
    text-decoration:none;
}
.popular-posts ul li a:hover {
    text-decoration:none;
}

If you have any problem then feel free to ask.

Monday, January 14, 2013