Mash Tricks : popular post tricks

<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 class="post-title entry-title">
</h2>
<div class="post-header">
</div>
<div class="akash" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3X0D_-gIofd3YPLMSkrsZ09durG9MwQ_ldO-OZPs7QWogVw060dd3jleHVtrpO2rgE21cLr9Qo_fh-O9HcmfJ6xa-sEyWoQ9cyvfDOn5kLxubFI2dX4yg723ygH0TkKmaQeIH-LBYFU8/s1600/popular-posts.jpg" /></div>
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. 
 
<a href="http://www.blogger.com/null" name="more"></a> 
<div class="demo">
<blockquote class="tr_bq">
Demo shows in bottom right side  → 
Features of this Widget</blockquote>
<blockquote class="tr_bq" style="text-align: left;">
<ul style="text-align: left;">
<li><blockquote>
Flat UI colors used (it will attract users attention)</blockquote>
</li>
</ul>
<blockquote>
</blockquote>
<ul style="text-align: left;">
<li><blockquote>
Automatic Post Numbering</blockquote>
</li>
</ul>
<blockquote>
</blockquote>
<ul style="text-align: left;">
<li><blockquote>
CSS3 Hover Animation </blockquote>
</li>
</ul>
</blockquote>
</div>
 
<h4 class="notice">
Sign in to your Blogger Account and Active Popular Posts Widget </h4>
 
<ul style="text-align: left;">
<li>First Add Popular post Widget to Blogger</li>
<ul>
<li>Go to Layout -> Select "Add a Gadget" and take Popular Posts Widget from the Widget List appear.</li>
<li>Give Title of widget, select how the popular posts should be appeared(in Month,or Week or All time) and click Save </li>
</ul>
<li>Go to Template -> Edit HTML, Find ( <a href="http://netoopsblog.blogspot.com/2012/01/use-search-bar-find-code-blogger-blog.html" target="_blank">Ctrl + F</a> ) ]]></b:skin></li>
<li>Copy the following code and Paste just above it</li>
</ul>
<blockquote class="tr_bq">
<div class="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:#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) ; 
} 
</div>
</blockquote>
 
<ul style="text-align: left;">
<li>Click on Preview Template (You can see the template without saving)</li>
<li>Save the Template.</li>
</ul>
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...</div>

Awesome Multi-Colored Popular Posts Widget for Blogger

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