Latest News

Cara membuat efek zoom atau membesar pada gambar blog

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 mampu membesar atau zoom beberapa kali lipat pada dikala disentuh oleh kursor (tanpa klik gambar tersebut). Pastinya akan terlihat tampak mengagumkan tuh. 


Nah, pada kesempatan ini aku akan menunjukkan tutorial kepada anda bagaimana membuat gambar atau foto yang ada didalam blog anda dapat membesar atau zoom pada
saat disentuh kursor. Baiklah, pribadi 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 menyerupai gambar dibawah ini.


Selanjutnya silahkan klik "edit html" menyerupai gambar dibawah. Jangan lupa sebelum klik edit template ada baiknya anda unduh 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 risikonya menyerupai gambar dibawah ini nih. 


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


Selanjutnya silahkan masukkan arahan dibawah ini sempurna 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 pola risikonya kalau sudah ditambahkan arahan diatas. Jika sudah silahkan klik "preview template" kalau 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 dikala disentuh mouse. Untuk melihat contohnya ya gambar-gambar yang ada di blog ini nih. he.he.

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