23 Desember 2007

Simple Product Gallery untuk di Blog

Busana Model Mix 03
Busana By: Zulfa Collection @ Riristore Web Store


Menjual sebuah produk dengan menggunakan Blog sekarang ini sudah menjadi 'Trend' baru di dunia internet, karena selain relatif lebih mudah dalam hal pembuatannya kita tidak perlu mengeluarkan biaya untuk membuat Blog tersebut alias 'gratis' dibandingkan harus membuat sebuah Web Store yang akan membutuhkan biaya yang tidak sedikit, belum lagi masalah waktu pembuatan dan customize sebuah Web Store yang tidak akan seperti layaknya di 'sulap' bila menggunakan Blog barang kita sudah dapat dengan cepat ditampilkan dan siap untuk ditawarkan.

Uniknya menjual produk dengan menggunakan blog seperti ini adalah pembeli bisa lebih 'familiar' dengan si pemilik 'toko' di blog yang biasanya mencantumkan kata 'Pemilik' lengkap dengan alamat dan kontak person-nya, bahkan dapat berkomunikasi langsung melalui 'shoutbox' yang di pasang di blog tersebut ataupun dengan status YM yang berwana 'kuning' yang siap di 'Add' bila dibutuhkan, tentu ini bisa dimanfaatkan oleh calon pembeli untuk menanyakan barang yang akan dibeli dengan harapan bisa mendapat 'diskon' dari si Pemilik langsung mungkin hehehe...

Kondisi ini kan tidak beda dengan bila kita belanja di toko offline yang dilayani oleh si Pemilik langsung akan berbeda dengan dilayani oleh si penjaga toko yang belum lagi kalau si 'mbak'-nya dengan bete melayani kita untuk berbelanja :)

Tapi memang sampai saat ini saya belum menemukan sebuah produk terkenal seperti Nike, Nokia, Levi's, Etienne Aigner dll yang sejenis menjual produk2-nya menggunakan blog, biasanya blog digunakan untuk 'product support' ataupun untuk keperluan lainya.

Di postingan ini saya ingin memberi sedikit trik bagi yang menjual produk2-nya menggukanan sebuah blog, yaitu Membuat sebuah Gallery Product yang simple untuk di Blog dengan menggunakan Javascript.

Selain akan menghemat tempat, Gallery ini juga tidak membutuhkan scroll yang panjang kebawah untuk melihat product yang kita tampilkan di blog, dan dari 'Thumbsnail' gallery ini akan menampilkan gambar detail product tersebut tanpa harus me-'refresh' halaman blog, dengan demikian si calon pembeli akan lebih leluasa melihat2 product yang kita tawarkan.

Berikut langkah2 pembuatan simple Gallery Product dengan menggunakan Javascript tersebut:

Langkah-1

Masukkan bagian Kontrol Panel blog anda kemuadian masuk ke halaman
Template | Elemen Halaman

Pada bagian footer template anda masukkan script javascript dibawah ini, dengan cara click Tambahkan sebuah Elemen Halaman | HTML/Javascript

<script type="text/javascript">
//-->

// Javascrip By: http://ipulanwar.blogspot.com
// Function Name: Change Image Display

function changeImg(id,iTitle,iScr,iWidth,iHeight){
var ie4=document.all
var ns6=document.getElementById
if (ie4||ns6)
var imageView=document.getElementById? document.getElementById(id): document.all.id
var imageTitle=document.getElementById? document.getElementById(id+"Title"): document.all.id+imgTitle

if (ie4||ns6){
imageView.innerHTML='<img vspace="0" border="0" hspace="0" width="'+iWidth+'" src="'+iScr+'" height="'+iHeight+'">'
imageTitle.innerHTML=iTitle
}
else if (document.layers){
document.id.document.write('<img vspace="0" border="0" hspace="0" width="'+iWidth+'" src="'+iScr+'" height="'+iHeight+'">')
document.id+Title.document.write(iTitle)

document.id.document.id+Title.document.close()
}
else
alert('You need NS 4+ or IE 4+ to view the images!')
}

