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="http://2.bp.blogspot.com/_g4tuUmfcaro/R27obq3_UKI/AAAAAAAAAYQ/YVln_dQMbSo/s1600-h/busana-1.jpg"><img style="cursor: pointer;" src="http://2.bp.blogspot.com/_g4tuUmfcaro/R27obq3_UKI/AAAAAAAAAYQ/YVln_dQMbSo/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="http://2.bp.blogspot.com/_g4tuUmfcaro/R27obq3_UKI/AAAAAAAAAYQ/YVln_dQMbSo/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="http://2.bp.blogspot.com/_g4tuUmfcaro/R27obq3_UKI/AAAAAAAAAYQ/YVln_dQMbSo/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="http://2.bp.blogspot.com/_g4tuUmfcaro/R27obq3_UKI/AAAAAAAAAYQ/YVln_dQMbSo/s200/busana-1.jpg" border="0" /> <img style="cursor: pointer; width: 60px; height: 75px;" src="http://2.bp.blogspot.com/_g4tuUmfcaro/R23qG63_UGI/AAAAAAAAAXg/RMeuYMW71f0/s200/busana-2.jpg" border="0" /> <img style="cursor: pointer; width: 60px; height: 75px;" src="http://4.bp.blogspot.com/_g4tuUmfcaro/R23uKa3_UHI/AAAAAAAAAXo/UsHXYPRwY8k/s200/busana-3.jpg" border="0" /> <img style="cursor: pointer; width: 60px; height: 75px;" src="http://1.bp.blogspot.com/_g4tuUmfcaro/R23ulq3_UII/AAAAAAAAAXw/M5HvO93qoBY/s200/busana-4.jpg" border="0" /> <img style="cursor: pointer; width: 60px; height: 75px;" src="http://2.bp.blogspot.com/_g4tuUmfcaro/R23ut63_UJI/AAAAAAAAAX4/zV4kMDTSERc/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','http://2.bp.blogspot.com/_g4tuUmfcaro/R27obq3_UKI/AAAAAAAAAYQ/YVln_dQMbSo/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','http://2.bp.blogspot.com/_g4tuUmfcaro/R27obq3_UKI/AAAAAAAAAYQ/YVln_dQMbSo/s200/busana-1.jpg','300','375')"><img style="width: 60px; height: 75px;" src="http://2.bp.blogspot.com/_g4tuUmfcaro/R27obq3_UKI/AAAAAAAAAYQ/YVln_dQMbSo/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!
