Popular Posts are the best way to highlight your top articles of your blog and this will help to increase your page view and let your readers to also read some top most famous articles. So it is necessary to give stylish and interesting look to popular post which attract user towards your articles. Here is stylish and amazing popular post widget design which will change your default view with amazing multi-color shaded articles list. This widget is simply made from css codes without any use of JavaScript means this stylish widget lighter and doesn't have any effect blog loading speed.If you want to make more attractive and want to give multi shaded effect as shown in screenshot if you like it then follow below given steps about making rainbow color shaded popular posts.
Steps To Add Multi-color Popular Post widgets
Steps Add Popular Post Widget
- First of you need to add default popular post widget into your blog if you know how then its good otherwise follow below steps.
- Open Blogger Dashboard >> Layout >> Add an Element >> Then select Popular Post from given list and save it by selection number of posts you want to show.
- Before saving it must unselected the option of thumbnail for popular posts and then save it.
Steps To Give Multi-color Effect
- Go to Template Section of blog then click on Edit HTML
- Now search by CTRL+F in coding box for the code ]]></b:skin>
- After searching for ]]></b:skin> code simple paste below given codes just above it.
#PopularPosts1 ul li a:hover{
color:#fff;
text-decoration:none
}
#PopularPosts1 ul li a {
-webkit-text-size-adjust: auto;
-webkit-text-stroke-width: 0px; color: #333333;
display: block;
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: 14px;
font-style: normal;
font-variant: normal;
font-weight: normal;
letter-spacing: normal;
line-height: 18px;
margin: 0px 40px 0px 0px;
min-height: 30px; orphans: 2;
padding: 0px;
text-align: -webkit-auto;
text-decoration: bolt !important;
text-indent: 0px;
text-transform: none;
white-space: normal; widows: 2;
word-spacing: 0px;
}
#PopularPosts1 ul li .item-thumbnail{
float:left;
border:0;
margin-right:10px;
background:transparent;
padding:0;
width:51px;
height:51px
}
#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,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{
position:absolute;
top:10px;right:5px;
border-radius:50%;
border:2px solid #ccc;
background:#353535;
-webkit-box-shadow:0px 0px 5px #000;
-moz-box-shadow: 0px 0px 5px #000;
width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#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:#B041FF;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#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:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{
position:relative;
margin:6px 0;
border-radius:25px 0px 25px 0px;
border:2px solid #f7f7f7;
-webkit-box-shadow:3px 3px 3px #000;
-moz-box-shadow: 3px 3px 3px #000;
padding:10px
}
- After Pasting codes save your template settings.
- Now open your blog and observe made on popular post widgets.
I feel you enjoy this popular post widget. If you have question or face any posting which implementation of this post must leave your comments.
