Ok deh temen-temen kali ini Blog Ilmu Erlangga akan membagikan tips and trick membuat widget populer post lebih menarik. Emmm.. Widget ini bergaya gird layout.
oke deh langsung saja kita lihat caranya di bawah ini !
1. Lebih baik kalian loggin dulu ke akun blog kalian atau bisa klik di sini
2. Kalian buka Rancangan
3. Kaliam pilih Page elemen
4. lalu kalian edit widget "Popular Post" kalian. Seperti gambar di bawah ini
5. lalu simpan deh.. eittsss tunggu dulu belum selesai
6. Kamu pilih Rancangan lagi
7. Kamu sekarang pilih edit HTML
8. Kamu download template punya kamu,(lengkap)
9. klik expand widget template
10. Kamu cari kode ]]> atau bisa dengan control+F
Dan tambahkan kode CSS berikut:
.popular-posts .item-thumbnail{float:left;} .popular-posts ul{padding-left:30px;} .popular-posts ul li {list-style-image: none;list-style-type: none;display:inline;} .popular-posts ul li img {padding:0px;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;border: 2px solid #CCC;} .popular-posts ul li img:hover {border:2px solid #ccc;-moz-transform: scale(1.3) rotate(-360deg) ;-webkit-transform: scale(1.3) rotate(-360deg) ;-o-transform: scale(1.3) rotate(-360deg) ;-ms-transform: scale(1.2) rotate(-360deg) ;transform: scale(1.3) rotate(-360deg);}
11. Kamu cari PopularPosts1 kamu bisa dengan control+F.
dan lebih tepatnya codenya seperti di bawah ini
12. kamu ganti kode tersebut dengan kode berikut ini
13. lalu simpan dan lihat deh hasilnyau..
ok semoga bermanfaat
oke deh langsung saja kita lihat caranya di bawah ini !
1. Lebih baik kalian loggin dulu ke akun blog kalian atau bisa klik di sini
2. Kalian buka Rancangan
3. Kaliam pilih Page elemen
4. lalu kalian edit widget "Popular Post" kalian. Seperti gambar di bawah ini
5. lalu simpan deh.. eittsss tunggu dulu belum selesai
6. Kamu pilih Rancangan lagi
7. Kamu sekarang pilih edit HTML
8. Kamu download template punya kamu,(lengkap)
9. klik expand widget template
10. Kamu cari kode ]]> atau bisa dengan control+F
Dan tambahkan kode CSS berikut:
.popular-posts .item-thumbnail{float:left;} .popular-posts ul{padding-left:30px;} .popular-posts ul li {list-style-image: none;list-style-type: none;display:inline;} .popular-posts ul li img {padding:0px;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;border: 2px solid #CCC;} .popular-posts ul li img:hover {border:2px solid #ccc;-moz-transform: scale(1.3) rotate(-360deg) ;-webkit-transform: scale(1.3) rotate(-360deg) ;-o-transform: scale(1.3) rotate(-360deg) ;-ms-transform: scale(1.2) rotate(-360deg) ;transform: scale(1.3) rotate(-360deg);}
11. Kamu cari PopularPosts1 kamu bisa dengan control+F.
dan lebih tepatnya codenya seperti di bawah ini
12. kamu ganti kode tersebut dengan kode berikut ini
13. lalu simpan dan lihat deh hasilnyau..
ok semoga bermanfaat
0 komentar:
Posting Komentar