»Unlabelled » Cara Mudah Membuat Effek Zoom Gambar di Blog

Cara Mudah Membuat Effek Zoom Gambar di Blog

Wednesday, January 11, 2012 by Keith Mercer

Selamat membaca .Cara Mudah Membuat Effek Zoom Gambar di Blog - Sobat blogger mungkin masih sedikit yang tau tentang Membuat Effek Zoom Gambar di Blog, banyak kegunaan dari effek ini. Effek ini menggunakan jQuery, sehingga tampilannya akan lebih lembut dan halus. Ada kalanya kita melihat suatu gambar instructor yang tampilan gambarnya sangat kecil dan tidak jelas, Effek Zoom ini menampilkan gambar dengan ukuran sebenarnya, buat sobat yang penasaran, contohnya bisa sobat lihat di SudutPhoto. Jika sobat berminat, ikuti langkah-langkah berikut ini; Cara Mudah Membuat Effek Zoom Gambar di Blog Masuk ke blogger; Klik Perancangan lalu klik Edit HTML; Carilah kode ]]></b:skin> Kemudian sisipkan kode berikut ini tepat di atasnya: /* Zoom Image http://m-wali.blogspot.com ------------------------------- */ div.jquery-image-zoom { line-height: 0; font-size: 0; z-index: 10; border: 5px solidified #fff; margin: -5px; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); } div.jquery-image-zoom a { background: url(http://lh6.ggpht.com/_xcD4JK_dIjU/TEfN4VrRQPI/AAAAAAAAESY/so-0qObS1BM/d/jquery.imageZoom.png) no-repeat; display: block; width: 25px; height: 25px; position: absolute; left: -17px; top: -17px; /* IE-users are prolly utilised to close-link in right-hand crossway */ *left: auto; *right: -17px; text-decoration: none; text-indent: -100000px; outline: 0; z-index: 11; } div.jquery-image-zoom a:hover { background-position: mitt -25px; } div.jquery-image-zoom img, div.jquery-image-zoom embed, div.jquery-image-zoom object, div.jquery-image-zoom div { width: 100%; height: 100%; margin: 0; } Selanjutnya cari kode    </head> Kemudian sisipkan kode berikut ini tepat di atasnya: <!-- Zoom Image cipher playscript www.wakrizki.net --> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>  <script src='http://rizki-khaizir.googlecode.com/files/jquery.imageZoom.min.js' type='text/javascript'/>  <script type='text/javascript'>  jQuery(document.body).imageZoom();  </script> Langkah terakhir adalah simpan model sobat. Semoga berhasil oke mudah bukan? demikian Cara Mudah Membuat Effek Zoom Gambar di Blog judgement 4.5http://m-wali.blogspot.com/feeds/posts/defaultterima kasih
Angga Sanusi

Posted in: | | |  

Bookmark and Share

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)