Cara Menciptakan Popular Posts Warna Pelangi Di Blogspot

Cara Membuat Popular Post Warna-warni - Popular post merupakan widget yang menampilkan artikel yang paling terkenal atau konten yang paling sering dibaca oleh pembaca blog. Widget popular posts/entri terkenal biasanya dipasang di sidebar blogspot untuk memudahkan pengunjung blog melihat artikel yang paling banyak dibaca. Pada tutorial blog yang kini akan aku bagikan ini berupa pembuatan widget popular posts dengan warna-warni beserta nomor yang tentunya tampilan widget popular posts ini sangat keren dan dapat 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 kemudian pilih Entri Populer

Selanjutnya masuk ke Edit HTML
1. Pilih Template => Edit HTML
2. Tekan Ctrl+F kemudian cari instruksi ]]></b:skin> dan letakkan instruksi 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

Share this post