2 Populer Post Warna warni yang keren

adscblog

Mungkin anda juga sudah tidak asing lagi dengan Populer Post yang seperti pada artikel ini,kenapa tidak,karena kebanyakan para blogger pada saat ini mereka banyak menggunakan populer post yang berwarna warni,sehingga mempercantik blog mereka,bahkan tidak sedikit pula mereka para blogger yang menggunakan populer post warna warni ini kemudian mereka modipikasi sesuai dengan ke inginan mereka sehingga hasil nya lebih sempurna dan sesuai dengan gaya template yang mereka pasang.

Tetapi untuk para Newbe seperti saya ini jika belum paham cara otak atik nya kita gak perlu susah payah untuk meng edit nya kita hanya perlu menerapkan nya saja di template kita,dan kemudian lihat hasil nya,ya kecuali ingin belajar untuk mengotak atik nya ya itu terserah.

Dan disini saya akan berbagi 2 populer post yang warni warni yang bisa anda terapkan di blog dan juga bisa anda pilih salah satu nya di antara untuk menerapkan kode populer post ini silahkan anda ikuti langkah langkah di bawah ini

• Silahkan anda login ke blogger anda
• Kemudian silahkan Masuk ke Dashboard
• dan pilih Link Layout
• Kemudian silahkan klik Add Gadget maka akan muncul halaman seperti ini
  
• Silahkan anda pilih populer Post
• Setelah anda mengklik nya maka akan ada tampilan seperti gambar berikut
  
  Jika ada tampilan seperti gambar di atas,silahkan anda ikuti seperti pada gambar kecuali pada daerah "Most Viewest"
• Kemudian silahkan anda klik Save

Setelah anda menyelesaikan tahap pertama di atas,silahkan anda masuk ke peng editan Html Template > Edit Html,kemduain setelah itu silahkan anda cari kode </b:skin> dengan menekan tombol Ctrl+F secara bersamaan,dan setelah ketemu silahkan anda letakan kode berikut sebelum kode tersebut
 1:: Untuk Gambar pertama

/*Custom Popular Post*/
.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;color:black;counter-reset:num}
.PopularPosts ul li{background-color:#eee;margin:0 0 0 0!important;padding:.5em 1.5em .5em .5em!important;counter-increment:num;position:relative}
.PopularPosts ul li a{color:#fff!important}
.PopularPosts ul li a:hover{color:#2c3e50!important}
.PopularPosts ul li:before,.PopularPosts ul li .item-title a,.PopularPosts ul li a{font-weight:bold;color:inherit;text-decoration:none}
.PopularPosts ul li:before{content:counter(num)!important;display:block;position:absolute;background-color:#333;color:#fff!important;width:22px;height:22px;line-height:22px;text-align:center;bottom:0;right:0;padding-right:0!important}
/* Pengaturan Warna */
.PopularPosts ul li:nth-child(1){background-color:#f1c40f;}
.PopularPosts ul li:nth-child(2){background-color:#f39c12;}
.PopularPosts ul li:nth-child(3){background-color:#2ecc71;}
.PopularPosts ul li:nth-child(4){background-color:#27ae60;}
.PopularPosts ul li:nth-child(5){background-color:#e67e22;}
.PopularPosts ul li:nth-child(6){background-color:#d35400;}
.PopularPosts ul li:nth-child(7){background-color:#3498db;}
.PopularPosts ul li:nth-child(8){background-color:#2980b9;}
.PopularPosts ul li:nth-child(9){background-color:#ea6153;}
.PopularPosts ul li:nth-child(10){background-color:#c0392b;}
.PopularPosts .item-thumbnail{margin:0 0 0 0}
.PopularPosts .item-snippet{font-size:11px}

Kemudian Save Template dan lihat hasil nya
2::Untuk Populer post yang kedua bisa anda menerapkan nya di blog anda seperti gambar berikut

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

Setelah itu Save template dan kemudian silahkan anda lihat hasil nya,semoga artikel ini bisa bermanfaat untuk sobat blogger semua.

adscblog

Recommendation Apps

ads1

Previous

Posting Lebih Baru

Next

Posting Lama

Posted by Dede Ubed, Published at 25 September and have 0 komentar