Today I teach you how to
use Multicolored popular posts widget for BlogSpot blog. Popular post widget
is most important part of blog because popular post widget shows most popular
posts of your blog for your visitors. But multicolored popular post widget is very beautiful for your visitor shown it. You
can select how Popular posts are to be displayed on blog.
Beautiful Multicolored Popular Posts Widget for Blogger:
- Firstly Login to your Blogger Dashboard
- Select your blog and click on right side bar
- Select Layout on drop down menu
Step 1: Add popular posts widget in Blogger sidebar: |
> Click on Add Gadget in your layout sidebar
> Choose
Popular Posts Gadget on
popup window and add popular posts widget on your blog sidebar. Tutorial
details click
here.
> Then save your Gadget
Step 2: Popular posts update at Multi Colored Widget: |
> Click Template on left side bar
Now create a backup of your blogger templates. Because if you have any error after updating your blog. You can restore it. So click on Backup / Restore button and download Full Template.
> Click on Edit HTML button
> Click on Edit HTML button
> Click anywhere inside the code area and press the CTRL + F keys on your keyboard to open the HTML search box.
> Type ]]></b:skin> inside the search box then hit Enter on keyboard to find it:
> Now past the below code before ]]></b:skin> code
Complete code for latest Multi Colored Popular Posts to Blogger:
<!-- Popular posts widget multi colored style
edited by help2blogging -->
#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 widget multi colored style
edited by help2blogging -->
--------------------------------------------------
If you have any question and suggestions related blogger
Thanks to follow this tutorial
Best regards
help2blogging team
Comments
Post a Comment