Asal Usul Dandangan

TUTORIAL MEMBUAT TOOLTIP PREVIEW IMAGE DENGAN JQUERY

1. Login keakun Blogger

2. Pilih Template  Klik HTML

3. Kemudian anda cari kode ]]></b:skin>

4. Copy kode dibawah ini dan letakkan diatasnya

/*Tooltip preview*/

#preview{ position:absolute; border:5px solid #A9A9A9;-webkit-box-shadow: 2px 2px 10px 8px ; box-shadow: 2px 2px 10px 8px ; border-radius:10px; background:#64950;border-radius:10px; padding :15px; display:none; color:#fff;}

5. Selanjutnya anda cari kode </head>

6. Copy code dibawah ini dan terapkan diatasnya

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.js' type='text/javascript'/>

<script src='https://aakyos.googlecode.com/svn/trunk/image_priview.js' type='text/javascript'>

//<![CDATA[

// Tooltip Preview Image

$('.post-body, .post-body p, div.post-body, #img-body, #main_img').each(function () {

    $('Image[class="Preview"]').replaceWith(function () {

        return $('<img><code>' + $(this).html() + '</code></img>');

    });

});

//]]>

</script>

Catatan:

Jika di Template anda suda ada code yang saya beri warna biru maka anda lewati code tersebut

7.Menampilkan Tooltip Preview Image

Untuk menampilkan gambar diperlukan kode pemanggil, terapkan kode dibawah dipostingan pada mode HTML ,  jadi gambar diposting dulu dalam mode HTML, baru kode dibawah ini dimasukkan ke mode HTML.

 

<a class="preview" href="Url gambar yang akan dijadikan priview" ><img src="Url gambar yang muncul di postingan"></a>

contoh di mode html:

Demikian Membuat Tooltip Preview Image Dengan jQuery, semoga bermanfaat!

Demo gambar: