Merubah Mode Sidebar Popular Post

• Live Demo

Merubah memodifikasi style popular post blog menjadi lebih keren.
Popular post adalah widget untuk menampilkan posting/artikel blog kita yang terpopuler atau yang banyak di cari dan dibaca.
Lanjut ke topik utama tentang cara merubah sidebar popular post supaya lebih keren, lebih menarik tentunya, pastikan juga style mode css sidebar yang share berikut cocok dengan template sobat dari segi warna dll tujuannya tentu supaya lebih keren dan pas dengan warna,mode dan style sebuah template.

Untuk merubah style sidebar popular post
Disini sobat hanya perlu menambahkan kode CSS berikut di atas ]]></b:skin> template blog sobat.

CSS Style Sidebar Popular Post

/* POPULAR POST */
.PopularPosts ul,
.PopularPosts li,
.PopularPosts li img,
.PopularPosts li a,
.PopularPosts li a img {
  margin:0 0;
  padding:5px 5px;
  list-style:none;
  border:none;
  background:none;
  outline:none;
}
.PopularPosts ul {
  margin:.5em 0;
  list-style:none;
  font:normal normal 13px/1.4 "Arial Narrow",Arial,Sans-Serif;
  color:black;
  counter-reset:num;
}
.PopularPosts ul li img {
  display:block;
  margin:0 .5em 0 0;
  width:50px;
  height:50px;
  float:left;
}
.PopularPosts ul li {
  background-color:#eee;
  margin:0 10% .4em 0;
  padding:.5em 1.5em .5em .5em;
  counter-increment:num;
  position:relative;
}
.PopularPosts ul li:before,
.PopularPosts ul li .item-title a {
  font-weight:bold;
  text-decoration:none;
}
.PopularPosts ul li:before {
  content:counter(num);
  display:block;
  position:absolute;
  background-color:black;
  color:white;
  width:30px;
  height:30px;
  line-height:30px;
  text-align:center;
  top:50%;
  right:-10px;
  margin-top:-15px;
  border-radius:30px;
}
/* SETTING COLOR POPULAR */
.PopularPosts ul li:nth-child(1) {background-color:#0099CC;margin-right:1%}
.PopularPosts ul li:nth-child(2) {background-color:#00BE54;margin-right:3%}
.PopularPosts ul li:nth-child(3) {background-color:#FF940B;margin-right:5%}
.PopularPosts ul li:nth-child(4) {background-color:#FF2424;margin-right:7%}
.PopularPosts ul li:nth-child(5) {background-color:#A93AF3;margin-right:9%}
.PopularPosts ul li:nth-child(6) {background-color:#5BBFF1;margin-right:11%}
.PopularPosts ul li:nth-child(7) {background-color:#61469C;margin-right:13%}
.PopularPosts ul li:nth-child(8) {background-color:#863E86;margin-right:15%}
.PopularPosts ul li:nth-child(9) {background-color:#863E62;margin-right:17%}
.PopularPosts ul li:nth-child(10) {background-color:#815540;margin-right:19%}

Dan save template blog sobat, jangan lupa kalau sobat sudah menambahkan mode css popular post yang lain sebelumnya sebaiknya di hapus saja css tersebut.

Ditulis Oleh : Robby Armansyah

Anda baru saja membaca artikel dengan judul Merubah Mode Sidebar Popular Post. Di tulis oleh Robby Armansyah. Hak cipta di lindungi DMCA dan UUD
URL laman ini.https://kampung-bodoh.blogspot.com/2014/12/merubah-mode-sidebar-popular-post_86.html

• Share
• Share
• Share
• Share
• Share

✚

Related Post