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

02 Februari 2014

Manual template toko online Blogger Johny Blackstore


Berikut ini panduan template gratis toko online platform blogger. Jika ingin mengganti sub-domain blogspot dengan membeli domain baru, maka nama blog http://yogya-batik.blogspot.com dapat ditulis menjadi yogya-batik(dot)com, dan tetap memakai layanan hosting gratis Blogger. Topik ini pernah saya tulis dengan judul Bagaimana cara membuat toko online e-Commerce - didalamnya saya maksudkan Bloggerstore tahun 2013 lalu (Anda bisa kunjungi Blogger Store di blog ini). Tampaknya ini masih relevan. Akan lebih jelas pemahaman toik ini dengan tambahan dan pengulangan materi content dari blog tetangga berikut ini.

template toko online johny blackstore

Shopping cart yang digunakan adalah simplecart buatan wojodesign.com. Template Sudah dimasukkan currency IDR (Rp) pada script, tetapi tetap saja tidak bisa digunakan untuk transaksi langsung via Paypal, karena Paypal belum menerima Rp sebagai alat pembayaran. Jika tetap ingin pakai template ini, barangnya dinilai pakai US Dollar!!!. Atau arahkan untuk bayar via transfer bank.

Kini akan dijelaskan instalasi template dan beberapa fitur yang terdapat pada template ini.

Posting Artikel

Dalam membuat artikel baru, perhatikan struktur kode di bawah ini :

<div class="product_image">
<a class="cloud-zoom" href="url-image.jpg" rel="softFocus: true, position:'inside', smoothMove:2"><img border="0" class="item_thumb" src="url-image.jpg" /></a>
<span class="item_price">$00.00</span></div>
<div class="product_describe">
Description your product.............
</div>

PENJELASAN
  • Warna merah  :
    Masukkan url gambar produk anda pada kedua kode warna merah diatas. Usahakan gambar yang Anda upload ukuran panjang dan lebar sama, misalnya 300x300px
  • Warna kuning :  Harga produk
  • Warna biru      :  Deskripsi dari produk
Dalam membuat posting baru HARUS diawali dengan KODE diatas. Untuk memudahkan (agar tidak berulangkali copy paste kode tersebut sewaktu membuat artikel terbaru) masukkan kode tersebut pada kolom post template. Caranya :
  • Masuk ke SETTING, pilih POST AND COMMNETS >> POST TEMPALTE.
  • Klik ADD. Lalu masukkan kode diatas pada kotak kosong seperti gambar dibawah.
  • Langkah terakhir SAVE SETTING.


Shopping Cart

Fitur Shopping Cart disini digunakan untuk memudahkan admin toko online dalam transaksi via Paypal. Tapi karena Paypal belum menerima pembayaran Rp, maka setting currency masih dalam US$. Untuk mengganti akun Paypal blog demo ini dengan akun Paypal Anda, cari kode berikut :

<script type='text/javascript'>
simpleCart.email = &quot;johnytemplate @ gmail(dot)com&quot;;
simpleCart.checkoutTo = PayPal;
simpleCart.currency = USD;
simpleCart.taxRate  = 0.02;
simpleCart.shippingFlatRate = 3.25;
simpleCart.shippingQuantityRate = 1.00;
simpleCart.cartHeaders = [&quot;thumb_image&quot; , &quot;Quantity_input&quot; ,   &quot;Total&quot;, &quot;remove&quot; ];
</script>

Ganti email warna merah diatas dengan email Anda (email sudah didaftarkan di Paypal)

