Kumpulan Trick Blog TErbaru

About

New Trick hayalah blog kecil yang mencoba untuk memberikan dan menyajikan trick dan tips tentang blog
Minggu, 21 Februari 2016

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 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

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

Bagaimana mudah bukan untuk memasang cloud zoom image kedalam blogspot?




Klik untuk melihat kode: :) =( :s :D :-D ^:D ^o^ 7:( :Q :p T_T @@, :-a :W *fck* x@

TOP