Cara buat Gambar Pratinjau di blogspot

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&#8221; type=”text/javascript”></script>

<script src=”http://kangdadang.googlecode.com/files/main2.js&#8221; 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 href=”https://lh6.googleusercontent.com/-03QKsJUkcV8/TY2ly3UVyhI/AAAAAAAAAew/fW3PWnO7aZM/s1600/1.jpg%20&#8243; title=”Lake and a mountain”> <img alt=”gallery thumbnail” height=”75px” src=”https://lh6.googleusercontent.com/-03QKsJUkcV8/TY2ly3UVyhI/AAAAAAAAAew/fW3PWnO7aZM/s1600/1.jpg&#8221; width=”100px” /></a></li>

<li><a href=”https://lh5.googleusercontent.com/–YBF3BHoimI/TY2l2z90BNI/AAAAAAAAAe4/TT_n1DYdaUs/s1600/2.jpg&#8221; title=”Fly fishing”><img alt=”gallery thumbnail” height=”75px” src=”https://lh5.googleusercontent.com/–YBF3BHoimI/TY2l2z90BNI/AAAAAAAAAe4/TT_n1DYdaUs/s1600/2.jpg&#8221; width=”100px” /></a></li>

<li><a href=”https://lh3.googleusercontent.com/-TemuZjaX5YI/TY2l78o61xI/AAAAAAAAAfA/hrs2T9Px7Q8/s1600/3.jpg&#8221; title=”Autumn”><img alt=”gallery thumbnail” height=”75px” src=”https://lh3.googleusercontent.com/-TemuZjaX5YI/TY2l78o61xI/AAAAAAAAAfA/hrs2T9Px7Q8/s1600/3.jpg&#8221; width=”100px” /></a></li>

<li><a href=”https://lh3.googleusercontent.com/-M1XDI2YFVTw/TY2mCmsHraI/AAAAAAAAAfI/dsEPh29oUBE/s1600/4.jpg&#8221; title=”Skiing on a mountain”><img alt=”gallery thumbnail” height=”75px” src=”https://lh3.googleusercontent.com/-M1XDI2YFVTw/TY2mCmsHraI/AAAAAAAAAfI/dsEPh29oUBE/s1600/4.jpg&#8221; width=”100px” /></a></li>

</ul>

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

(Sumber dari : buka-rahasia.blogspot.com)

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: