Tertarik membuat 'Featured Post' seperti yang ada di sebelah kanan blog ini? Ternyata cara membuatnya cukup sederhana (terima kasih pada BloggerBuster ^^).
Widget ini menggunakan script dari JonDesign's SmoothGallery. Berikut langkah-langkah yang perlu dilakukan untuk memasang 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 tersebut di situs image hosting seperti Photobucket atau Flickr.
Masuk pada 'Edit Halaman' di tata letak Blogger, dan tambahkan gadget, pilih HTML/Javascript kode berikan judul 'Featured Post', lalu simpan (isikan apa saja didalamnya, terserah karena tidak berpengaruh ^^), letakkan dimanapun sesuka hati.
Setelah itu masuk ke 'Edit HTML' di tata letak Blogger, 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'/>
Sudah.....? Sekarang masih pada 'Edit HTML', 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 != ""'>
<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($('myGallery'), {
timed: true,
showArrows: false,
showCarousel: false
});
}
window.addEvent('domready', startGallery);
</script>
<div id='myGallery'>
<div class='imageElement'>
<a class='open' href='http://em-mizan.blogspot.com/judul-posting1.html'/> /* tautan/link ke posting-an 1 */
<img class='full' src='http://photobucket.com/gambar1.jpg' /> /* 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='http://em-mizan.blogspot.com/judul-posting2.html'/> /* tautan/link ke posting-an 2 */
<img class='full' src='http://photobucket.com/gambar2.jpg' /> /* 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='http://em-mizan.blogspot.com/judul-posting3.html'/> /* tautan/link ke posting-an 3 */
<img class='full' src='http://photobucket.com/gambar3.jpg' /> /* 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 hijau untuk pengaturannya. Setelah itu lihat pratinjau terlebih dahulu. kalau berhasil segera simpan blognya.
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... ^^
KEMBALI KE ATAS
