Cara Membuat Efek Gambar Berputar Pada Widget Populer Post Blog

Selamat datang kembali diblog Dapur Tutorial Blogspot dan Seo yang merupakan blog kesayangan Master Chef dan semoga menjadi kesayangan teman-teman semuanya. Berhubungan dengan Tutorial Blog kali ini Cara Membuat Efek Gambar Berputar Pada Widget Populer Post Blog , Master Chef Juga pernah menyampaikan Tutorial Serupa yaitu Cara Membuat Efek Gambar Berputar dan Membesar Di Blog dan Cara Membuat Efek Gambar Membesar Saat Diarahkan Kursor Mouse.

Nah untuk Tutorial Blog kali ini Kita akan menerapkan trik tersebut ke dalam widget Populer Post Standar Blogger dimana Gambar didalam Widget Populer Post tersebut akan berputar dan membesar ketika kursor mouse di sorot atau diletakan diatas gambar tersebut. Bagaimana caranya ?, Tidak usah hawatir gan caranya mudah hanya perlu edit HTML sedikit.

Langsung saja berikut Cara Membuat Efek Gambar Berputar Pada Widget Populer Post Blog  :

1. Pastikan Sobat Sudah Login Ke Akun Blogger Masing-Masing
2. Jika Sudah Silahkan Back-Up template Blog kamu untuk mengantisifasi kesalahan saat Edit HTML ( Baca : Cara Upload dan Back-up Template Blogspot)
3. Jika sudah sekarang silahkan masuk kehalaman Edit HTML ( Baca : Cara Masuk Kehalaman Edit HTML Blogger)
4. Setelah kamu berada di halaman Edit HTML, sekarang kamu cari kode ]]></b:skin>. Agar mudah mencari kode silahkan gunakan tombol CRTL + F Dan F 3.
5. Sudah ketemu Kodenya, sekarang Copy kode dibawah ini dan letakan dibawah 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>

6. Sekarang Klik Simpan Template
7. Selesai dan Lanjut Kelangkah Berikutnya.

Secara umum tahap diatas sudah selesai namun supaya widget populer pos dapat ditampilkan dihalaman blog sobat, maka sobat perlu menambahkan widget populer post. caranya sangat mudah jika ada yang belum paham ikuti langkah-langkah berikut untuk Memasang Widget Populer Post Kehalaman blog Sobat.

1. Pada bagian Dashbord blog kamu Pilih Menu Tata Letak

2. Sekarang klik Tambah Gadget Atau Add a Gadget

3. Jika sudah cari Widget Populer post dan klik tanda tambah disampingnya

4. Pengaturan, kamu bisa mematikan centang cuplikan jika ingin menampilkannya tetap centang.  Thumbail gambar berikan tanda centang dan silahkan atur jumlah populer post yang ingin ditampilkan.
5. Jika dirasa sudah klik Simpan
6. Selesai dan Lihat Hasilnya

Demikian sobat bahasan soal Cara Membuat Efek Gambar Berputar Pada Widget Populer Post Blog . Semoga saja bisa memberikan banyak manfaat buat sobat-sobat blogger Dapur Tutorial Blogspot Dan Seo Semuannya.

Tweet