Wednesday, August 17, 2011

Cara membuat efek zoom pada text

Pada postingan kali ini akan mambahas tentang cara membuat efek zoom pada gambar. Efek zoom ini berguna untuk menghemat tempat sehingga gambar yang ukurannya besar bisa menggunakan efek zoom ini untuk menghemat tempat.
Langkah-langkahnya :
1. Masuk ke akun blog sobat.
2. Klik Rancangan.
3. Klik Edit HTML.
4. Cari kode ]]></b:skin>Untuk mempermudah pencarian tekan ctrl+f.
5. Copy kode dibawah ini dan pastekan diatas kode ]]></b:skin>.
/* Zoom Efek */.thumbnail{position:relative;z-index:0}.thumbnail:hover{background-color:transparent;z-index:50}.thumbnail span{position:absolute;left:-1000px;visibility:hidden;color: black;text-decoration: none}.thumbnail span img{border-width:0;padding:2px}.thumbnail:hover span {visibility: visible;top: 0;left: 60px}
6. Klik Simpan Template.
7. Memulai posting baru pada blog sobat.

8. Untuk membuat text zoomnya berikut contoh gambarnya.

<a href="http://s643.photobucket.com/albums/uu155/miskahiper/?action=view&current=vaio-zoom-1.jpg" target="_blank"><img src="http://i643.photobucket.com/albums/uu155/miskahiper/vaio-zoom-1.jpg" border="0" alt="Photobucket"></a>


9. Kemudian hapus tulisan yang berwarna hijau dan tambahkan dengan tulisan yang berwarna merah. Sehingga menjadi seperti ini :


<a class="thumbnail" href="#thumb">Contoh Gambar<span><img src=http://i643.photobucket.com/albums/uu155/miskahiper/vaio-zoom-1.jpg /></span></a>


Keterangan :
Contoh Gambar : Silahkan sobat ganti denga kata-kata yang sobat inginkan.


10. Copy kode pada langkah No.9 dan pastekan di Edit HTML pada Kotak Postingan blog sobat.

11. Klik Terbitkan Entri.


No comments:

Post a Comment