Fitur Pendukung
  1. Slider terpasang disini bekerja otomatis, menampilkan artikel terbaru Anda dengan jumlah 8 posting. Jika ingin menampilkan per kategori (label), cari kode dibawah ini pada Edit HTML (jangan lupa centang expand widget templates) :

    <script>
    document.write(&quot; &lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
    </script>

    Ganti dengan kode berikut :

    <script>
    document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/your label?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
    </script>

    Ganti kode warna biru dengan label yang ingin Anda tampilkan pada slider.

  2. Untuk mengganti email berlangganan yang ada di bawah navigasi, cari kode dibawah ini pada Edit HTML (jangan lupa mencentang kotak expand widget templates) :

       (UNTUK MELIHAT SCRIPT KLIK KOTAK KECIL DISAMPING INI)
    <form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=blogspot/htbgh&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><input id='subbox' name='email' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Enter your email address...&apos;;}' onfocus='if (this.value == &apos;Enter your email address...&apos;) {this.value = &apos;&apos;;}' type='text' value='Enter your email address...'/><input name='uri' type='hidden' value='blogspot/htbgh'/><input name='loc' type='hidden' value='en_US'/><input id='subbutton' type='submit' value='Enter'/></form>
    KETERANGAN
    Warna biru : ganti dengan alamat feed anda.

  3. Widget Contact Online
    Masukan kode berikut pada kotak HTML/Javascript

      (UNTUK MELIHAT SCRIPT KLIK KOTAK KECIL DISAMPING INI)
    <table border='0' cellpadding='0' cellspacing='0' height='1' width='100%'>
    <tbody>
    <tr>
    <td height='1'>Customer Service A</td>

    <td align='right' height='1'><a href='ymsgr:sendIM?youryahoousername1'><img border='0' height='16' src='http://opi.yahoo.com/online?u=youryahoousername1&m=g&t=1' style='padding-top:3px' width='64'/></a></td>
    </tr>
    </tbody>
    </table>

    <div style='display: block;'>
    <table border='0' cellpadding='0' cellspacing='0' height='1' width='100%'>
    <tbody>
    <tr>
    <td align='left' height='1'>Custumer Service B</td>
    <td align='right' height='1'><a href='ymsgr:sendIM?youryahoousername2'><img border='0' height='16' src='http://opi.yahoo.com/online?u=youryahoousername2&m=g&t=1' style='padding-top:3px' width='64'/></a></td>
    </tr>
    </tbody>
    </table></div>

    <p align="center"><a href="http://mas-template.blogspot.com/"><img src="http://1.bp.blogspot.com/-XeJWrn4GrRE/T7xEah0R2LI/AAAAAAAABP4/x2NwxqBP9bE/s1600/donate.png" alt="twitter maskolis" /></a></p>
    Ganti youryahoousername1 dan youryahoousername2 dengan ID yahoo Anda.

  4. Template ini menggunakan model kotak komentar yang sudah dimodifikasi, untuk mengaktifkan fungsi reply, Anda harus cari kode dibawah ini pada Edit HTML, sekali lagi jangan lupa centang kotak expand widget templates :

    <a expr:href='&quot;https://www.blogger.com/comment.g?blogID=2440873145683465163&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500&quot;); return false;'>Reply</a>

    Warna merah pada kode diatas ialah ID blog demo dan harus diganti dengan ID blog Anda yang terletak pada browser jika anda masuk ke dashbord, seperti gambar berikut :


  5. Widget popular post thumbnail, setting seperti pada gambar dibawah ini :

    popular-post
    Yang perlu diperhatikan ialah centang hanya thumbnail, biarkan kotak snippet tidak dicentang. Judul dan jumlah post yang ingin ditampilkan terserah Anda. Untuk lebih jelas tutorial disini.
Fitur lain saya kira mudah, seperti memasang Yahoo Messenger dan lain-lain. Template ini dilengkapi efek zooming. Jika Anda arahkan cursor pada gambar, gambar itu akan otomatis membesar sesuai dengan letak cursor. Saya rasa cukup penjelasan template ini, seperti biasa jika ada yang kurang jelas silahkan tinggalkan komentar Anda pada kotak komentar.

Showcase
Jika Anda ingin melihat blog yang sudah memakai template ini. bisa dilihat disini :
Toko Madu Mulia Alam Nusantara
Johny Online Store