//-->
</script>

Penjelasan Umum Script Javascript diatas adalah:
Dibuatnya sebuah fungsi program javascript untuk mengganti isi (image, text) sebuah elemen halaman HTML dengan 'id' yang kita tentukan dengan isi (image, text) yang baru.

Dengan aturan penggantian (syntax) yang akan dimasukkan sebagai perintah link dari sebuah image ataupun text, Berikut contoh membuat link yang mengganti image di area 'display' dengan image yang baru:

syntax:
<a href="javascript:changeImg(id,iTitle,iScr,iWidth,iHeight)"><img src="image.jpg" /></a>

id : Area yang akan diganti
iTitle : Judul image
iScr : URL image
iWidth : Lebar image
iHeight : Tinggi image

Contoh lengkap-nya sbb:

<a href="javascript:changeImg('display','Busana Model Mix 03','http://4.bp.blogspot.com/busana-1.jpg','300','375')"><img style="cursor: pointer; width: 60px; height: 75px;" src="http://4.bp.blogspot.com/busana-1.jpg" border="0" /></a>

Langkah-2

Membuat Gallery pada postingan baru anda, dengan langkah awal adalah membuat sebuah area display untuk image anda.

Upload image baru seperti biasa yang anda lakukan dengan pilihan posisi image layout 'kosong', dari editor mode 'HTML' blogger akan mendefinisikan image anda sbb:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkOR9hFXKmjAPc1Yp_EaYfoxV26cqLabzadbZSLW8POJNtn9G-vVvyuUxr4gzfPCkQRtpOa81xjUQr6YdMsk-wHt5LW82YWoTN-2qutNnUjyNhjJ3aAVpMRepEry4UyeQrh9YV6HzWiSk/s1600-h/busana-1.jpg"><img style="cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkOR9hFXKmjAPc1Yp_EaYfoxV26cqLabzadbZSLW8POJNtn9G-vVvyuUxr4gzfPCkQRtpOa81xjUQr6YdMsk-wHt5LW82YWoTN-2qutNnUjyNhjJ3aAVpMRepEry4UyeQrh9YV6HzWiSk/s200/busana-1.jpg" alt="" id="BLOGGER_PHOTO_ID_5147306986194292898" border="0" /></a>

Kemudian hapus text yang berwarna merah pada HTML diatas untuk menghilangkan link dan atribut yang tidak kita inginkan dari image tersebut.

Selanjutnya adalah menentukan lebar dan tinggi image yang diinginkan untuk display image tersebut dan menentukan 'id' area 'display' dengan tag div, lihat text berwarna biru HTML dibawah ini untuk perubahannya:

<div id="display" align="center"><img style="width: 300px; height: 375px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkOR9hFXKmjAPc1Yp_EaYfoxV26cqLabzadbZSLW8POJNtn9G-vVvyuUxr4gzfPCkQRtpOa81xjUQr6YdMsk-wHt5LW82YWoTN-2qutNnUjyNhjJ3aAVpMRepEry4UyeQrh9YV6HzWiSk/s200/busana-1.jpg" border="0" /></div>

Langkah-3

Membuat Area 'Title' untuk setiap image display, dengan menggunakan tag div (tidak perlu di enter bila tidak ingin jarak antara image display dan title terlalu jauh), dan berikut contoh Title untuk image display pertama anda:

<div id="displayTitle" align="center">Busana Model Mix 03</div>

Langkah-4

Membuat Area atribut dari semua gallery anda seperti spesifikasi barang atau yang lainnya yang tidak akan berubah dari gallery ini, contoh yang saya masukkan adalah koleksi barang tersebut sbb:

<div align="center">Busana By: Zulfa Collection @ <a href="http://riristore.com/" target="_blank">Riristore Web Store</a></div>

Langkah-5

