Membuat Entry Popular Seperti Warna Pelangi

Hai para jenius sobat, saya menyisihkan waktu luang untuk share dan berbagi ilmu selama ane masih ada waktu kosong. saya akan membahas tentang mempercantik blogger sobat-sobat. yaitu saya akan menerangkan membuat warna warni pelangi di wigdet entri popular/ posting popular. nah bagaimana caranya, ikuti langkah-langkah ane dibawah ini ya :

1. sobat-sobat harus login ke blogger terlebih dahulu tentunya.
2. sobat-sobat juga harus mempunyai widget entri popular. posting popular di blogger agan. kalau masih bingung. agan pilih tata letak dan cari apakah ada entri popular atau belum, kalau belum tambahkan widget dan pilih entri popular.

3. Selanjutnya pilih template lalu edit HTML.
4. Tekan saja CTRL+F di bawah web browser sobat-sobat ada kolom find cari file berikut, </style> atau </b:skin> lalu pastekan kode berikut.

/* Modifikasi Widget Popular Post Warna Warni */
.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 &quot;Arial Narrow&quot;,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;
}

/* Set color and level */
.PopularPosts ul li:nth-child(1) {background-color:#E11E28;margin-right:2%}
.PopularPosts ul li:nth-child(2) {background-color:#FD3C03;margin-right:2%}
.PopularPosts ul li:nth-child(3) {background-color:#FECB09;margin-right:2%}
.PopularPosts ul li:nth-child(4) {background-color:#6EBE27;margin-right:2%}
.PopularPosts ul li:nth-child(5) {background-color:#149A48;margin-right:2%}
.PopularPosts ul li:nth-child(6) {background-color:#5BBFF1;margin-right:2%}
.PopularPosts ul li:nth-child(7) {background-color:#61469C;margin-right:2%}
.PopularPosts ul li:nth-child(8) {background-color:#863E86;margin-right:2%}
.PopularPosts ul li:nth-child(9) {background-color:#863E62;margin-right:2%}
.PopularPosts ul li:nth-child(10) {background-color:#815540;margin-right:2%}

NB : kalau tidak ketemu dan tidak bisa. sobat-sobat bisa copas kode diatas setelah <body>

Rabu, 01 April 2015

Membuat Entry Popular Seperti Warna Pelangi

Tidak ada komentar:

Posting Komentar

Blogger news