add Multi-Colored Popular Posts Widget

Go to Blogger Dashboard --> Template --> Edit HTML --> Proceed
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