Cara buat Gambar Pratinjau

Kesederhanaan dan mudahnya penerapan pada Blogger menjadi nilai plus tersendiri bagi penulis. Teka-tekinya membuat penasaran untuk menelusuri lebih jauh tentang framework jQuery. Dalam artikel kali ini kita akan menerapkan efek Pratinjau Gambar (Image Preview) dengan jQuery pada artikel blog.Sepintas efek ini mirip dengan "Tampilkan Gambar dengan Efek Membesar". Mungkin beberapa teman sudah mencoba efek tersebut, kelemahan dari efek tersebut adalah kode yang rumit yang harus dimasukan didalam artikel dan hampir serba manual.
Dengan jQuery semuanya menjadi lebih mudah walaupun belum 100% otomatis. untuk Contohnya silahkan lihat ----> disini

Cara membuatnya sebagai berikut:

1. Login ke Blogger

2. Pilih Tata Letak / Rancangan

3. Pilih ke Edit HTML 

4. Centang Expand Template Widget

5. Copy paste dibawah 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;

    }

6. Copy paste dibawah ini tepatnya diatas 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>

7. Lalu Simpan Templete

Untuk memanggilnya Copy paste dibawah ini anda bisa menaruhnya di Sitebar ataupun di Postingan

<ul id="Imagetip">

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

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

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

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

</ul>

Gantilah tulisan yang berwarna Merah dengan Image milik Anda,
Selamat mencoba...

<<SEBELUMNYA                                                                              DAFTAR ISI                                                                             BERIKUTNYA>>