Wednesday, December 28, 2016
Cara Membuat Popular Post dengan Efek Hover
Cara Membuat Popular Post dengan Efek Hover
Selamat sore sobat blogger semua !!! Kali ini aq akan memposting tentang Cara Membuat Popular Post dengan Efek Hover.
Berikut adalah screenshotsnya :
Setelah disorot mouse akan menjadi seperti ini :
Kalau gitu langsung ajah deh :
1.Masuk ke akun blogger sobat.
2.Masuk ke dashboard blogger.
3.Pilih template kemudian edit html
4.Kemudian cari kode ]]></b:skin> dan letakkan kode dibawah ini tepat diatasnya ya !
.popular-posts ul{padding-left:0px;}.popular-posts ul li {list-style-type: none;margin: 0px 0px 5px;padding: 5px 5px 5px 20px !important;border: 1px solid #dddddd;border-radius: 30px 0 30px 0; -moz-border-radius: 30px 0 30px 0; -webkit-border-radius: 30px 0 30px 0; -o-border-radius: 30px 0 30px 0; transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s;}.popular-posts ul li:hover {border:1px solid #666666; box-shadow: 1px 1px 10px 3px rgba(0,0,0,0.5); border-radius:0; -moz-border-radius:0; -webkit-border-radius:0; -o-border-radius:0;}.popular-posts ul li a:hover {text-decoration:none;}
5.Kemudian save template dan lihat hasilnya. :)
Gimana sob, keren kan ?
Keterangan :
- Untuk mengatur jumlah popular post yang muncul dalam blog kita silahkan sobat masuk ke dashboard blogger kemudian pilih tata letak kemudian tambahkan gadget kemudian pilih popular post dan pada pilihan tampilkan hingga masukkan jumlah artikel yang sobat ingin tampilkan di popular post kemudian simpan setelan.
- Jika ingin menampilkan thumbnail gambar dari artikel kita supaya muncul dipopular post maka centang pada thumbnail gambar yang berada di widget popular post yang terdapat di tata letak.
Go to link Download
