• RSS
  • Delicious
  • Digg
  • Facebook
  • Twitter
  • Linkedin
  • Increase Website And Blog Traffic:latest article for Increasing Blog and website Traffic free gide.....
  • Create and Upload Site Map to Google:Google is fist largest Search Engine by upploading SITE MAP Google Easily Search Links from Ur site in Searching.......
  • Fix WEB SITE Errors:Google and other search engines always take those site in there fist page in searching which ha too less web Errors...
  • Top 20 Search Engine:Submit Ur site to top 20 Search Engines to Increasing Ur Site Traffic and making money top search engines like as Google, Yahoo, Ask, AOl, MSN...
  • Top Social Sites:Top 100 Social sites which real help U make a Affliate Marketer and in Pormoting ur Producdts...

New Posts

Awesome Multi-Colored Popular Posts Widget for Blogger powered CSS3

Posted by Mohsin On 8/17/2013 06:14:00 AM No comments

Popular Posts Widget is a Widget providing by Blogger and we can add it to our Blog. This Widget displays the Most viewed posts of your blog, that may be of Month or in Week or All the time. You can select how Popular posts are to be displayed.By default it shows an image(if the post has) and Title of Post followed by the content of post wrapped by 20-25 Words. This article is a tutorial to Style that Popular posts Widget to an Awesome Multi - colored Popular posts Widget. This trick is done using simple CSS3 rather than using complex JavaScripts. A great feature of this trick is each Post shown in each Flat UI color, so these colors catches your Blog visitor's eyes and they have the tendency to take that post even if the Post is not so good.


Demo shows in bottom right side 
Features of this Widget
  • Flat UI colors used (it will attract users attention)
  • Automatic Post Numbering
  • CSS3 Hover Animation 

Sign in to your Blogger Account and Active Popular Posts Widget


  • First Add Popular post Widget to Blogger
    • Go to Layout -> Select "Add a Gadget" and take Popular Posts Widget from the Widget List appear.
    • Give Title of widget, select how the popular posts should be appeared(in Month,or Week or All time) and click Save 
  • Go to Template -> Edit HTML, Find ( Ctrl + F ) ]]></b:skin>
  • Copy the following code and Paste just above it
    <!-- Popular posts multi colored UI theme -->
    #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:#ff4c54;width:97%}
    #PopularPosts1 ul li:first-child:after{content:"1"}
    #PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}
    #PopularPosts1 ul li:first-child + li:after{content:"2"}
    #PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}
    #PopularPosts1 ul li:first-child + li + li:after{content:"3"}
    #PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}
    #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
    #PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}
    #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
    #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
    #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:#f6993d;width:72%}
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
    #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,
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;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:70px;height:70px;}
    #PopularPosts1 ul li a{font-size:13px;color:#444;text-decoration:none}
    #PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
    #PopularPosts1 img{
    -moz-border-radius: 130px;
    -webkit-border-radius: 130px;
    border-radius: 130px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
    padding:4px;
    border:1px solid #fff !important;
    }
    #PopularPosts1 img:hover {
    border-radius: 0 0 0 0;
    -moz-transform: scale(1.2) rotate(-711deg) ;
    -webkit-transform: scale(1.2) rotate(-711deg) ;
    -o-transform: scale(1.2) rotate(-711deg) ;
    -ms-transform: scale(1.2) rotate(-711deg) ;
    transform: scale(1.2) rotate(-711deg) ;
    }
    <!-- popular posts multicolored UI theme -->

    • Click on Preview Template (You can see the template without saving)
    • Save the Template.
    View Your Blog it is ready to attract users. I think this article will help you if so please share and Like us to spread our Blog.
    If any problems with this trick don't hesitate to ask, do comment here...

    0 comments:

    Post a Comment

    All types of Comments are welcome