Author by Yosef Doublehorn
Author by : Doublehorn
DAFTAR ISI
Protected by Copyscape Online Infringement Detector

30 April 2014

Customize website blog Blogger Store v.2.0


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.
  1. Setelah download, lalu di-ekstrak ke folder spesifik di computer (e.g. My Document).
  2. LOGIN ke account blogger, dan pilih blog yang akan dipasangi template.
  3. Klik pada menu template blogger
  4. Arahkan mata ke sudut kanan atas, Anda lihat opsi Backup/Restore. Klik tombol tersebut.
  5. 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> :

Website-Blogger-store-Simple-Cart-Setting
  1. SimpleCart.email   -  Emailnya diganti email Anda.

  2. 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.

  3. 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.

  4. 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.

  1. Body Background Color
  2. Main Menu Background Color
  3. Text Link Color
  4. Blog Description Color
  5. ShoppingCart Border Color
  6. 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 :

blogger-template-website-designer
3. Dropdown Menu dan Social Menu Website BloggerStore
Template ini menggunakan menu jQuery superfish untuk menu dropdown. Animasinya menjadi lebih “smooth” dengan penggunaan Superfish.
  1. Top Dropdown Menu

    Untuk edit link Top Menu, Main Dropdown Menu dan Socil Menu, temukan kode berikut :

    top-navigasi-website-1
  2. Main Dropdown Menu.

    top-navigasi-website-2
  3. Social Menu

    top-navigasi-website-3
    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 :
  1. Script pertama :
    Script-website-Blogger-Store
    Untuk Toko-Online-ku, value height=144, width=144, dan product_image_number=12.

  2. Script ke-2

    Pilih salah-satu dari 3 opsi ini (taruh tepat dibawah script pertama)

    Script-website-blogger-store1
    Bagaimana menampilkan Post berdasarkan spesific label/category?
    Script-website-blogger-store2
    Bagaimana menampilkan Displaying Post dari Blog lain?
    Script-website-blogger-store3
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).

pricing-website-toko-online-bloggerstore
membuat-post-template-blog-blogger
6. CREATE A POST di website blog Bloggerstore
Berikut ini 5 tahap menambahan item produk baru di toko-online Bloggerstore.
  1. 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

  2. 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>

  3. 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>

  4. 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>

  5. Step 5     Publish produk di website Bloggerstore
Check kembali semua kode dari Post. Pastikan tersusun benar dan seharusnya terlihat seperti  :

<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


Comments

1 komentar:

http://website-download.blogspot.com/2014/04/customize-website-blog-blogger-store-v20.html?showComment=1399431560462#c3285702701502432430'> 07/05/14, 09.59 Reply

terima kasih info tentang blogger shonya ^_^..sangat membantu sekali ^_^

Posting Komentar di Website Design

-

Penelusuran topik khusus di blog ini
Loading