Cara Memasang Cloud Zoom Image Plugin Blogspot

Nah, seperti yang saya tulis kemarin tentang Cloud Zoom Image Plugin: Efek Memperbesar Gambar Produk, sedikit telah saya jelaskan beserta demonya dan pada artikel tersebut saya belum menjelaskan Cara Memasang Cloud Zoom Image ini. Dan pada artikel, saya akan menjelaskan cara kerja plugin tersebut jika dipasang ke dalam Blogspot

Seperti yang telah saya jelaskan sebelumnya, Colud Zoom Image merupakan plugin sederhana yang awalnya digunakan untuk blog dengan Wp self hosting dan digunakan untuk menampilkan detail sebuah gambar. Cloud Zoom Image ini biasanya digunakan didalam blog atau situs toko online. Meskipun awalnya digunakan untuk Wp, ternyata plugin tersebut bisa dipasang di Blogspot, seperti yang terlihat pada demo berikut ini

	Produk	Sabana - National Geographic
		Árboles palma se encuentran dispersos repartidos en la sabana de Madagascar
		Photo and caption by Google Search in Sabana keywords
	Stok	Tersedia
	Harga	$29.00 FREE Shipping
	Customer reviews	★ ★ ★ ★ ★

• 
• 
• 
• 
• 

!Cloud zoom image ini saya ambil dari sebuah plugin yang digunakan untuk blog dengan platform Wp self hosting yang dibagikan secara gratis sehingga saya memberanikan diri untuk mengutak-atiknya agar bisa terpasang di Blogspot. Untuk filenya bisa dilihat dan di download di:
WooCommerce Cloud Zoom Image Plugin

Cara Memasang Cloud Zoom Image Plugin Blogspot

1. Login ke akun Blogger sobat
2. Buka salah satu dashboard blog sobat jika di akun Blogger terdapat lebih dari satu blog
3. Pilih menu Template >> Edit HTML
4. Cari kode ]]</b:skin> atau </style> dan masukkan kode CSS Cloud Zoom Image ini sebelum kode ]]</b:skin> atau </style>
   

   .cloud-zoom-lens {
   	border: 4px solid #888;
   	margin:-4px;
   	background-color:#fff;	
   	cursor:move;		
   }
   .cloud-zoom-title {
   	font-family:Arial, Helvetica, sans-serif;
   	position:absolute !important;
   	background-color:#000;
   	color:#fff;
   	padding:3px;
   	width:100%;
   	text-align:center;	
   	font-weight:bold;
   	font-size:10px;
   	top:0px;
   }
   .cloud-zoom-big {
   	border:4px solid #ccc;
   	overflow:hidden;
   }
   .cloud-zoom-loading {
   	color:white;	
   	background:#222;
   	padding:3px;
   	border:1px solid #000;
   }

5. Cari kode </head> dan letakkan kode JavaScript Cloud Zoom Image berikut ini sebelum kode </head>
   <script src='https://dl.dropboxusercontent.com/s/lcc5mkqbqzwg0lt/all-trick-blogs.com.cloud-zoom.1.0.2.js' type='text/JavaScript'/>
   ! Untuk kode javascript ini harap di upload sendiri ke file host milik sobat karena sewaktu-waktu file tersebut bisa terhapus
6. Memasukkan kode Cloud Zoom kedalam gambar
   Perhatikan link url gamabar berikut ini:
   
   <a href="http://link-url-gambar.jpg"><img border="0" src="http://link-url-gambar.jpg" /></a>
   
   Link url gambar diatas adalah umum dan biasa digunakan, agar memiliki efek cloud zoom, tambahkan class="cloud-zoom" dan tambahkan tag id kedalam link gambar seperti berikut ini:
   
   <a class="cloud-zoom" href="http://link-url-gambar.jpg" id="zoom1" rel="adjustX: 10, adjustY:-4, softFocus:true"><img align="left" src="http://link-url-gambar.jpg" /></a>
   
   Link url gambar diatas sudah memiliki efek cloud zoom tapi hanya berdiri sendiri atau hanya satu gambar dan hasilnya seperti berikut ini
   
   
   
   
   Sedangkan untuk menambahkan gambar kecil atau thumbnail galleries atau gambar galeri yang ada di bawah gambar utama seperti pada demo diatas, gunakan link url gambar seperti berikut ini
   
   <a class="cloud-zoom-gallery" href="http://link-url-gambar.jpg" rel="useZoom: 'zoom1', smallImage: 'http://link-url-gambar%20%283%29.jpg' " title="Thumbnail 1"><img alt="Thumbnail 1" src="http://link-url-gambar%20%282%29.jpg" /></a>
   
   <a class="cloud-zoom-gallery" href="http://link-url-gambar.jpg" rel="useZoom: 'zoom1', smallImage: 'http://link-url-gambar%20%283%29.jpg' " title="Thumbnail 1"><img alt="Thumbnail 1" src="http://link-url-gambar%20%282%29.jpg" /></a>
   
   <a class="cloud-zoom-gallery" href="http://link-url-gambar.jpg" rel="useZoom: 'zoom1', smallImage: 'http://link-url-gambar%20%283%29.jpg' " title="Thumbnail 1"><img alt="Thumbnail 1" src="http://link-url-gambar%20%282%29.jpg" /></a>
   
   Hati-hati! Agar gambar galeri benar-benar seperti contoh diatas, sematkan atau sisipkan kode %20%283%29 dibagian akhir link gambar
   Contoh:
   Link gambar http://link-url-gambar.jpg
   Setelah ditambahkan kode maka link gambar menjadi http://link-url-gambar%20%283%29.jpg
   
7. Jika ingin memberikan tambahan artikel atau keterangan disebelah gambar atau seperti pada demo diatas, saya menggunakan tabel untuk mengatur tulisan tersebut dan untuk tabelnya bisa sobat gunakan tabel dengan sub tabel horizontal

Bagaimana mudah bukan untuk memasang cloud zoom image kedalam blogspot?