Membuat sebuah 'Thumbsnail' gallery untuk navigasi image display anda yang bila di click akan mengganti image yang ada di area display.

Enter untuk memberi jarak antara text diatasnya dengan 'Thumbsnail' gallery ini, dan beri tag div supaya image anda terlihat rapih. Untuk image pertama anda bisa copy HTML image yang ada di area display kemudian rubah ukuran yang lebih kecil, lihat text dibawah yang berwarna biru:

<div align="center"><img style="cursor: pointer;width: 60px; height: 75px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkOR9hFXKmjAPc1Yp_EaYfoxV26cqLabzadbZSLW8POJNtn9G-vVvyuUxr4gzfPCkQRtpOa81xjUQr6YdMsk-wHt5LW82YWoTN-2qutNnUjyNhjJ3aAVpMRepEry4UyeQrh9YV6HzWiSk/s200/busana-1.jpg" border="0" /></div>

Kemudian untuk image selanjutnya upload image berikutnya atau dengan cara sama seperti Langkah-2 yang di hapus atribut link dan yang tidak perlu, berikut contoh 'Thumbsnail' gallery dengan 5 image:

<div align="center"><img style="width: 60px; height: 75px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkOR9hFXKmjAPc1Yp_EaYfoxV26cqLabzadbZSLW8POJNtn9G-vVvyuUxr4gzfPCkQRtpOa81xjUQr6YdMsk-wHt5LW82YWoTN-2qutNnUjyNhjJ3aAVpMRepEry4UyeQrh9YV6HzWiSk/s200/busana-1.jpg" border="0" /> <img style="cursor: pointer; width: 60px; height: 75px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitAp9BFq1u8NShNzgiQPhV6zkz-aWnga7_kRNT4Fll2lU6Sniyx9Ak6Lf42QMsECgIfuRtfO_hKSn9_6E4H747RRUe0ZW-Wqo5taHtEgbk3YboIf2PQoqKze31UnXeyGWIeI8c1IkKwVQ/s200/busana-2.jpg" border="0" /> <img style="cursor: pointer; width: 60px; height: 75px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgka-QHIDYZu32WIoO2wIxkfW8fNw8BBQUJRFtY_c-O4a89njkYY2R7yHb2cAbPHQTKi6qm-9GKDyj4EMjdgNeDP_y3Tahqy31ZSFe-9Vh5DW1runQC1dO9RisZ7ZyUFq2-aZJoy2J90bo/s200/busana-3.jpg" border="0" /> <img style="cursor: pointer; width: 60px; height: 75px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG7Gr5MIHLlJd5SfE0L1A71Qani9remOJeDOkug6lTIU2J7aansHYUFMnKJd3VAQhtWnpQHPSKQJ21qYHtJnhRQnISmFotmnqwAPyWQrY0q56TkFu2y_ai-XIm_qqRmkQG3z_SxqlmBpQ/s200/busana-4.jpg" border="0" /> <img style="cursor: pointer; width: 60px; height: 75px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTRkGN3QZsBPJjsn2vCynU3cbEGlYD9jtT-U8yXd12dojIAHnP0b3uM9zFmHZiJaYm517MI7ToSyQSh1QUL4YiPZojDtW1TiS9m92kQkyd9L7DkUCtkEYcBcPma9FzOYysfSm-DYE908g/s200/busana-5.jpg" border="0" /></div>

Langkah-6

Langkah terakhir adalah dengan memberi perintah link untuk masing2 image yang ada di 'Thumbsnail' Gallery anda, tapi anda harus tau terlebih dahulu alamat/URL dari masing2 image yang ada di 'Thumbsnail' Gallery tersebut. Lihat contoh URL di langkah-5.

Kemudian masuk Editor pada mode 'Compose', click image pertama anda dan click icon 'link' yang ada di editor anda.

Selanjutnya masukkan perintah javascript pada link tersebut, seperti ini:

javascript:changeImg('display','Busana Model Mix 03','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkOR9hFXKmjAPc1Yp_EaYfoxV26cqLabzadbZSLW8POJNtn9G-vVvyuUxr4gzfPCkQRtpOa81xjUQr6YdMsk-wHt5LW82YWoTN-2qutNnUjyNhjJ3aAVpMRepEry4UyeQrh9YV6HzWiSk/s200/busana-1.jpg','300','375')

Maka image pertama bila dilihat dengan mode HTML editor anda adalah sbb:

<a href="javascript:changeImg('display','Busana Model Mix 03','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkOR9hFXKmjAPc1Yp_EaYfoxV26cqLabzadbZSLW8POJNtn9G-vVvyuUxr4gzfPCkQRtpOa81xjUQr6YdMsk-wHt5LW82YWoTN-2qutNnUjyNhjJ3aAVpMRepEry4UyeQrh9YV6HzWiSk/s200/busana-1.jpg','300','375')"><img style="width: 60px; height: 75px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkOR9hFXKmjAPc1Yp_EaYfoxV26cqLabzadbZSLW8POJNtn9G-vVvyuUxr4gzfPCkQRtpOa81xjUQr6YdMsk-wHt5LW82YWoTN-2qutNnUjyNhjJ3aAVpMRepEry4UyeQrh9YV6HzWiSk/s200/busana-1.jpg" border="0" /></a>

Catatan: Lihat Syntax Javascript pada Langkah-1, untuk menentukan image URL dan Title yang diinginkan untuk ditampilkan.

Kemudian Ulangi langkah memasukkan link di atas untuk image ke-2 dan seterusnya.

Image gallery ini juga bisa anda gunakan untuk gallery2 yang lain seperti Gallery Event, Gallery Keluarga dan yang lainnya.

Bila anda mengalami kesulitan, script lengkap untuk Trik gallery diatas berupa file .txt anda bisa download di URL ini: Free-Script Simple Gallery

'Save As' halaman tersebut menjadi simpleGallery.htm dan coba jalankan di browser anda.

Selamat Mencoba!