Sangat disarankan
  1. Baca tutorial pemasangan template ini sampai selesai.
  2. Disarankan upload gambar produk dengan ukuran length and width sama (e.g. 300x300px).
  3. Agar hasil akhir penggunaan template maksimal dan tata-letak post teratur, JUDUL POST jangan terlalu panjang, karena akan menggeser gambar ke bawah.
  4. Untuk percepatan loading, simpan javascript yang ada di template ini ke tempat penyimpanan Google Code Anda. Cara menyimpan di Google Code baca tutorial disini.
Update currency

Untuk merubah simbol currency dari $ (dollar) ke Rp (rupiah) pada shopping cart :
  1. Cari URL script ini di Edit HTML :

    http://jagad.googlecode.com/files/WojosimpleCart-IDR.js

    Setelah ketemu ganti dengan URL script berikut :

    https://masolis-javascript.googlecode.com/svn/trunk/blackstorecart-rupiah.js

  2. Langkah selanjutnya, masih pada Edit HTML ganti USD pada kode ini :

    simpleCart.currency = USD;

    menjadi

    simpleCart.currency = IDR;

  3. SAVE template.
Currency akan berubah menjadi Rp. Perlu dingat!!! INI hanya sekedar penggantian currency ke Rp, tidak bisa untuk checkout (pembayaran langsung) via Paypal. Karena Paypal belum menerima Rp sebagai alat pembayaran.

Updates nama barang

Beberapa komentar masuk, diantaranya menginginkan tampilan nama barang di shopping cart, untuk itu ganti yang lama dan download ulang. Template ini sudah di-updates dengan menampilkan nama barang (lihat demo)

Template toko online terbaru Johny Magstore
Dua template Toko Online tanpa shopping cart


Update Bloggerstore Template

My Google Code was banned again, there's so many script that I put in there can't be opened. But I already fixed it with the updates ones, you can re-download this template or you can change some script below

Click this link and read subtitle "Update Template" in that post for the latest updates of Javascript


Komentar masuk : (cara pembayaran via bank lokal)
  1. kalo pembayaran via bank lokal gimana setingnya?
    jadi checkoutnya biar ke rek lokal gitu loch..bca, mandiri, bri dll dan tentu saja dilengkapi dengan data diri dan alamat pembeli untuk tujuan pengiriman...
    tengkiyu mas... tambah sukses!!!!

  2. Jawab :
    Bisa dibuat page terlebih dulu dengan judul order yang berisi form pembayaran. Anda bisa membuatnya lewat google docs contohnya ini :

Ada 2 tombol dibawah gambar produk - yaitu add to cart dan view detail - untuk SHOPPING CART.

Jika tidak mau pakai sistem shopping-cart sebagai alat transaksi, maka ubah tombol add to cart menjadi order dan diarahkan ke direct link halaman formulir order yang sudah dibuat sebelumnya.

Contoh form pemesanan misalnya seperti ini (contoh form ini dibuat menggunakan docs google).

Jadi jika Anda gunakan form order untuk transaksi penjualan, fitur shopping cart tidak akan terpakai, Maka hapus saja semua script CSS dan javascript untuk shopping cart pada template ini.


Untuk menggunakan template BloggerStore, pilih salah satu dari 6 template di link dibawah ini.

RELATED POST :
Bloggerstore : Pilihan toko online template blogger



▬▬▬▬▬▬▬▬ஜ۩۞۩ஜ▬▬▬▬▬▬▬▬


Comments

1 komentar:

http://website-download.blogspot.com/2014/02/manual-template-toko-online-blogger.html?showComment=1440656698110#c3857671280274966056'> 27/08/15 13.24 Reply

Desain website online shop tidak menarik? Cari semua contoh template toko online terbaik di Jejualan.com , dijamin banyak pilihannya!

Posting Komentar di Website Design

-

Penelusuran topik khusus di blog ini
Loading