Membuat Preview Zoom Gambar Postingan

Kembali beraktivitas blogging mengisi waktu luang di sela waktu yang di bagi-bagi
Antara rutinitas dan kecintaan dengan Blogger yang sangat saya sukai walau dengan
Keadaan apapun tetap exiz untuk saling berbagi kemarin saya sudah posting tentang
Minum Es Buah Lontar Menyegarkan Badan, dan pada artikel kali ini yang saya akan
Publikasi sekarang ini, membahas tentang gambar yang berada pada postingan blog
Untuk lebih lengkap nya, jika anda tertarik silahkan di simak tutorialnya di bawah ini

Pada tutorial sebelum nya saya sudah berbagi, Membuat effects zoom semua gambar diblog
Mungkin di artikel kali ini masih membahas seputar gambar dengan Effects Zoom tapi pada
Postingan yang sekarang saya bagikan ini, akan sedikit berbeda dengan tampilan sebelumnya
Dimana markup dan juga CSS nya sedikit saya poles agar sobat bisa memanfaatkan script ini
Langsung saja bagi sobat semua yang ingin mencoba berikut di bawah ini cara pemasanganya

Cara memasangnya :

Masuk dasboard blog anda kemudian cari kode ]]></b:skin> tekan Ctrl + f untuk memudahkan
Pencarian kodenya, kalau sudah ketemu copy kode di bawah ini paste diataskode ]]></b:skin>

  <style type="text/css">
    .thumbnail{
    position: relative;
    z-index: 0;
    }
    .thumbnail:hover{
    background-color: transparent;
    z-index: 50;
    }
    .thumbnail span{ /*CSS for enlarged image*/
    position: absolute;
    background-color: lightyellow;
    padding: 5px;
    left: -1000px;
    border: 1px dashed gray;
    visibility: hidden;
    color: black;
    text-decoration: none;
    }
    .thumbnail span img{ /*CSS for enlarged image*/
    border-width: 0;
    padding: 2px;
    }
    .thumbnail:hover span{ /*CSS for enlarged image on hover*/
    visibility: visible;
    top: 0;
    left: 60px; /*position where enlarged image should offset horizontally */
    }
    </style>

Preview peninjauan barangkali ada yang salah, atau, Klik Save - simpan template

Cara menggunakan Preview zoom gambar :

Copy kode Html di bawah ini pada saat anda membuat artikel baru pada kolom Html
Jangan di mode Compose, dan pada saat mempublikasi postinganpun tetap pada mode
Html agar Effects Preview Zoom nya bekerja secara Offtimal. copy kodenya di bawah ini

<a class="thumbnail" href="http://karristaent.blogspot.com" title="Membuat Preview Zoom"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_BxChMQDbxiUMHOAgBWj9pO9ABUH8ynbaBpbqMJXhQB-E7lsJx6r4RYxgAGoRu55MMwQoy7FYOqvL4eG0s1n_ft-mu7iZo6gFvqWiFPTYbtvhoPMNRp-VaVePRVFtUQagCDGgW6NxKBUx/s1600/Membuat+Preview+Zoom.jpg" width="100px" height="66px" border="0" /><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_BxChMQDbxiUMHOAgBWj9pO9ABUH8ynbaBpbqMJXhQB-E7lsJx6r4RYxgAGoRu55MMwQoy7FYOqvL4eG0s1n_ft-mu7iZo6gFvqWiFPTYbtvhoPMNRp-VaVePRVFtUQagCDGgW6NxKBUx/s1600/Membuat+Preview+Zoom.jpg" />Membuat Preview Zoom Gambar Postingan</span></a>

Keterangan kode diatas :

Ganti yang berwarna Orange dengan link artikel baru di blog anda
Ganti yang berwarna Biru ada 2 dengan Title + Alt gambar artikel
Ganti yang berwarna Merah dengan URL gambar yang akan di tampilkan pada artikel
Blog anda, cara mengambil URL gambar siapkan gambar yang akan di jadikan cover
Pada artikel, Pada dalam posisi artikel baru masukan type jenis gambar pada menu icon
Insert images setelah gambar masuk di postingan ambil URL nya, atau anda upload jenis
Gambar pada penyedia site hosting gratis seperti foto bucket atau hosting gratis lainya

Pernyataan :

Setelah semuanya dikerjakan sesuai prosedur diatas dengan benar maka gambar postingan
Di blog anda pun akan menampilkan gambar postingan dengan Effects review zoom gambar
Sekian artikel ini semoga bisa bermanfaat buat anda, selamat mencoba " Happy blogging "