19 komentar:

  1. Betul Pak Ipul, jualan online di blog selain gratis, menarik, juga lebih personal.

    Enaknya blogger juga bisa me-resize gambarnya secara otomatis.

    Downsize-nya kalau gambarnya banyak, page loading-nya agak lama dikit.

    BalasHapus
  2. Makasih banyak Mas Ipul, bagus banget nih. Cuman bisa nggak kalo pergantian imagenya juga disertai pergantian uraian produk. Kan berarti perlu satu baris dan kolom lagi, supaya kalo ganti produk, ada juga uraian terkaitnya. Ku tunggu ya.

    NB: Ini cuman ngingetin aja, soal blogroll di bawah ini, bukannya kasus ditutupnya blogger AFSyuhud adalah karena kebanyakan blogroll kayak di bawah ini? Ati-ati lho.

    Sukses.

    Ikhwan Sopa
    Trainer E.D.A.N.
    http://milis-bicara.blogspot.com

    BalasHapus
  3. @Agus Suhanto,

    Untuk siasati loading image yang banyak bisa upload image kecil-nya pak, jadi yang di panggil image yang beda untuk di display.

    @Ikhwan Sopa

    Bisa Pak Ikhwan, untuk definisi Title-nya saya buat dng format HTML, coba ini:
    javascript:changeImg('display','Busana Model Mix 04<br />Rp.200.000,-<br />Diskon 10% untuk pembelian min.1 lusin','http://...

    (Memasukkan title berikut harga dan diskon dengan mengganti baris menggunakan tag <br />)

    Blogroll? khawatir sih ada, namanya juga gratisan... hehehe
    Terima kasih Pak sudah mengingatkan.
    Tapi utk postingan saya selalu backup di server sendiri pak dengan engine Wordpress di: http://ipulanwar.mediasolusindo.com

    BalasHapus
  4. Aku memang dah lama seh tertarik dengan jualan online seperti , cuma mungkin belum ketemu produk mana yang mau dipasarkan, tapi makasih ya bang atas infonya.

    BalasHapus
  5. ass.wr.wb Mas Ipul
    Saya baru baca trik membuat gallery photo... terimakasih atas infonya yah.. nanti saya pelajari dulu dan coba ya.. seperti biasa kalau mentok saya akan email saja.
    Blog saya belum jadi-jadi (maklum maunya perfect) dan dipotong liburan - jadi belum selesai..
    Insya Allah segera selesai saya info Mas Ipul dulu untuk kasih komentar.

    Wassalam

    Indra SH. Daroesman

    BalasHapus
  6. Mas Ipul,
    Terima kasih banyak tuap tips & trik mengenai galeri produk untuk Blog (walaupun saya masih rada bingung gimana cara aplikasi script tsb di Blog saya).

    Saya mau tanya, seandainya saya ingin membuat galeri produk yang jumlah fotonya melebihi 30 bh, dan tiap bulannya selalu ada penambahan foto produk baru, bagaimana scriptnya? Apakah dapat saya letakkan semuanya dalam 1 halaman, atau harus saya bagi menjadi beberapa halaman? Mohon petunjuk & sarannya.

    sekali lagi, terima kasih banyak banget atas bantuan pengetahuan yang Mas Ipul berikan


    Salam

    BalasHapus
  7. Apakah script ini berfungsi di wordpress?

    atau adakah script serupa khusus untuk wordpress?

    BalasHapus
  8. @ferry,

    Kalau masih bisa terilhat 1 screen OK aja, tapi kalau sampi 30 sebaiknya dipisah yah karena load page-nya akan lama nantinya.

    @adicahya,

    Javascript di WP yg gratisan tidak diizinkan, jadi tidak bisa. Kecuali dengan WP yg open source

    BalasHapus
  9. Mas Ipul, mo tanya neh. Kalo saya mau tampilin sekitar 10 - 15 foto dalam 1 galeri mini (dalam 1 posting), misalnya pake format 5 x 3 atau 3 x 5, gimana caranya?

    BalasHapus
  10. Thanks pak Ipul, ilmunya sudah aku terapkan di blog-ku. Cuma... capek juga ya maintain blog terus he he...

    BalasHapus
  11. @anonymous, coba pakai table untuk buatnya mas.. nanti fotonya tinggal disisip. u keterangan buat table bisa liat disini: http://ipulanwar.blogspot.com/2007/10/membuat-tabel-di-postingan-blogspot.html
    note: saran 1 page jgn teralu banyak fotonya nanti jadi berat halamanya, 10 cukup lah...

    @busana muslim rumah madani, Pak Hakim bukan yah? :) saya udah liat rumahmadaninya pak..
    hehe kalo maintance segitu banyak yaa.. cape pak.. hehe bikin webstore atuh pak.. pake DB jadi hal. HLML-nya gak manual cukup 1 aja kan.., sukses terus pak.. nanti ta' call mau ngobrol2 nih.. hehhe

    BalasHapus
  12. Mau tanya Pak, yg dimaksud footer template itu yg mana ya? Maaf saya agak bingung. Thanks

    BalasHapus
  13. Wahhh...artikelnya bgaus...menarik dan membantu sekali..
    Sukses buat Mas Ipul...

    BalasHapus
  14. Nice tutorial mas, keren blogspot bisa seperti itu

    BalasHapus
  15. Nice share thank infonya berguna ;)

    BalasHapus
  16. NICE INFORMATION..THANKS AND SUCCES ALWAYS

    BalasHapus
  17. info yang bermanfaat..terima kasih dan salam kenal

    BalasHapus
  18. Kayaknya menarik nih tampilan galery produknya,saya coba ya gan.Kebetulan sedang mencari-cari info seperti ini.

    BalasHapus