Cara Membuat Gambar Posting Berputar

Berikut ini adalah cara membuat gambar yang ada dipostingan setiap artikel berputar dan membesar ketika di sentuh kursor mouse. Salah satu cara agar gambar dapat diperbesar dan lebih mudah untuk dilihat ketika disentuh kursor mouse. Contoh: arahkan mouse anda ke gambar dibawah ini.


Untuk membuat gambar di setiap postingan berputar, silakan ikuti langkah-langkah dibawah ini.
  1. Login ke blogger. 
  2. Dari halaman dasbor pilih pengaturan template. Lalu klik edit HTML dan cari kode ]]></b:skin>(gunakan Ctrl F untuk mempermudah pencarian kode). 
  3. Setelah ketemu ]]></b:skin>, Copy kode dibawah ini. Lalu Pastekan di Atas ]]></b:skin>
  4. .post img{-o-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-webkit-transition:all 0.5s ease}
    .post img:hover{-o-transform:scale(1.9) rotate(360deg) translate(0px);-moz-transform:scale(1.9)
    rotate(360deg) translate(0px);-webkit-transform:scale(1.9) rotate(360deg) translate(0px);-o-transition:all 0.5s
    ease;-moz-transition:all 0.5s ease;-webkit-transition:all 0.5s ease}
  5. Dan save template. Selesai.
  6. Atau bisa juga ditempatkan di Tambahkan CSS pada bagian perancang template blogger(desainer template).
  7. Lalu save, selesai.
Keterangan kode diatas: 0.5s untuk mengatur lama putaran. scale 1.9 untuk mengatur besarnya gambar setelah di sentuh oleh kursor mouse, silakan diganti sesuai dengan keinginan. Untuk kode lainnya sebaiknya jangan diganti, agar kode tetap berjalan dengan benar, yaitu untuk memutar gambar yang disentuh kursor mouse. 
Itulah sedikit tutorial desain blog dan tips trik yang dapat digunakan di blog,  yang saya dapat bagikan yaitu tentang cara membuat gambar posting berputar dan membesar ketika di sentuh kursor mouse.

Jika ada yang kurang dimengerti dari langkah-langkah diatas atau ada kendala dalam pembuatannya. Silakan masukan komentar anda dibawah. Silakan dibaca juga artikel lainnya yang berkaitan dengan gambar, seperti cara mengganti judul blog dengan gambar atau cara membuat menu blog dengan gambar. Semoga bermanfaat.

    No comments:

    Post a Comment

    Semoga Artikel diatas dapat membantu anda menemukan, apa yang sedang anda cari. Silahkan tinggalkan komentar.