Cara Memberikan Efek Memperbesar (Zoom) Gambar Blog memiliki keuntungan tersendiri yaitu menghemat ruang artikel pada tulisan blog dan selain itu memberikan efek memperbesar gambar blog juga mempercepat proses loading blog. Berapa pun banyaknya gambar yang ingin ditampilkan kedalam artikel tidak akan pernah jadi masalah dan anda juga tidak perlu kwuatir terhadap loading blog anda karena saat proses loading berjalan, yang terbaca adalah gambar kecil yang telah diatur sebelumnya.
Cara memberikan efek memperbesar (zoom) gambar blog ini telah saya gunakan pada salah satu artikel saya yang menggunakan banyak gambar dan bisa anda lihat di cara mengetahui kode template atau pada contoh tampilan gambar berikut ini
Demonya
Silahkan arahkan kursor mouse ke gambar berikut ini
Untuk membuat efek memperbesar gambar blog seperti demo diatas, silahkan ikuti caranya sebagai berikut. Dan jika anda tidak tertarik menggunakan efek zoom gambar blog ini, saya juga telah membuat trik lainnya yang bisa anda baca di Cara Memperbesar Gambar Blog
Berikut Cara Memberikan Efek Memperbesar (Zoom) Gambar Blog
Cara memberikan efek memperbesar (zoom) gambar blog ini telah saya gunakan pada salah satu artikel saya yang menggunakan banyak gambar dan bisa anda lihat di cara mengetahui kode template atau pada contoh tampilan gambar berikut ini
Silahkan arahkan kursor mouse ke gambar berikut ini
Untuk membuat efek memperbesar gambar blog seperti demo diatas, silahkan ikuti caranya sebagai berikut. Dan jika anda tidak tertarik menggunakan efek zoom gambar blog ini, saya juga telah membuat trik lainnya yang bisa anda baca di Cara Memperbesar Gambar Blog
Berikut Cara Memberikan Efek Memperbesar (Zoom) Gambar Blog
- Masuk ke akun blogger anda
- Pilih menu Template
>> Edit Html >> tekan Ctrl+F pada keyboard
Cari kode </head>
Letakkan kode berikut diatas </head>
<script src="http://yourjavascript.com/29031127131/zoomeffectpict.js" type="text/javascript"></script>
<script src="http://yourjavascript.com/82412173123/zoomeffectpict1.js" type="text/javascript"></script>
<style>#preview{position:absolute;border:1px solid #ccc;background:#333;padding:5px;display:none;color:#fff;}</style>
Simpan template
Setelah memasang kode diatas kedalam template blog anda, gunakan kode berikut setiap kali anda ingin memberikan efek memperbesar gambar blog kedalam artikel atau postingan
<a class="preview" href="Ulr Gambar Besar" title="Judul Gambar"><img alt="gallery thumbnail" height="110" src="Ulr Gambar Besar Tapi Kecil" width="170" /></a>
Keterangan
Demikian cara memberikan efek memperbesar (zoom) gambar blog yang mungkin bisa anda gunakan dan semoga bermanfaat. Jika ada kesalahan, silahkan berkomentar untuk artikel ini, cara memberikan efek memperbesar (zoom) gambar blog
<script src="http://yourjavascript.com/29031127131/zoomeffectpict.js" type="text/javascript"></script>
<script src="http://yourjavascript.com/82412173123/zoomeffectpict1.js" type="text/javascript"></script>
<style>#preview{position:absolute;border:1px solid #ccc;background:#333;padding:5px;display:none;color:#fff;}</style>
<a class="preview" href="Ulr Gambar Besar" title="Judul Gambar"><img alt="gallery thumbnail" height="110" src="Ulr Gambar Besar Tapi Kecil" width="170" /></a>
Keterangan
- Ulr Gambar Besar : Ukuran asli dari gambar
- Ulr Gambar Besar Tapi Kecil : Ukuran asli dari gambar yang sudah memiliki ukuran kecil karena sudah memiliki skala 110 untuk tinggi gambar dan 170 untuk lebar gambar
- height="110" : Ukuran tinggi gambar
- width="170" : Ukuran lebar gambar
- Untuk kode JavaScript, jika ia tidak bekerja atau kadaluarsa karena gangguan host, silahkan baca panduannya Disini atau tinggalkan komentar
- Atau pastikan didalam template anda sudah terpasang kode javascript dari Jquery. Jika belum, silahkan ambil kodenya di Jquery.com yang saat sudah berada pada versi 1.9
Demikian cara memberikan efek memperbesar (zoom) gambar blog yang mungkin bisa anda gunakan dan semoga bermanfaat. Jika ada kesalahan, silahkan berkomentar untuk artikel ini, cara memberikan efek memperbesar (zoom) gambar blog
Distributor Pulsa All Operator and PPOB Pendaftaran Gratis, Setelah ditest selanjutnya Silahkan deposit dan Transaksi bagi yang berminat silahkan kunjungi : http://www.fujicelular.web.id/ - http://www.fujicelular.com/
BalasHapus@Taufik Hidayat iklan lagi ya mas Taufik?
BalasHapusthanks infonya
BalasHapusditunggu visit back nya ya
http://cheater-jbr.blogspot.com/
Salam kenal sebelumnya...
BalasHapusAkhirnya nemu juga yang aku cari selama ini, makasih sharingnya.
masih bingung ngedit templatwenya bos???
BalasHapusmass kira kira blog saya sudah bagus ap belum???
BalasHapussoalnya aq masih belajaran.
oke, sob makasiw,, ditunggu kunjungannya http://www.coollapse.tumblr.com
BalasHapusTerima kasih sudah berbagi, ditunggu kunjungan baliknya...
BalasHapusMaaf mas Kode yang terakhir taruh di mana ea???
BalasHapusada di poin no. 6 tuch...
Hapusmakasie sblum.a,,,, klo gmbar.a di kasih link gmn ya caranya,,,, gmbar q tmpatkan di sidebar bukan di postingan
BalasHapusvimax-shop.blogspot.com
Kalau yang otomatis g ada y gan? maksudnya g usah palah nambah kode tiap kali mw posting gambar. terimakasih sebelumnya :)
BalasHapusmbak cara menghilangkan link gambarnya gimana ya,,,, kyak demo yg diatas,,,,,,, &
BalasHapuscara memberikan link pada gambarnya gimana ya,,,,
mohon dijawab donk,,,,,
vimax-shop.blogspot.com
script diatas hanya utk memvisualisasikan efek membesar pada gambar saja, utk memberikan link secara langsung tidak bisa
Hapusouw gitu,,, klo menghilangkan linknya yg aktif bisa ga mbk,,,,???? kyak demo diatas,,,
Hapusdemo diatas tidak menggunakan link aktif apapun mbak Silvie, hanya link gambar itu sendiri..
Hapusdah 2 jam-an lbih sy stay di blogny mba sri...mklm msh newbie msh baca2 artikelnya, artikelnya bagus2 plus demo live-nya...mudah2an ada bbrp yg bs sy gunakan untuk template sy...terima-kasih atas sharenya mba...
BalasHapusbermanfaat
BalasHapushttp://smartphoneandroid-murah.blogspot.com/
cara bikin demo tanpa di klik gimana??
BalasHapustolong info nya :)
demo diatas kan sudah tanpa di klik mas Akbar..
Hapusartikel yg bagus
BalasHapusAda cara yg simple ngak mas ? Kl sudah edit-editan template , saya kurang mengerti.
BalasHapusyang di artikel sudah simpel dan sederhana sekali cukup menambahkan kode script saja kedalam template, kalo yang agak sedikit ruwet silahkan baca di panduantemplateblog.com/2014/02/cara-memasang-cloud-zoom-image-plugin.html tapi lebih bagus :)
Hapus