Cara Membuat Efek Gambar Berputar pada Widget Popular Post
Cara Membuat Efek Gambar Berputar pada Widget Popular Post . Sesuai judulnya, tutorial ini akan menjelaskan tentang cara membuat gambar yang terdapat pada postingan yang masuk pada popular post (post yang paling banyak dilihat/dibaca pengunjung) menjadi berputar dan membesar apabila kursor mouse di sorotkan atau diletakan di atas gambar widget Populer Post tersebut, berlaku pada platform Standar Blogger. Bagaimana caranya ? Silahkan jika Anda berminat, ikuti tutorial selanjutnya berikut ini.
Langkah-langkahnya adalah :
Langkah-langkahnya adalah :
1. Pastikan Anda sudah login ke akun Blogger Anda.
2. Jika sudah, silahkan back-up template Blog Anda untuk mengantisipasi kesalahan saat edit HTML.
3. Jika sudah, sekarang silahkan masuk ke halaman edit HTML.
4. Setelah Anda berada di halaman edit HTML, sekarang Anda cari kode ]]></b:skin>. Agar mudah mencari kode ini silahkan gunakan tombol CRTL + F atau F 3.
5. Jika sudah ketemu kodenya, sekarang copy kode di bawah ini dan letakkan di bawah kode ]]></b:skin>
<style type='text/css'>
.PopularPosts .item-title{display:none}
.PopularPosts ul li {background: none repeat scroll 0 0 transparent;float: left;list-style: none outside none;margin: 5px !important;padding: 0 !important;}
.PopularPosts ul li img {padding:0;-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;height: 80px;width: 80px;}
.PopularPosts ul li img:hover {border:2px solid #BBB;-moz-transform: scale(1.2) rotate(-1090deg) ;-webkit-transform: scale(1.2) rotate(-1090deg) ;-o-transform: scale(1.2) rotate(-1090deg) ;-ms-transform: scale(1.2) rotate(-1090deg) ;transform: scale(1.2) rotate(-1090deg) ;}
</style>
<style type='text/css'>
.PopularPosts .item-title{display:none}
.PopularPosts ul li {background: none repeat scroll 0 0 transparent;float: left;list-style: none outside none;margin: 5px !important;padding: 0 !important;}
.PopularPosts ul li img {padding:0;-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;height: 80px;width: 80px;}
.PopularPosts ul li img:hover {border:2px solid #BBB;-moz-transform: scale(1.2) rotate(-1090deg) ;-webkit-transform: scale(1.2) rotate(-1090deg) ;-o-transform: scale(1.2) rotate(-1090deg) ;-ms-transform: scale(1.2) rotate(-1090deg) ;transform: scale(1.2) rotate(-1090deg) ;}
</style>
6. Sekarang klik Simpan Template.
7. Selesai dan lanjut ke langkah berikutnya.
Maksudnya, jika Anda belum menambahkan widget popular post, maka apa yang Anda lakukan ini tidak akan kelihatan hasilnya. Supaya widget popular pos dapat ditampilkan di sidebar blog Anda, maka Anda perlu menambahkan widget populer post. Caranya sangat mudah, jika ada yang belum paham ikuti langkah-langkah berikut untuk memasang Widget Popular Post ke sidebar blog Anda.
- Pada bagian Dashbord blog, Anda Pilih Menu Tata Letak
- Sekarang klik tambahkan Gadget atau Add a Gadget
- Jika sudah, cari Widget Entri Populer dan klik tanda tambah (+) di sampingnya
4. Pengaturan, kamu bisa mematikan centang cuplikan, tapi jika ingin menampilkannya tetap beri centang. Pada thumbail gambar berikan tanda centang dan silahkan atur jumlah popular post yang ingin ditampilkan.
6. Jika dirasa sudah, klik Simpan
7. Selesai dan lihat hasilnya (contoh : silahkan dekati gambar dengan mouse, gambar yang terdapat di samping blog ini yang nama Popular Post-nya telah saya ganti dengan nama �ARTIKEL PALING SERING DIBACA PENGUNJUNG�. Demikian, selamat mencoba dan semoga bermanfaatSumber Referensi : http://aldhinya.blogspot.com/2013/05/cara-membuat-efek-gambar-berputar-pada.html
Categories:
Tutorial
0 komentar:
Posting Komentar