Cara Buat Gambar Pratinjau

Kali ini Saya akan membahas cara membuat efek Pratinjau Gambar (Image Preview) dengan jQuery pada artikel blog. Sepintas efek ini mirip dengan "Gambar dengan Efek Membesar".
Dengan jQuery semuanya menjadi lebih mudah.

Cara membuatnya sebagai berikut :

• Login ke blogger.com, jika sudah,
• Pilih Tata Letak / Rancangan → Edit HTML → Centang Expand Template Widget
• Cari kode ]]></b:skin> agar mudah mencari tekan f3
• Copy paste di bawah ini tepatnya di atas Kode ]]></b:skin>

/* ---------------

Easiest Tooltip and Image Preview with jQuery

---------------------------------- */

#Imagetip{

    margin:0;

    padding:0;

}

#Imagetip li{

    list-style:none;

    float:left;

    display:inline;

    margin-right:10px;

}

/*  */

#preview{

    position:absolute;

    border:1px solid #ccc;

    background:#333;

    padding:5px;

    display:none;

    color:#fff;

    }

• Copy paste di bawah ini tepatnya di atas Kode </head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

<script src="http://kangdadang.googlecode.com/files/main2.js" type="text/javascript"></script>

• Simpan dan lihat hasilnya

• Untuk memanggilnya Copy paste di bawah ini Anda bisa meletakkan di Sidebar atau di Postingan

<ul id="Imagetip">

<li><a class="preview" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOCPGOZPoVrEliJ_LBaRI3InnBVS_h3kRP86xUPqhC4LoFBL2aqDDwhXhOF4X89O8vDG5lj9jp6-sXlwZfCuqDYebmCKG7hodzegO58m_tu0IjDA5QQEassUE_1vj7_9D6nVsHnFC32hs/s1600/1.jpg%20" title="Lake and a mountain"> <img alt="gallery thumbnail" height="75px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOCPGOZPoVrEliJ_LBaRI3InnBVS_h3kRP86xUPqhC4LoFBL2aqDDwhXhOF4X89O8vDG5lj9jp6-sXlwZfCuqDYebmCKG7hodzegO58m_tu0IjDA5QQEassUE_1vj7_9D6nVsHnFC32hs/s1600/1.jpg" width="100px" /></a></li>

<li><a class="preview" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPiSTeCwl27Z2a_Uw7f0WWUKa9OSqj1qen6So56QVvojjxu9D-HfcApJBR8hBfgQH0HI2jwX4BpnZ_0hHpzsxoSY_2_YnXz4ZI86HVeK5wlRSo-4FZYLhq2YP2n1ofGEP1JV1fEfvqwoQ/s1600/2.jpg" title="Fly fishing"><img alt="gallery thumbnail" height="75px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPiSTeCwl27Z2a_Uw7f0WWUKa9OSqj1qen6So56QVvojjxu9D-HfcApJBR8hBfgQH0HI2jwX4BpnZ_0hHpzsxoSY_2_YnXz4ZI86HVeK5wlRSo-4FZYLhq2YP2n1ofGEP1JV1fEfvqwoQ/s1600/2.jpg" width="100px" /></a></li>

<li><a class="preview" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg9VQ5Ve6NtN9UxjFx40G9eJ1Mop8bo1Q2EDaMDEc37HdRpDOw29ePd5syAyOnQCKK6CfcylENo9bVcSvFX-XTEts-HUGIqRXhyphenhyphenvkVwl046lIenOGSRwt2Q5YWcP4gYOl8ekqzwO2pSH0/s1600/3.jpg" title="Autumn"><img alt="gallery thumbnail" height="75px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg9VQ5Ve6NtN9UxjFx40G9eJ1Mop8bo1Q2EDaMDEc37HdRpDOw29ePd5syAyOnQCKK6CfcylENo9bVcSvFX-XTEts-HUGIqRXhyphenhyphenvkVwl046lIenOGSRwt2Q5YWcP4gYOl8ekqzwO2pSH0/s1600/3.jpg" width="100px" /></a></li>

<li><a class="preview" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmfMe9sQIb_L7BlMTiSEh2eAVrkohJ4ml4NAstzddBK_sZqjQ38Y2tlrZ77crpAMO8X9tftOTXBJ_R61LpGkQRbkidMuTSxAprJUhJLjAPgzEU1vgvJiJNACN36-SkpVN4qaUL__uNjk4/s1600/4.jpg" title="Skiing on a mountain"><img alt="gallery thumbnail" height="75px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmfMe9sQIb_L7BlMTiSEh2eAVrkohJ4ml4NAstzddBK_sZqjQ38Y2tlrZ77crpAMO8X9tftOTXBJ_R61LpGkQRbkidMuTSxAprJUhJLjAPgzEU1vgvJiJNACN36-SkpVN4qaUL__uNjk4/s1600/4.jpg" width="100px" /></a></li>

</ul>

Demo bisa dilihat disini

• Gantilah tulisan yang berwarna Merah dengan Image milik Anda,

Selamat Mencoba !