Edit Popular Post di Blog Biar Keren

Aris Triyanto

Friday, February 3, 2017

BerguruIT : Malam menjelang pagi inilah saya usahain membuat artikel cara edit tampilan popular post biar keren dan mengundang trafik. Sebenernya sih cara ini banyak di google tapi saya lebih suka apa yang sudah berhasil di utak atik di blog segera di postingkan caranya supaya buat blogger yang lain atau pemula bisa kebagian ilmunya.

Memang kaya gimana sih tampilan popular post yang keren??.. keren ga nya sih tergantung selera masing-masing ya, tapi nice looking tuh lebih baik karena pengunjung bisa betah dan pasti pengen liat-liat terus. Pasti sobat blogger pengen kan...



Popular post atau artikel terpopular yang sudah saya edit seperti ini .

Sebelum kita mulai edit, pastikan widget popular post sudah terpasang di blog.
lalu edit. {Seperti gambar dibawah ini}

Jika sudah lalu buka template > trus pilih edit html

Carilah dalam kode html anda yang seperti ini  ]]></b:skin> Sudah ketemukan? anggep aja udah yaa..

lalu sematkan kode berikut dibawah ini tepat di atas ]]></b:skin>

/*---------- untuk tampilan populer post----------*/
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(https://1.bp.blogspot.com/-j0CZus8LOxY/WJNC23ybM0I/AAAAAAAABDk/6lM-KkJSchQ90BXhedcgdrdFdhUu_3gTQCLcB/s1600/arah.gif)  no-repeat scroll 5px 10px;
  list-style-type: none;
  margin:0 0 5px 0px;
  padding:5px 5px 5px 20px !important;
  border: 1px solid #ddd;
  border-radius:10px;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
}
.popular-posts ul
  li:hover {
  border:2px solid #6BB5FF;
  background:#FFFFFF;
}
.popular-posts ul
  li a:hover {
  text-decoration:none;
  color:#78B6F4;
}
.popular-posts .item-thumbnail img {
  webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

Jika sudah jangan lupa simpan dan lihat hasilnya ya, kalo belum berhasil coba di simak bae-bae dan ulangi baca petunjuknya ya.

Berhubung sudah ngantuk mohon maaf ya kalo ada yang salah, mohon masukkan nya. salam berguru it dimana saja.

Tags

blogging