Add Multi-Colored Popular Posts to Blogger andrey понедельник, 11 марта 2013 г. No Comment

Popular Posts Widget is a widget provided by Blogger, showing the most viewed posts on the blog in the last 7 days, last month or of all time. It also has three displaying modes: display title only, display title with image thumbnail or display title along with the posts snippets.

codes to our blogger template. To customize the popular posts widget, we must add a new variable and some css codes to our blogger template.

How to add multi-colored popular posts to Blogger

Step 1. Login to your Blogger Dashboard, go to Design >> Edit HTML >> check "expand widget templates" (make a backup first) and search for the following tag:

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

Step 2. Copy and paste just below/after this tag, the next code:








Step 3: Search for the following piece of code:

]]>

Step 4. Just above/before it, add this 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: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{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}

Step 5. Now find the following code:


Step 6. Delete it until you reach at this tag (delete this also):


Note: Be very careful when removing it. The entire fragment of code should look like this:



 


 

   

         
         

  •        
             
               
               
             
               
               

               

             
           
             
               
               

                 
                   

                     
                       
                     
                   

                 
                 

               

               

             
               
               

                 
                   

                     
                       
                     
                   

                 
                 

                 

               

               

             
           
         

    •      
       

   
 



Step 7. After you have deleted the above code, paste this in its place:



  
   


  
  

   

        
         

  •       
           
            
           
            
           
          
           
            
              data:post.title
            
              no image
            
            
            

           
            
              data:post.title
            
              no image
            
            
            

           
          
         

    •     
       

  

 

Step 8. Save template.

Settings

- Go back to Design >> Page Elements and click on the edit link of Popular Posts widget.
Select to "display up to 5 posts", then Save the widget.
codes to our blogger template.
- You can easily change the background color of the popular posts widget, going to Design >> Template Designer >> Advanced >> PopularPostsBackground and there you can select any color you want.

codes to our blogger template.

If you are enjoying reading this blog, please like & subscribe for more tutorials.
For any questions or suggestions, leave a comment below.
Popular Posts Widget is a widget provided by Blogger, showing the most viewed posts on the blog in the last 7 days, last month or of all time. It also has three displaying modes: display title only, display title with image thumbnail or display title along with the posts snippets.

codes to our blogger template. To customize the popular posts widget, we must add a new variable and some css codes to our blogger template.

How to add multi-colored popular posts to Blogger

Step 1. Login to your Blogger Dashboard, go to Design >> Edit HTML >> check "expand widget templates" (make a backup first) and search for the following tag:

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

Step 2. Copy and paste just below/after this tag, the next code:








Step 3: Search for the following piece of code:

]]>

Step 4. Just above/before it, add this 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: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{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}

Step 5. Now find the following code:


Step 6. Delete it until you reach at this tag (delete this also):


Note: Be very careful when removing it. The entire fragment of code should look like this:



 


 

   

         
         

  •        
             
               
               
             
               
               

               

             
           
             
               
               

                 
                   

                     
                       
                     
                   

                 
                 

               

               

             
               
               

                 
                   

                     
                       
                     
                   

                 
                 

                 

               

               

             
           
         

    •      
       

   
 



Step 7. After you have deleted the above code, paste this in its place:



  
   


  
  

   

        
         

  •       
           
            
           
            
           
          
           
            
              data:post.title
            
              no image
            
            
            

           
            
              data:post.title
            
              no image
            
            
            

           
          
         

    •     
       

  

 

Step 8. Save template.

Settings

- Go back to Design >> Page Elements and click on the edit link of Popular Posts widget.
Select to "display up to 5 posts", then Save the widget.
codes to our blogger template.
- You can easily change the background color of the popular posts widget, going to Design >> Template Designer >> Advanced >> PopularPostsBackground and there you can select any color you want.

codes to our blogger template.

If you are enjoying reading this blog, please like & subscribe for more tutorials.
For any questions or suggestions, leave a comment below.
by Jillur Rahman

Jillur Rahman is a Web designers. He enjoys to make blogger templates. He always try to make modern and 3D looking Templates. You can by his templates from Themeforest.

Follow him @ Twitter | Facebook | Google Plus

Tags:
на 11:49
Ярлыки:
Related

No Comment

Подписаться на: Комментарии к сообщению ( Atom )