Backup your Template before making any changes to your blog
Now Expand Widget Templates
Press Ctrl + F and search the code shown below
]]></b:skin>
Now Paste the Code Shown Below just above/before it
#PopularPosts1 ul li a:hover {
color:#fff;
text-decoration:none;
}
#PopularPosts1 ul li a {
-webkit-text-size-adjust:auto;
-webkit-text-stroke-width:0;
color:#333333;
display:block;
font-family:Georgia,'Times New Roman',Times,serif;
font-size:13px;
font-style:normal;
font-variant:normal;
font-weight:normal;
letter-spacing:normal;
line-height:18px;
margin:0 40px 0 0;
min-height:30px;
orphans:2;
padding:0;
text-align:-webkit-auto;
text-decoration:none !important;
text-indent:0;
text-transform:none;
white-space:normal;
widows:2;
word-spacing:0;
}
#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:0 0 5px #000;
-moz-box-shadow:0 0 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:0 0;
list-style-type:none;
}
#PopularPosts1 ul li {
position:relative;
margin:6px 0;
border-radius:25px 0 25px 0;
border:2px solid #f7f7f7;
-webkit-box-shadow:3px 3px 3px #000;
-moz-box-shadow:3px 3px 3px #000;
padding:10px;
}
Now save your template
Now Go to Blogger Dashboard --> Layout --> Add a Gadget --> Popular Posts
Select "display up to 9 posts" and uncheck image thumbnail and snippet
Now Save the widget
Tidak ada komentar:
Posting Komentar