Cara Membuat Popular Posts Warna Pelangi di Blogspot

Cara Membuat Popular Post Warna-warni - Popular post merupakan widget yang menampilkan artikel yang paling populer atau konten yang paling sering dibaca oleh pembaca blog. Widget popular posts/entri populer biasanya dipasang di sidebar blogspot untuk memudahkan pengunjung blog melihat artikel yang paling banyak dibaca. Pada tutorial blog yang sekarang akan saya bagikan ini berupa pembuatan widget popular posts dengan warna-warni beserta nomor yang tentunya tampilan widget popular posts ini sangat keren dan bisa anda pasang sidebar blog anda.

Baca juga : Cara Membuat Menu Tab View Tanpa Edit HTML di Blog

Cara Membuat Popular Post Berwarna-warni di Blogspot
1. Login ke blogger
2. Pilih Tata Letak => Tambah Gadget lalu pilih Entri Populer

Selanjutnya masuk ke Edit HTML
1. Pilih Template => Edit HTML
2. Tekan Ctrl+F lalu cari kode ]]></b:skin> dan letakkan kode berikut diatasnya

/* Pengaturan Warna */
.PopularPosts ul li:nth-child(1) {background-color:#ff0096;margin-right:1%}
.PopularPosts ul li:nth-child(2) {background-color:#b400ff;margin-right:2%}
.PopularPosts ul li:nth-child(3) {background-color:#00fff0;margin-right:3%}
.PopularPosts ul li:nth-child(4) {background-color:#00ffa2;margin-right:4%}
.PopularPosts ul li:nth-child(5) {background-color:#aeff00;margin-right:5%}
.PopularPosts ul li:nth-child(6) {background-color:#fff000;margin-right:6%}
.PopularPosts ul li:nth-child(7) {background-color:#ff6600;margin-right:7%}
.PopularPosts ul li:nth-child(8) {background-color:#893bfe;margin-right:8%}
.PopularPosts ul li:nth-child(9) {background-color:#bfbfbf;margin-right:9%}
.PopularPosts ul li:nth-child(10) {background-color:#18ad00;margin-right:10%}

.PopularPosts ul,
.PopularPosts li,
.PopularPosts li img,
.PopularPosts li a,
.PopularPosts li a img {
  margin:0 0;
  padding:0 0;
  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;
  font-size:120%;
  color:inherit;
  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;
  -webkit-border-radius:30px;
  -moz-border-radius:30px;
  border-radius:30px;}

4. Simpan
Sumber http://tips-erma.blogspot.com/

Bagikan Artikel ini