thn google
+13,700
twitter big logo icone 5336 48
1,755
Advertisers Tag Here
Join over 45,931 Daily Readers, Users, Subscribers
..who get notifications via Emails !
Jobs

3 Sept 2012

MULTI-COLORED POPULAR POST WIDGET~ Updated

Labels: , , , ,

Multi-colored popular post widget


Go to Design or Template----> Edit Html

  • 3.Expand widgets  box.
  • Find the code 
/* Variable definitions 
   ====================

  • paste the below code after the above code.


<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>

  • Find the below code using ctrl+f
]]></b:skin>

  • paste the below code above ]]></b:skin>
#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}

  • search the below code
<b:section class='sidebar' id='sidebar' preferred='yes'>

  • paste the below code just after above code
<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/AVvXsEhV3xb6Z4hDIxd0yOKk_A_UU5c8gjXGiU1s_O2JGsO8_VdM86oqBjP7U7HZxWo3qJTInuLasNSosAZU5HKUxjXERndUWPEQ7uxOfEJ4yrfGjKhTkHwPOd2ffNtUjhFDAqDCmWp7Bw1BCCE/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/AVvXsEhV3xb6Z4hDIxd0yOKk_A_UU5c8gjXGiU1s_O2JGsO8_VdM86oqBjP7U7HZxWo3qJTInuLasNSosAZU5HKUxjXERndUWPEQ7uxOfEJ4yrfGjKhTkHwPOd2ffNtUjhFDAqDCmWp7Bw1BCCE/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>