Cara membuat efek zoom atau membesar pada gambar blog

Bos Tutorial - Cara membuat efek zoom atau membesar pada gambar blog. Gambar yang ada di sebuah halaman atau isi postingan sebuah blog merupakan sebuah daya tarik tersendiri yang dapat membuat pengunjung blog suka terhadap blog tersebut. Apa lagi kalau gambarnya bisa membesar atau zoom beberapa kali lipat pada saat disentuh oleh kursor (tanpa klik gambar tersebut). Pastinya akan terlihat tampak bagus tuh. 

Nah, pada kesempatan ini saya akan memberikan tutorial kepada anda bagaimana membuat gambar atau foto yang ada didalam blog anda dapat membesar atau zoom pada

saat disentuh kursor. Baiklah, langsung saja ikuti langkah-langkah dibawah ini untuk cara settingnya. Cukup mudah ko'.

Pertama silahkan anda log in ke blog anda.

Selanjutnya silahkan cari menu template dan klik menu "template" tersebut seperti gambar dibawah ini.

Selanjutnya silahkan klik "edit html" seperti gambar dibawah. Jangan lupa sebelum klik edit template ada baiknya anda download dulu template anda dengan klik Cadangkan atau pulihkan".

Selanjutnya anda akan dibawa ke halaman editor template anda dan silahkan cari kode ]]></b:skin>. atau dengan cara cepatnya dengan cara klik ctrl+f secara bersamaan pada editor template anda. Kalau berhasil, kurang lebih hasilnya seperti gambar dibawah ini nih. 

Silahkan masukkan kode diatas (]]></b:skin>) pada kotak tersebut lalu tekan enter. Nanti akan keluar kode tersebut seperti gambar dibawah yang berlatar orange.

Selanjutnya silahkan masukkan kode dibawah ini tepat diatas kode ]]></b:skin>.

.post img{

-webkit-transform:scale(0.8);

-moz-transform:scale(0.8);

-o-transform:scale(0.8);

-webkit-transition-duration: 0.5s;

-moz-transition-duration: 0.5s;

-o-transition-duration: 0.5s;

opacity: 0.7;

margin: 0 2px 2px 0;

}

.post img:hover{

-webkit-transform:scale(1.1);

-moz-transform:scale(1.1);

-o-transform:scale(1.1);

opacity: 1;

}

Seperti gambar dibawah tuh contoh hasilnya kalau sudah ditambahkan kode diatas. Jika sudah silahkan klik "preview template" jika ingin melihat previewnya dan kalau sudah mantap silahkan klik "save template".

Gimana nih tutorialnya, cukup mudah kan cara membuat gambar yang ada di blog membesar atau tampil zoom saat disentuh mouse. Untuk melihat contohnya ya gambar-gambar yang ada di blog ini nih. he.he.

Ok, mungkin cukup sampai disini saja dulu tutorial saya, mudah-mudahan dapat bermanfaat bagi anda dan silahkan tunggu tutorial-tutorial saya berikutnya.

Tweet

Subscribe to receive free email updates: