Membuat Preview Zoom Gambar Postingan

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

Membuat Preview Zoom Gambar Postingan

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/AVvXsEjy9k5S9EWkk1OZPHlSz43zvU0VKrBFhfuFqjI0YBKKTRPpFGJsVvm0uD-U9MOBAYl9cTRrGKTRbwo0CpoT5wkhieqWZw92fqjc815lKLY3SoWpNPlI_HqBpTQumkA-_-Y3AykfiZf4ZI-m/s1600/Membuat+Preview+Zoom.jpg" width="100px" height="66px" border="0" /><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy9k5S9EWkk1OZPHlSz43zvU0VKrBFhfuFqjI0YBKKTRPpFGJsVvm0uD-U9MOBAYl9cTRrGKTRbwo0CpoT5wkhieqWZw92fqjc815lKLY3SoWpNPlI_HqBpTQumkA-_-Y3AykfiZf4ZI-m/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 "