Cara Membuat Gambar Berputar 360 derajat pada semua postingan Blog atau Pada Gambar Tertentu Atau dengan Berputar sambil Zoom

          Cara Membuat Gambar Berputar 360 derajat pada semua postingan  Blog atau Pada  Gambar Tertentu Atau dengan Berputar sambil Zoom , Ada beberapa cara membuat gambar pada blog berputar 360 derajat. kalo master blog pasti udah ga asing sama yang beginian, kalo buat saya masih newbi jadinya masih perlu untuk belajar. sambil belajar sambil diposting yuk... mari...

• Membuat Gambar Berputar 360 derajat di seluruh postingan 

1. pertama login ke blog kawan 

2. masuk ke halaman template

3. Selanjutnya, klik Edit HTML,lalu lanjutkan, 

4. cari kode ]]></b:skin> (gunakan Ctrl + F) atau ( Gunakan F3 ).

5. kemudian tambahkan kode berikut di atas kode ]]></b:skin>

Klik show untuk melihat kode script

   

.post img{-webkit-transition: all .4s ease-out;

-moz-transition: all .4s ease-out;

-o-transition: all .4s ease-out;}

.post img:hover {-o-transform: scale(1.2) rotate(360deg) translate(0px);

-moz-transform: scale(1.2) rotate(360deg) translate(0px);

-webkit-transform: scale(1.2) rotate(360deg) translate(0px);

-o-transition: all 1.5s ease;

-moz-transition: all 1.5s ease;

-webkit-transition: all 1.5s ease;}

6. simpan template sobat. dan lihat hasilnya, 

• Membuat Gambar Berputar 360 derajat Pada Gambar Tertentu Saja

1. pertama login ke blog kawan 

2. Copy kode Script Berikut 

Klik show untuk melihat kode script

Continue

Membuat Gambar Membesar saat disentuh Cursor

Mungkin sebagian Blogger sering melihat gambar yang menjadi besar apabila tersentuh cursor. Dalam dunia blogging fitur seperti ini sering disebut dengan nama Image Zoom Effects atau Hover Zoom Smooth Effects. Fitur yang satu ini lumayan banyak di senangi para blogger walaupun sebenarnya dengan memasang Image Zoom Effects ini di blog dapat menggangu pengunjung yang sedang membaca postingan kita.

Postingan ini saya buat untuk melengkapi Tutorial di blog ini, buat sobat yang ingin memasangnya silakan Anda ikuti tutorial dibawah ini.

Cara Membuat Gambar Membesar Saat disentuh Cursor :

• Masuk ke akun blogger sobat.
• Pilih Template > Edit HTML.
• Ceklis / Centang Expand Widget Template.
• Cari kode ]]></b:skin> , gunakan fungsi Find dengan menekan tombol CTRL+F pada keyboard.
• Kalau sudah ketemu, letakkan kode berikut tepat di atas kode ]]></b:skin>
  
  .post img, table.tr-caption-container { border:none; max-width:560px; height:auto; -o-transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; }
  .post img:hover { -o-transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform: scale(1.5); -o-transform: scale(1.5); -webkit-transform: scale(1.5); -webkit-border-radius: 0px 0px; -moz-border-radius: 0px / 0px; -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6); }
• Terakhir klik Simpan Template. Sekarang lihat hasilnya di blog Sobat.

Semoga tutorial singkat ini bisa bermanfaat...

8 Saudara

                                       

Continue