Smart Widgets: Rainbow colored popular posts

Screenshot

How to add rainbow colored popular posts

Login to Blogger.
Go To Blogger Dashboard -> Layout -> Add a gadget -> Popular Posts
Select 7 posts to display and click save...

Go To Blogger Dashboard -> Template -> Edit HTML

Press Ctrl+F in Template Editor search for " /* Variable definitions"

Just below it paste the below 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>

Press Ctrl+F in Template Editor search for "]]></b:skin>"

Just above it paste the below code,

#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} #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);}

Click the "jump to widget" button and select

'PopularPosts'

Delete the below code

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>

...................

..................

.................

</b:widget>

Now paste the below code instead for the 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 == "false"'>
        <b:if cond='data:showSnippets == "false"'>
         <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 == "false"'>
         <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/AVvXsEhb5r49k6awMmcpOrRqPbE7u_iK2__P78vH9M5EoYJVUkXyIvP-rk88iMTz08uM9v3_xChD9xbL5xJCQgNm2hc-EUAtV-zqqn-CJOftBFdZHe-0yqjxamsD_U_dmC1VrcJPF6zpyyH0Ees/s1600/default.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/AVvXsEhb5r49k6awMmcpOrRqPbE7u_iK2__P78vH9M5EoYJVUkXyIvP-rk88iMTz08uM9v3_xChD9xbL5xJCQgNm2hc-EUAtV-zqqn-CJOftBFdZHe-0yqjxamsD_U_dmC1VrcJPF6zpyyH0Ees/s1600/default.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>

Click and Save Template button and enjoy!!!

How to change the bgcolor of the popular posts

Go To Blogger Dashboard -> Layout ->Template Designer.->Advanced -> Popular Posts Backgrounds

Now change the desired color you want.......!

Smart Manoj