Tuesday, April 17, 2012

Multi Colored Popular Post Widget For Blogger


We usually show Popular post widget to our readers so that they can enjoy the most popular post of our blog. But this article is not for Normal popular post widget rather how you can add multi colored popular post widget in Blogger. The multi colored popular post widget looks really awesome. It has also three displaying modes: display title only, display title with image thumbnail. I hope you will enjoy the widget


Add Multi Colored Popular Post Widget In Blogger/Blogspot

  • Go To Blogger Dashboard → Design → Edit HTML



  • Now Find the following code using CTRL+F



  • /* Variable definitions
    ====================

  • Copy and Paste the Code the code shown below just after it



  • <Group description="PopularPosts Backgrounds" selector="#PopularPosts1">
    <Variable name="PopularPosts.background.color1" description="background color1" type="color" default="#fa4242" value="#ff4c54"/>
    <Variable name="PopularPosts.background.color2" description="background color2" type="color" default="#ee6107" value="#ff764c"/>
    <Variable name="PopularPosts.background.color3" description="background color3" type="color" default="#f0f" value="#ffde4c"/>
    <Variable name="PopularPosts.background.color4" description="background color4" type="color" default="#ff0" value="#c7f25f"/>
    <Variable name="PopularPosts.background.color5" description="background color5" type="color" default="#0ff" value="#33c9f7"/>
    <Variable name="PopularPosts.background.color6" description="background color6" type="color" default="#ff0" value="#7ee3c7"/>
    <Variable name="PopularPosts.background.color7" description="background color7" type="color" default="#ff0" value="#f6993d"/>
    </Group>

  • Now Find the code shown below using [ctrl+F]






  • ]]></b:skin>

  • Now Paste the Code shown below just before or above it






  • #PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
    #PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
    #PopularPosts1 ul li:first-child{background:$(PopularPosts.background.color1);width:90%}
    #PopularPosts1 ul li:first-child:after{content:"1"}
    #PopularPosts1 ul li:first-child + li{background:$(PopularPosts.background.color2);width:85%}
    #PopularPosts1 ul li:first-child + li:after{content:"2"}
    #PopularPosts1 ul li:first-child + li + li{background:$(PopularPosts.background.color3);width:80%}
    #PopularPosts1 ul li:first-child + li + li:after{content:"3"}
    #PopularPosts1 ul li:first-child + li + li + li{background:$(PopularPosts.background.color4);width:75%}
    #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
    #PopularPosts1 ul li:first-child + li + li + li + li{background:$(PopularPosts.background.color5);width:70%}
    #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
    #PopularPosts1 ul li:first-child + li + li + li + li +li{background:$(PopularPosts.background.color6);width:65%}
    #PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
    #PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:$(PopularPosts.background.color7);width:60%}
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
    #PopularPosts1 ul li:first-child:after,
    #PopularPosts1 ul li:first-child + li:after,
    #PopularPosts1 ul li:first-child + li + li:after,
    #PopularPosts1 ul li:first-child + li + li + li:after,
    #PopularPosts1 ul li:first-child + li + li + li + li:after,
    #PopularPosts1 ul li:first-child + li + li + li + li + li:after,
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
    #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:40px;height:40px}
    #PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}
    #PopularPosts1 ul li a:hover{color:#222;text-decoration:none}

  • Now Find the code shown below using F3



  • <b:section class='sidebar' id='sidebar' preferred='yes'>

  • Now Paste the Code Shown Below just below/after it



  • <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'>
    <ul>
    <b:loop values='data:posts' var='post'>
    <li>
    <b:if cond='data:showThumbnails == &quot;false&quot;'>
    <b:if cond='data:showSnippets == &quot;false&quot;'>
    <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
    <b:else/>
    <a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
    </b:if>
    <b:else/>
    <b:if cond='data:showSnippets == &quot;false&quot;'>
    <b:if cond='data:post.thumbnail'>
    <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
    <b:else/>
    <img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2pJxGabhfR0f0AeFbYbw_NV17Onr5HzzXRdMkZrGynScIm8uPPToh1ANrNy3V1ryHMsUcEd_O_k12TvZFO8eg43xKhe3ECM2LPfaU1-L7Fxz-B-ECgh6k3mmJER-OtExL6YUYqrEaI94/s1600/defaultimage.jpg'/>
    </b:if>
    <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
    <div class='clear'/>
    <b:else/>
    <b:if cond='data:post.thumbnail'>
    <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
    <b:else/>
    <img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2pJxGabhfR0f0AeFbYbw_NV17Onr5HzzXRdMkZrGynScIm8uPPToh1ANrNy3V1ryHMsUcEd_O_k12TvZFO8eg43xKhe3ECM2LPfaU1-L7Fxz-B-ECgh6k3mmJER-OtExL6YUYqrEaI94/s1600/defaultimage.jpg'/>
    </b:if>
    <a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
    <div class='clear'/>
    </b:if>
    </b:if>
    </li>
    </b:loop>
    </ul>
    </div>
    </b:includable>
    </b:widget>

  • Now save the template and done






  • Settings

  • Now got o Page Element You will find out a popular widget



  • Click on the edit link of Popular Posts widget



  • Select "Display Up To 7 Posts"



  • Now Save the widget



  • Change Color


    Go To Design → Template Designer → Advanced → PopularPostsBackground

    Please like our Facebook Page or Follow us on Twitter or Subscribe


    Please comment here if you face any problem. Take only 10 seconds to share the article if you like

    0 comments:

    Click Here To add Comment