Sabtu, 22 Februari 2014

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 ★ ★ ★ ★ ★
  • Thumbnail 1
  • Thumbnail 1
  • Thumbnail 1
  • Thumbnail 1
  • Thumbnail 1

!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 Anda
  2. Buka salah satu dashboard blog Anda 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/panduantemplateblog.com.cloud-zoom.1.0.2.js' type='text/JavaScript'/>
    ! Untuk kode javascript ini harap di upload sendiri ke file host milik Anda 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

    Cara Memasang Colud Zoom Image Plugin Blogspot

    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 Anda gunakan tabel dengan sub tabel horizontal

Bagaimana mudah bukan untuk memasang cloud zoom image kedalam blogspot?

Cara Memasang Cloud Zoom Image Plugin Blogspot Rating: 4.5 Diposkan Oleh: ana sriwahyuni

9 komentar:

  1. Bagus sekali nih tutorialnya, saya bookmark dulu nanti kapan2 saya praktekan :)

    BalasHapus
    Balasan
    1. makasih mas Heri, silahkan dan semoga bermanfaat :)

      Hapus
  2. Wah keren nih mbak...kapan2 tak nyobain

    BalasHapus
    Balasan
    1. silahkan mas, semoga bermanfaat :)
      btw, saya suka tampilan blognya, kereng banget..

      Hapus
  3. boss sorry new bie nanya boss.. file mana yang di upload sendiri ke web hosting kita boss

    BalasHapus
    Balasan
    1. silahkan buka link kode https://dl.dropboxusercontent.com/s/lcc5mkqbqzwg0lt/panduantemplateblog.com.cloud-zoom.1.0.2.js d browser, salin dan upload isinya ke hosting Anda :)

      Hapus
  4. tutorialnya mantap sis, supaya jadi responsive ada yg perlu ditambahin ga ?

    BalasHapus
    Balasan
    1. kalau template sudah menggunakan template responsive, otomatis akan menyesuaikan dengan tampilan ponsel atau smartphone yang digunakan tapi untuk fungsi zoomnya kemungkinan tidak semua smartphone atau ponsel bisa

      Hapus
  5. bu bingung banget ini......cara masukan ling gambarnya bagaimana kok ..ga bsa2 ya, ada contohnya ga, untuk yang gambarnya beberapa buah,,,

    BalasHapus

Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
Terimakasih

Direktori

direktori weblogger
Direktori WeBlog Indonesia