Selamat Datang di Blog Karrysta buat Sobat semua
Kunjungan Anda ini sangat bermanfaat sekali untuk kelangsungan dan ke lestarian Blog Karrysta,
Semoga apa yang saya Bagikan di sini senantiasa bisa bermanfaat dan memberikan motivasi dan apresiasi untuk kita semua
Mudah-mudahan silaturrahmi dan Ukhuwah antar blogging semakin erat untuk tetap saling berbagi Terima kasih .. Salam hormat.

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

Berlangganan lewat email pada post baru Blog : Karrysta.

Next
« Prev Post
Previous
Next Post »

42 komentar

Dulu saya pernah masang zoom gambar,trus ganti template.tp lupa nyimpan script nya.Kapan2 saya coba lagi mas.trimakasih!

kalo manual pasang class itu lho yang bikin saya males :D mending gambarnya satu, lha kalo banyak haha

Izin nyimak dulu ya mas....moga2 cepet bisa di praktekin
oya..ngomong2 itu gambar istrinya ya mas...hehehe cantik kayak artis

weis mantap nih .. keren kang prabu hehe

hehehe blm pernah coba sih,, tapi bisa d bookmark dlu siapa tau nanti butuh .
maksih ya mas :)

sayah belum pernah coba mas...nanti deh sayah coba biar manteb gambarnya jadi nge zoom

silahkan di bungkus teh... geratis gak usah bayar ..

kalau gambarnya banyak dan gak mau repot bisa cari kulir kang hehehe

sipp uyy mantap ah kang.. hehe maknyuss jadinya

Pernah waktu itu saya memasang kode buat zoom gambar cuma karna saya ganti template akhirnya udah gak bisa lagi deh...pengen bikin lagi cuma saya gak ngerti scriptnya hehe :D

Wah bagus ini tutorialnya mas karis. Jadi gambar posting akan terlihat jelas, alias nggak kecil lagi. Luar biasa tutorial ini. Izin praktek mas karis. Terimakasih ya :)

wih sip deh mas.. memang terkadang kita menjumpai gambar gambar yang kurang jelas.. mungkin dengan trik ini gambar akan terlihat jelas ya mas.. karena gambar akan terlihat lebih besar hehehe

Silahkan bookmark script ini Mas Agus, semoga bermanfaat

Mas Itan kalau males pasang class style, mending pasang yang
Preview zoom Otomatic aja, Kunjungi posts dar blog ini :
http://karristaent.blogspot.com/search?q=zoom&submit=Cari+Artikel+disini

Wah boleh juga ide nya tuh Mang Yono..? hhh :)

Silahkan Mbak Jenx, semoga bermanfaat yah Mbak Yu?
Betul Mbak itu Istri saya Mbak bukan Artis koq Mbak.

Terima kasih pendapat nya Kang Mas Ruly anu Bageur, hhh :)
Terima kasih juga buat Kang Mas Andes nu pang Kasep na :D

Mbak Iin silahkan di coba dulu yah Mbak..?

Mamang Yono, Mangga Mang di Raosan nya Mang?

Silahkan Mas Marnes jika berkenan script yang ni coba saja Mas?

Mbak Ririn terima kasih saya ucapkan atas pendapatnya yah Mbak?

Mas Nady, begitulah kurang lebihnya silahkan Mas moga bermanfaat
Terima kasih buat semua Sobat blogging, Mas dan Mbak yang telah
Menympatkan waktunya untuk berkunjung dan berbagi, "Salam"

lumayan banyak ya mas skripnya, tapi hasilnya lumayan menarik, hehehe :)
oke deh saya bookmark ntar saya praktekkan kalo sewaktu2 ingin mencoba :D
makasih sharenya mas karryst ^_^

gambarnya kan ada 2 org, masa istrinya mas karryst dua, hehehe ^_^

Asik nih gambar bisa di zoom. Terimakasih atas sharingnya, lagi pake hape sehingga tak bisa liat demonya.

Sama-sama Mbak Indri, gak begitu banyak ringan koq Mbak?
Silahkan Mbak Indri semoga bermanfaat

Mas DJ, Betul Mas sama-sama oh ya gi pake Hp
Yah kapan-kapan bisa di coba Mas DJ, Thanks visiting

Gak cuma satu koq Istri saya yang sebelah kiri
Yang pakai selendang di leher tuh Mbak Indri.. :)

Keren mas..jadi lebih jelas ya keliat gbr nya :)

Bisa d praktekin....klo ol pake lepi...
Thanks mas n hepi blogging

Kaya nya betul deh Mas Budi kali ini mah.. gak becanda kan,..? hh

Silahkan Mbak Cii, semoga bermanfaat
Happy blogging pula yah Mbak Cii Yuniaty.?

Ohya mas, kenapa gk gunain css img saja ketimbang .thumbnail? kan repot jga kalau msti ganti satu persatu kode gambar yg uda diposting :)

lha yang satunya lagi siapa mas hehe...

yang pake karet dua nggak pedes yah :)

Betul mbak, jadi kalau yang matanya minus bisa lebih jelas liat gambarnya soalnya lebih besar hehe...

iya mas Budi soalnya udah ada efek zoomnya :)

saya juga pengen nyoba mas Karysta, cuma ini masih belum sempet hehe...
Efek preview zoomnya keren mas, sip deh :)

Mas Agri ini trik untuk style, gambar postingan cara manual
Memasang effects nya Mas, jika Mas ingin yang otomatic CSS
Images preview effects zoom nya kunjungi artikel lainya di blog
Ini link nya :
http://karristaent.blogspot.com/search?q=zoom&submit=Cari+Artikel+disini

Yah Mas Anthonie, kalau sibuk jangan makasain, selesaikan
Dulu tugas dan rutinitas itu lebih bermanfaat, setelah selesai
Baru kita becanda lagi dan berselancar lagi di blogging hhhh

Tutornya sangat bermanfaat gan :)

Bisa koprol juga ndak gbr nya..hehe :)

Mas anthonie kan lagi cuti mas :)

ane kasih 2 jempol untuk anda,
karena ane punya 2 jempol di tangan saya

Lho iya toh Mas Budi Mas Anthonie lagi di pe cuti,.? hhh
Katanya lagi sibuk..? Sibuka apa haooo, sibuk apa sibuk?

Kebetulan gambar posting di blog saya kecil-kecil mas, jadi penting sekali untuk diperbesar ukurannya supaya bisa terlihat jelas ^^

Terima kasih atas pendapatnya dan kunjunganya
Mas Rahmat dan Mas Didi, salam sukses ja Mas :)

Karetnya tiga..ada kulkasnya ya :)

Selamat ya mas karis bahwa Blog Karristaent terpilih menjadi blog terbaik versi Cara Ririn ^^

Terima kasih tutorialnya Mas. Sangat bermanfaat sekali

Jangan Komentar Promosi, Link Hidup, Spam Karena akan terhapus
Silahkan untuk "Follower blog, atau Berlangganan Lainya" di blog ini
Untuk Mengkonversi kode dan icon Smiley silahkan Klik dibawah ini

Show Konversi KodeHide Konversi Kode Show SmileyHide Smiley Follower

Terima Kasih atas Kunjungan dan Komentar nya
Copyright © 2015. Karrysta - All Rights Reserved | Template Created by Kompi Ajaib | Modified : Saud Karrysta | Proudly powered by Blogger