Pages

Friday 6 April 2012

Membuat Widget Slideshow dengan Thumbnail


Bagikan :




B

agaimana Cara Membuat dan menampilkan widget Slideshow dengan thumbnail Pada Blogspot ? Widget ini menggunakan script dari  Jon Design's Smooth Gallery Berikut langkah-langkah cara Memasang Slideshow  yang perlu dilakukan untuk Pasang widget ini.

Pertama buat gambar dengan ukuran yang diinginkan. Jumlahya terserah, yang penting resolusinya harus sama, dalam post ini saya menggunakan contoh tiga gambar dengan resolusi 300x200 pixel.  Setelah itu upload ketiga gambar keblog.

Edit Halaman >>Tata letak Blogger >> tambahkan gadget >> HTML/Javascript >> berikan judul 'Featured Post' Simpan (Isikan apa saja didalamnya, terserah karena tidak berpengaruh  ),  letakkan dimanapun sesuka hati.

Setelah itu masuk ke Edit HTML >> centang "Expand Template Widget" Cari kode  ]]></b:skin> (gunakan Ctrl+F pada browser [mozzila, IE] untuk mencari kode ini).  Setelah Itu Copy dan Paste-kan kode berikut tepat diatasnya.

#myGallery { width: 300px !important; height: 200px !important; overflow: hidden; }

Langkah selanjutnya copy dan paste kode berikut ini tepat di atas kode </head>:


Lanjut>>
Cari kode title='Featured Post' Pada kode-tersebut (gunakan Ctrl+F lagi ). Dibawah kode tersebut, terdapat kode berikut:

<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

Sekarang ganti kode yang berwarna merah dengan kode berikut:
<div> 
<script type='text/javascript'>
function startGallery() {
var myGallery = new gallery($(&#39;myGallery&#39;), {
timed: true,
showArrows: false,
showCarousel: false
});
}
window.addEvent(&#39;domready&#39;, startGallery);
</script>
<div id='myGallery'>
<div class='imageElement'>
<a class='open' href='Url posting yang ingin ditampilkan'/> /* tautan/link ke posting-an 1 */
<img class='full' src='URL gambar' /> /* Alamat link gambar 1 yang sudah di-upload */
<h3>Judul Artikel 1</h3>
<p>Deskripsi Artikel 1</p>
</div>
<div class='imageElement'>
<a class='open' href='Url posting yang ingin ditampilkan'/> /* tautan/link ke posting-an 2 */
<img class='full' src='URL gambar' /> /* Alamat link gambar 2 yang sudah di-upload */
<h3>Judul Artikel 2</h3>
<p>Deskripsi Artikel 2</p>
</div>
<div class='imageElement'>
<a class='open' href='Url posting yang ingin ditampilkan'/> /* tautan/link ke posting-an 3 */
<img class='full' src='URL gambar' /> /* Alamat link gambar 3 yang sudah di-upload */
<h3>Judul Artikel 3</h3>
<p>Deskripsi Artikel 3</p>
</div>
</div>
</div>

Perhatikan keterangan yang berwarna biru dan hijau sebagai keterangan...

Kalau ingin mengubah ukuran yang lebih besar, ubah  saja ukuran gambar yang di-upload, tapi jangan lupa untuk mengubah ukuran lebar dan tinggi widget (yang berwarna biru) pada kode #myGallery di atas kode </b:skin> tadi.

Selamat mencoba 

Ditulis oleh:ghany maulana
Media Belajar Diperbarui pada: Friday, April 06, 2012

0 comments:

Terima kasih atas kunjungan anda. Media Belajar

Post a Comment