Pelaku e-Commerce beragam : company, seller, reseller, bahkan pemain individu memanfaatkan website toko online dan Social Media. Internet menawarkan keajaiban. Ini kesempatan bagus memiliki Toko Online menggunakan platform blog blogger.
website toko online : e-Commerce web store
Toko Online adalah bentuk tiruan toko riil di internet. Sejarahnya dimulai dari munculnya website e-Bay pertengahan tahun 1990-an. Tentu ada kelebihan dan kekurangannya tetapi perbedaan yang nyata adalah bentuk komunkasi buyer dengan seller dan layanan delivery.
Install Template website blog Blogger Store v.2.0
Template bisa diperoleh dari link ini : cara-membuat-e-commerce.
- Setelah download, lalu di-ekstrak ke folder spesifik di computer (e.g. My Document).
- LOGIN ke account blogger, dan pilih blog yang akan dipasangi template.
- Klik pada menu template blogger
- Arahkan mata ke sudut kanan atas, Anda lihat opsi Backup/Restore. Klik tombol tersebut.
- Pilih file yang ber-ekstension XML dari direktori Anda dan klik UPLOAD.
Kustomisasi Template website Blogger Store v.2.0
Tahap kustomisasi meliputi tindakan :
1. Setting Shopping Cart Website toko Online Bloggerstore
Code untuk pengaturan Shopping Cart ada sesudah opening <head> :
- SimpleCart.email - Emailnya diganti email Anda.
- SimpleCart.checkoutTo
Ada 3 metode payment, yaitu opsi :
(1) Paypal,
(2) GoogleCheckout dan,
(3) Email.
Untuk platform Blogger hanya dimungkinkan opsi Paypal dan GoogleCheckout, sebab metode Email memerlukan code PHP.
- SimpleCart.currency
Setting currency dengan cara mengganti baris dibawah ini.
(e.g. USD diganti dengan IDR (Rupiah) atau GBP (Poundsterling).
SimpleCart.currency = GBP;
Jika di-setting IDR, itu hanya palsu (fake) sebab IDR tidak terdaftar di PayPal.
- SimpleCart.cartHeaders - tidak diperlukan kustomisasi.
2. Customize background and Text in Website Toko Online
Template Blogger Store V.2.0 di-support Advanced Blogger Template Designer.
- Body Background Color
- Main Menu Background Color
- Text Link Color
- Blog Description Color
- ShoppingCart Border Color
- ShoppingCart Background Color
Kustomisasi color scheme template, klik saja Customize Maka Anda akan redirect ke Blogger Template Designer. Anda dapat melihat opsi-opsi seperti dilayar ini :
3. Dropdown Menu dan Social Menu Website BloggerStore
Template ini menggunakan menu jQuery superfish untuk menu dropdown. Animasinya menjadi lebih “smooth” dengan penggunaan Superfish.
- Top Dropdown Menu
Untuk edit link Top Menu, Main Dropdown Menu dan Socil Menu, temukan kode berikut :
- Main Dropdown Menu.
- Social Menu
Gantilah dengan URL account FB, Twitter, Linkedin dan RSS Feed Burner yang Anda miliki.
4. Automatic Slider dan Featured Content Website Blogger Store
Framework template blogger store V.2.0 menggunakan Automatic Slider dan Featured Content memanfaatkan JavaScript. Inilah revolusi baru Blogger.
Bagaimana mengaktifkan Slider tersebut?
Secara default dimunculkan post paling akhir. Anda bisa mengubahnya berdasarkan label (kategori) spesifik atau bahkan menampilkan post blog lain. Untuk itu digunakan 2 script berikut :
- Script pertama :
Untuk Toko-Online-ku, value height=144, width=144, dan product_image_number=12.
- Script ke-2
Pilih salah-satu dari 3 opsi ini (taruh tepat dibawah script pertama)
Bagaimana menampilkan Post berdasarkan spesific label/category?
Bagaimana menampilkan Displaying Post dari Blog lain?
Misal pada Toko online LOVELY GIFTS saya gunakan alternatif ketiga seperti dibawah ini (Ingat gunakan satu alternatif saja!). URL BLOG yang disisipkan http://bonekaelok.blogspot.com
5. Membuat Posting Template Website Bloggerstore
Dalam membuat Post, untuk hasil terbaik diperlukan posting template.
Create a template post
Menuju menu Setting >> Post and Comments, Selanjutnya copy template post dibawah ini ke template post field. (lihat gambar dibawah ini).
6. CREATE A POST di website blog Bloggerstore
Berikut ini 5 tahap menambahan item produk baru di toko-online Bloggerstore.
- Step 1 Membuat Judul Produk pada Title field
Title produk akan digunakan untuk product name pada ShoppingCart, maka disarankan gunakan judul yang pendek.
Example : Product 1.
INGAT!!! Gunakan judul pendek untuk title product name
- Step 2 Membuat Product Image dan Thumbnail
Upload gambar seperti biasanya. Set the field to HTML and copy the image URL, Kemudian PASTE ke template post. Disarankan menggunakan gambar 140px ×140px. Contoh :
<div class="item_image">
<img border="0" class="item_thumb" src="http://example.com/product_image.jpg" /></div>
- Step 3 Menentukan Price
Setting tampilan harga menggunakan span tag yang disisipkan sesudah gambar dan sebelum </div> [lihat script pada step 2].
<span class="item_price">$35.00</span>
- Step 4 Product Descriptions
Buatlah deskripsi produk menggunakan div tag. Contoh :
<div class="item_Description">Mauris sit amet orci arcu, nec imperdiet quam. Praesent luctus .. </div>
- Step 5 Publish produk di website Bloggerstore
<div class="item_image"><img border="0" class="item_thumb" src="http://example.com/product_image.jpg" /> <span class="item_price">$35.00</span> </div> <div class="item_Description">Mauris sit amet orci arcu, nec imperdiet quam. Praesent luctus .. </div>
Mengakhirinya klik Publish.
Contoh tampilan toko online Bloggerstore terbaru yang baru saja saya buat (Pebruari 2014) :
That's all we know
![](http://www.blogger.com/img/icon_delete13.gif alt="delete icon di web design){kind=icon}
.
.
.
.
.
.
.
.
![[Valid Atom 1.0]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgqz1Fz0W3QZkeG4LsKvQplfCdmyhCrU3j95NWl1i-XarshrBBaYCr4hKUMKj5XbhHwJRvEFMd3j2pDLZepCzvjQU0kMiNhvbs51qAWczA_Mrw7y_wj0czorZsxBhfr9Y5Q8IN_vsORSA/w88-h31-no/valid-atom.jpg "Validate my Atom 1.0 feed")
