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

1 Sept 2012

Popular Post widget Colorful

Labels: , ,



Popular Post widget has been published by Blogger long time ago . A helpful widget that show the most viewed posts in blog . 


Demo here 
.mostpopular {
    list-style: none outside none;
    margin: 0.3em 0 !important;
    padding: 0;
}
.mostpopular_li {
    background-image: none !important;
    border: 0 none;
    list-style: none outside none !important;
    margin: 0 0 -7px !important;
    padding: 13px 0 8px 8px !important;
    position: relative;
    width: 100%;
}
.mostpopular_li.color0 {
    background-color: #EE5826 !important;
    width: 100%;
}
.mostpopular_li.color1 {
    background-color: #27B6E2 !important;
    width: 93%;
}
.mostpopular_li.color2 {
    background-color: #C5E627 !important;
    width: 89%;
}
.mostpopular_li.color3 {
    background-color: #FF6F51 !important;
    width: 84%;
}
.mostpopular_li.color4 {
    background-color: #D59B8E !important;
    width: 80%;
}
.mostpopular_li.color5, .mostpopular_li.color6, .mostpopular_li.color7, .mostpopular_li.color8, .mostpopular_li.color9, .mostpopular_li.color10, .mostpopular_li.color11, .mostpopular_li.color12, .mostpopular_li.color13, .mostpopular_li.color14, .mostpopular_li.color15 {
    background-color: #888888 !important;
    width: 74%;
}
a.barlinko {
    background: none repeat scroll 0 0 transparent;
    display: block;
    font: italic 13px georgia,serif;
    margin: 0 6px 0 0;
    padding: 0;
    text-decoration: none !important;
}
a.barlinko:hover {
    color: #FFFFFF;
}
.barco {
    display: block;
    right: 0;
}
.mostpopular_li img {
    margin-top: 15px;
    position: absolute;
    right: 5px;
}
a.thethingwithc {
    border: 0 none !important;
    color: #FFFFFF !important;
    display: block;
    font-family: arial;
    font-size: 11px;
    font-weight: bold;
    padding: 0 9px 0 0;
    text-align: right;
    text-decoration: none !important;
}
3. In template ,choose the position where you want to insert this widget ,and then add the code 

 <b:section id='sidebar' showaddelement='yes'>
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>                        
                                     <div id='sidebartitlewrapper'>
                                         <b:if cond='data:title'><h3><span><data:title/></span></h3></b:if>                                        
                                     </div>                                     
                                     <div class='sectioncont'> 
                                         <ul class='mostpopular'> 
                                             <script type='text/javascript'>
                                                 //<![CDATA[                                                 
                                                 var i=0;
                                                 //]]>
                                             </script>
                                             <b:loop values='data:posts' var='post'>
                                                 <script type='text/javascript'>
                                                     //<![CDATA[                                                 
                                                         document.write ('<li class="mostpopular_li color'+i+'">');
                                                         var i= i +1;
                                                     //]]>
                                                 </script>
                                                  <a class='barlinko' expr:href='data:post.href'><data:post.title/><data:post.id/></a>
                                                 <span style='display: inline-block;width:100%;'>
                                                     <span style='float: left;font-size:10px;color:#f5f5f5;'> </span>                                                        
                                                     <span class='cb'/>
                                                 </span>
                                                 <script type='text/javascript'>
                                                     //<![CDATA[                                                 
                                                          document.write ('</li>');
                                                      //]]>
                                                 </script>                                            
                                             </b:loop>
                                         </ul>
                                     </div>                                     
                                     <b:include name='quickedit'/>
                                   </b:includable>
</b:widget>
</b:section>
Insert this code into sidebar as other script . Do not insert in other section element .For the question what 'section' is ,pls read this post Save changes and go back to Dashboard .

 4, Click on View blog to see the result . We need some work here Click on the wrench icon in the right corner of widget






I marked it with a circle .A dialog will display . Change the setting as picture bellow