Menampilkan widget Slideshow dengan thumbnail Pada Blogspot

Widget ini menggunakan script dari  JonDesign’s SmoothGallery. 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 300×200 pixel. 

Setelah itu upload ketiga gambar Keblog Caranya Klik TUTORIAL URL Gambar pada blog

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>:

<script src=’http://mimuha.byethost2.com/javascript/mootools.v1.11.js’ type=’text/javascript’/>
<script src=’http://mimuha.byethost2.com/javascript/jd.gallery.js’ type=’text/javascript’/>
<link href=’http://mimuha.byethost2.com/css/jd.gallery.css’ media=’screen’ rel=’stylesheet’ type=’text/css’/>

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.