Panduan Template Tokonesia/Okenesia


1. Cara Instal Template di Blogger ada 2 cara yaitu
A. Cara Pertama :
  • Loggin ke akun blogger anda.
  • Pilih opsi Template.
  • Kemudian klik Cadangkan/Pulihkann di pojok kanan atas.
  • Muncul POP-UP > klik Pilih File ( Pilih file template TOKONESIA.xml di folder ).
  • Kemudian klik Unggah/Upload.
  • Tunggu sampai proses upload selesai.

B.Cara kedua:
  • Login ke akun blogger anda.
  • Pilih opsi Template.
  • Kemudian klik Edit HTML
  • Setelah tampil > tekan ctrl + A atau Select All / Pilih Semua
  • Buka dan Copy isi dari Theme.txt yang kami kirimkan kemudian Pastekan di baris EDIT HTML tadi
  • Tunggu sampai proses upload selesai.

2. Membuat Halaman Pendukung TOKONESIA Template :

Sebelum kita beranjak ke tutorial berikutnya,silahkan anda buat terlebih dahulu 3 buah halaman/page di blog untuk mendukung kinerja dari template kami diantaranya :
  1. Halaman Keranjang Belanja.
  2. Halaman Terima kasih.
  3. Halaman Pembayaran / Checkout 
A. Cara membuat halaman di blog :
  • klik Laman/Page.
  • Pilih di sebelah kanan Lama baru/New page.

Panduan INSTALL Template SHOPCART
















B. Cara mengisi halaman blog :

  • Silahkan isikan judul blog sesuai selera anda.
  • Untuk membuat halaman Keranjang,formulir dan Terima kasih,silahakan COPAS ( Copy-paste ) script yang sudah kami lampirkan di File Download dalam bentuk txt notepad.
Panduan INSTALL Template SHOPCART

  • Pastekan script pada mode HTML bukan Compose seperti gambar di atas.
  • Setelah semua selesai,klik Publikasikan/Publish.
C. Cara meng-copy URL halaman Blog.
  • Setelah anda memublikasikan halaman,maka otomatis daftar halaman anda akan bertambah sesuai dengan jumlah halaman yang anda buat.

Panduan INSTALL Template SHOPCART

  • Arahkan mouse ke link lihat > Klik kanan dan pilih Salin Alamat Tautan/Copy link URL.

3.Mengatur Meta Tag Content dan Keyword toko online.

  • Klik menu Template > Edit HTML dan cari kode seperti di bawah ini,letaknya di bagian atas area HTML ( Gunakan ctrl+f untuk mempercepat pencarian )
<meta content='Template Toko Online Blogger.' name='description'/>
<meta content='Blogger Templates Premium' name='keywords'/>

Petunjuk :
  • Untuk text berwarna merah silahkan ini dengan Deskripsi blog atau toko online anda misalkan Tokonesia - menjual berbagai perlengkapan Fashion .
  • dan untuk yang berwarna Hijau itu adalah keyword untuk memperkuat posisi produk anda di mesin pencari seperti : toko online baju,celana,topi,sepatu,grosir pakaian,fashion murah (Pisahkan per keyword dengan tanda koma )
  • Sehingga susunan Meta Tag menjadi seperti di bawah ini ( HANYA CONTOH ):
<meta content='Tokonesia - menjual berbagai perlengkapan Fashion' name='description'/>
<meta content='toko online baju,celana,topi,sepatu,grosir pakaian,fashion murah' name='keywords'/>
  • Klik Simpan Template ( save template ) 

4. SETTING Template TOKO ONLINE.

  • Pilih menu Template > klik EDIT HTML.
  • Langkah 2 silahkan anda cari text // Template Setup.
  • Klik sembarang di area kerja HTML dan gunakan CTRL+F untuk mepercepat pencarian.
  • Setelah ketemu kumpulan tag kode seperti di bawah ini,sesuaikan data toko anda seperti No REK,alamat dan beberapa kontak toko.

  • Setelah anda menemukan kode di atas,silahkan edit sesuai dengan petunjuk berikut ini :

var facebookUrl = '#';
var twitterUrl = '#';
var googleplusUrl = '#';
var rssUrl = '#';
var cartpageUrl = 'http://tokonesia.oketemplate.com/p/keranjang-belanja.html';
var checkoutpageUrl = 'http://tokonesia.oketemplate.com/p/formulir-pemesanan.html';
var thankyoupageUrl = 'http://tokonesia.oketemplate.com/p/terima-kasih.html';
var emptycarttextinfo = 'Keranjang belanja anda masih kosong';
var emptycartlinktext = 'Kosongkan';
var viewcarttext = 'Tampilkan';
var checkouttext = 'PEMBAYARAN';
var continueshoptext = 'LANJUTKAN BELANJA'
var addtocartlinktext = 'Beli Produk';
var addtocartsuccesstext= /* Nama Item */ 'Sudah ditambahkan ke keranjang belanja anda';

// Store Setup
var storename = 'OKETEMPLATE';
var storephone = 'Isi dengan No.telp toko anda';
var storeemail = 'isi dengan alamat email anda';
var storeaddress = 'Jl. Alamat Pemilik Toko No. 8787 ';
var bankaccount1 = 'BANK BCA No. Rek 123456789 a/n OKEtemplate';
var bankaccount2 = 'BANK MANDIRI No. Rek 123456789 a/n OKEtemplate';
var bankaccount3 = 'BANK BRI No. Rek 123456789 a/n OKEtemplate';
var bankaccount4 = '';

Catatan : Untuk no REK toko,jika memang ada satu,silahkan di kosongkan sisanya ( sisakan tanda kutipnya aja seperti contoh di atas agar tidak terjadi error pada Invoice Email ).

5. Setting Postingan Blog TOKO ONLINE.

Pada tahap ini anda harus mengatur posting produk agar memiliki struktur sama dengan produk yang lainnya. seperti ini bawah ini :

  • Pilih menu Setelah > klik Pos dan Komentar.
  • lihat ke sebelah kanan pada Template entri klik link Tambahkan.


  • Setelah itu masukan isi dari kode Contoh-posting.txt yang sudah dilampirkan dalam file download.
  • Klik SIMPAN SETELAN dan Selesai.

6. Membuat posting Produk di toko online ( Lihat Video )

  • Klik menu Entri Baru / New Post .
  • Jika anda sudah melakukan langkah 4,pastinya Format Post sudah akan terisi secara otomatis seperti di bawah ini :


  • Pastikan anda berada di opsi Compose bukan HTML.
  • Untuk mengganti gambar produk silahkan Klik Gambar > pilih Remove.
  • Kemudian upload gambar produk baru anda dengan klik icon gambar seperti arah panah no 3 pada gambar di atas.
  • Kemudian untuk upload gambar baru klik Pilih File dan untuk menggunakan gambar yang sudah di upload sebelumnya klik From this Blog seperti di bawah ini :


  • Setelah itu klik Add Selected untuk menambahkan gambar tersebut ke area post.
  • Setelah itu klik kembali Gambar Produk dan pilih Small ( ini untuk fungsi zoom )
  • Untuk pengaturan posting produk lainnya ikuti petunjung berikut ini :
  • Untuk point no 1 itu bisa anda isi dengan Nama produk.
  • Point 2 itu adalah data produk seperti Harga,deskripsi,stok dan lain-lain.
  • untuk point 3 itu adalah kolom Label/Tag yang berguna untuk mengkategorikan produk.
  • Point 4 itu button publikasikan untuk menerbitkan produk anda.

7. Menampilkan Badge produk SALE,SOLD dan NEW.

Template TOKONESIA memiliki fitur badge untuk mendukung kinerja toko anda dan di sisi lain untuk membuat tampilan toko menjadi lebih profesional.



Untuk memuncul badge seperti di atas anda cukup memberikan nama LABEL pada saat membuat posting produk.
  • Untuk memunculkan badge PRODUK  TERBARU silahkan isikan nama label dengan BARU ( semua menggunakan huruf kapital/besar ).
  • Untuk memunculkan badge LIMITED EDITION silahkan isikan nama label dengan LIMITED ( semua menggunakan huruf kapital/besar )
  • Untuk memunculkan badge STOK PRODUK HABIS silahkan isikan nama label dengan HABIS ( semua menggunakan huruf kapital/besar )

8. Mengganti Logo dan Icon Toko Online.

  • Siapkan sebuah logo berukuran ( 260 x 75px ) dan icon ( 35 x 35px )
  • Klik menu Tataletak > dan lihat sebelah kanan layar anda.
  • di halaman widget,klik Edit pada widget Header dan Favicon seperti di bawah ini :
  • Kemudian akan muncul pop-up dan klik Pilih file/ Browser .
  • Upload logo yang sudah anda siapkan sebelumnya dan jangan lupa centang opsi nomor 2 ( Selain judul dan keterangan ).
  • Klik simpan.

9. Menambahkan dan Edit widget pada Template.

  • Masih di menu Tataletak/layout.
  • Untuk melakukan edit silahkan klik edit pada masing-masing widget yang sudah pernah anda tambahkan sebelumnya.
  • Untuk menambahkan widget,silahkan klik Tambahkan widget ( english : Add widget ) untuk menambahkan widget di posisi yang anda mau seperti contoh di bawah ini :
  • Pada poin no 1 itu adalah link edit untuk Mengedit widget.
  • untuk poin 2 itu untuk menambahkan widget baru.
  • untuk menyudahi jangan lupa klik Simpan.

10. Cara Memasang widget Navigation Number ( navigasi next page )

Fitur ini berfungsi untuk navigasi menuju ke halaman berikutnya di toko online anda. cara memasangnya cukup mudah.

  • Klik menu TataLetak ( LAYOUT ) .
  • Setelah itu lihat di sebelah kanan ada widget html yang berada di bawah widget Posting Blog.
  • Klik Edit dan pastekan script Navigation Number.txt yang ada di dalam file download pada kolom yang tersedia.

  • Klik SIMPAN/SAVE.

11. Mengganti NAVIGASI Kontak di TOKONESIA.



Di atas merupakan salah satu fitur dari TOKONESIA yaitu Kontak Navbar Navigation yang memudahkan pemiliki toko untuk meletakan info kontak seperti email,bbm dan no hp.

  • Masuk ke menu TEMPLATE.
  • Klik EDIT HTML.
  • Setelah itu cari deretean kode seperti di bawah ini ( Gunakan CTRL+F ) untuk mempercepat pencarian.

<div class='contact-wrap'>
<!-- Phone BBM Email -->
<div class='phone'>(+62) 85-779-188-529</div>
<div class='bbm'>23BBM7C</div>
<div class='email'>mail@tokonesia.com</div>
</div>
  • Silahkan ganti text berwarna MERAH dengan info kontak toko anda.
  • Setelah itu jangan lupa klik Simpan Template / Save Templates.

12. Mengganti Menu Horizontal di TOKONESIA Template. 



Untuk mengganti menu horizontal yang di bagian atas pada template ini :

  • masuk ke menu Template dan pilih Edit HTML
  • Kemudian cari deretan kode seperti di bawah ini :


<div class='okemenu'>
<ul class='sf-menu'>
<li><a class='currenttt' href='#'>HOME</a></li>
<li><a href='#'>Fashion</a>
<ul>
<li><a href='#'>Produk 1</a></li>
<li><a href='#'>Produk 2</a></li>
<li><a href='#'>Produk 3</a></li>
<li><a href='#'>Produk 4</a></li>
<li><a href='#'>Produk 5</a></li>
</ul>
</li>
<li><a href='#'>Aksesoris </a>
<ul>
<li><a href='#'>Produk 1</a></li>
<li><a href='#'>Produk 2</a></li>
<li><a href='#'>Produk 3</a></li>
<li><a href='#'>Produk 4</a></li>
<li><a href='#'>Produk 5</a></li>
</ul>
</li>
  <li><a href='#'>Elektronik </a>
<ul>
<li><a href='#'>Produk 1</a></li>
<li><a href='#'>Produk 2</a></li>
<li><a href='#'>Produk 3</a></li>
<li><a href='#'>Produk 4</a></li>
<li><a href='#'>Produk 5</a></li>
</ul>
</li>
<li><a href='#'>Furniture</a>
<ul>
<li><a href='#'>Produk 1</a></li>
<li><a href='#'>Produk 2</a></li>
<li><a href='#'>Produk 3</a></li>
<li><a href='#'>Produk 4</a></li>
<li><a href='#'>Produk 5</a></li>
</ul>
</li>
<li><a href='#'><i class='fa fa-phone' style='padding-right:10px'/>Kontak</a></li>
<li><a href='#'><i class='fa fa-shopping-cart' style='padding-right:10px'/>Cara Belanja</a></li>

  • Ganti text yang berwarna merah dengan Nama Menu yang anda kehendaki.
  • Untuk text yang berwarna Kuning itu adalah Submenu,silahkan di ganti sesuai keinginan.
  • Untuk mengganti URL agar aktif silahkan ganti tanda # dengan URL tujuan anda.
  • Klik SIMPAN TEMPLATE.

13. Mengganti gambar Slider Toko Online :

  • Masih di halaman HTML > cari kode <div class='oke-slider'> dan lihat ke bawah ada sekumpulan kode seperti :
<ul class='rslides'>
<li><a href='http://www.oketemplate.com/'><img alt='TOKONESIA Template' src='https://1.bp.blogspot.com/-kUtfie5bqD4/VvyaJTG9eyI/AAAAAAAADi8/bFIZoB1_XEo0GYc6CPx77HeCtXanrChUA/s1600/banner-tokonesia.png'/></a></li>
<li><a href='http://www.oketemplate.com/'><img alt='TOKONESIA Template' src='https://4.bp.blogspot.com/-TEQLtDapcxs/VvyhcCEW2tI/AAAAAAAADjM/tkC_H71Bs-wGSLcaQfKvLTOkhC4_BwPxw/s1600/banner-tokonesia-2.png'/></a></li>
</ul>

Perhatian :
  • Ganti URL berwarna Hijau dengan alamat URL tujuan dari banner tersebut,bisa ke halaman atau ke web lain.
  • Untuk text berwarna Merah silahkan di ganti dengan URL gambar slider yang sebelumnya sudah di upload ke internet atau blogger.
  • Ukuran gambar Slider adalah Lebar : 950px dan Tinggi : 250px .
  • Jangan lupa Simpan Template kembali.

14. Mengisi widget LAYANAN TOKO KAMI .


  • Silahkan anda pilih menu tata letak dan lihat di sebelah kanan.
  • Terdapat 3 kolom widget untuk menempatkan kode script layanan kami.
  • Klik edit dan pastekan script yang sudah kita lampirkan di dalam file download.
  • Klik SIMPAN widget / save/

15. Mengganti banner Diskon.



Fitur tambahan dari SHOPCART adalah banner diskon yang ada di HOMEPAGE dimana bisa anda gunakan untuk menempatkan banner diskon maupun promo toko online anda.

  • Masih di HTML > Cari kode <div class='switch3'> dan lihat di bagian bawah kode tersebut terdapat deretan kode seperti :
<a href='http://www.oketemplate.com'><img class='3img' src='https://1.bp.blogspot.com/-qmgxq27m_jY/VzBgxw_BoaI/AAAAAAAADnw/fpCyLWnB_0QXN_4ydnCnwdJUd9EjbyEIwCLcB/s1600/banner1.jpg' style='width:310px;height:120px;margin-right:2px;border:0px solid#ccc;padding:5px;margin-left:10px;'/></a>
<a href='http://www.oketemplate.com'><img class='3img' src='https://3.bp.blogspot.com/-xjETAo36y7Q/VzBgzFZc2aI/AAAAAAAADn0/05jEWZh5ISE8_sC8WlVE_3nEGWmwxtJigCLcB/s1600/banner2.jpg' style='width:310px;height:120px;margin-right:2px;border:0px solid#ccc;padding:5px;'/></a>
<a href='http://www.oketemplate.com'><img class='3img' src='https://4.bp.blogspot.com/-yOgXa2ZyQls/VzBg0KlzaCI/AAAAAAAADn4/gsPaqAi0E7E4Jcu6AvyKLrmVjETAlL31gCLcB/s1600/banner3.jpg' style='width:310px;height:120px;margin-right:5px;border:0px solid#ccc;padding:5px;'/></a>

  • Untuk kode yang berwarna MERAH silahkan ganti dengan alamat URL banner toko online anda.
  • Untuk URL yang berwarna Kuning silahkan ganti dengan alamat url tujuan yang anda inginkan.
  • Ukuran banner Lebar : 310px  x Tinggi : 120px.

16. Cara Mengganti URL Temukan Kami di.

Ini adalah fitur terbaru dari Oketemplate.com yang bisa anda gunakan untuk mengkoneksi socmed toko anda ke website.


  • Anda masih berada di area HTML dan cari kode <!-- Code untuk link instagram --> .
  • Lihat di bagian bawah terdapat deretan kode seperti di bawah ini :

<!-- Code untuk link instagram -->
<a class='tooltip' href='#'><span class='bubble'>Temukan Kami di FACEBOOK</span>
<img alt='SHOPCART' height='40' src='http://3.bp.blogspot.com/-cMtI2-Jd6Yc/Vkrj-gSNJMI/AAAAAAAADV8/JMFwOoDGnJE/s1600/FB.png' width='180'/></a>
<!-- Code untuk link facebook -->
<a class='tooltip' href='#'><span class='bubble'>Temukan Kami di TWITTER</span>
<img alt='SHOPCART' height='40' src='http://3.bp.blogspot.com/-IwMHoPtRNEM/Vkrkv3olVKI/AAAAAAAADWE/wrCd80DXxjE/s1600/TW.png' width='180'/></a>
<!-- Code untuk link kaskus -->
<a class='tooltip' href='#'><span class='bubble'>Temukan Kami di INSTAGRAM</span>
<img alt='SHOPCART' height='40' src='http://4.bp.blogspot.com/-6Kc3mKvIHtY/Vkrkwzn3JfI/AAAAAAAADWM/fqOU5Wimgk8/s1600/ig.png' width='180'/></a>
<!-- Code untuk link kaskus -->
<a class='tooltip' href='#'><span class='bubble'>Temukan Kami di BUKALAPAK</span>
<img alt='SHOPCART' height='40' src='https://1.bp.blogspot.com/-EUP9Ikkdefs/VwHh3Fvmc_I/AAAAAAAADmU/5Q-6jHycsVwvacFhCp5zA1CBpPqlPRldA/s1600/bukalapak.png' width='180'/></a>
<!-- Code untuk link kaskus -->
<a class='tooltip' href='#'><span class='bubble'>Temukan Kami di TOKOPEDIA</span>
<img alt='SHOPCART' height='40' src='http://1.bp.blogspot.com/-5wpQyx4ETik/VkrlRXUAO1I/AAAAAAAADWc/Qrz2QSE9Iyw/s1600/tk.png' width='180'/></a>

  • Silahkan ganti tanda # yang berwarna Merah dengan alamat URL socmed anda.
  • Simpan Template.

17. Cara Edit widget TESTIMONIAL.



Ini adalah fitur testimonial yang coba kami tanamkan ke dalam template tokonesia. Widget ini berfungsi untuk meletakkan testimonial dari pembeli toko anda yang di buat dalam bentuk slider berjalan.

  • Masih di edit HTML.
  • Cari kode <div class='testimonials-slider'> dan lihat dereta kode seperti ini di bawahnya.

<div class='slide'>
            <div class='testimonials-carousel-thumbnail'><img alt='' src='http://1.bp.blogspot.com/-DhXXU2Gtto0/VUniSCedM2I/AAAAAAAAHEw/9PeVwKV0NHU/s1600/gambar%2Bkarikatur%2B(6).png' width='120'/></div>
                <div class='testimonials-carousel-context'>
                <div class='testimonials-name'>David Pujiono <span>Kediri-indonesia</span></div>
                <div class='testimonials-carousel-content'><p>Template TOKONESIA sangat powerfull dan SEO Friendly,dari segi loading pun terbilang sangat cepat mengingat fitur yang ada di dalamnya begitu komplit.Untuk merubah warnanya pun sangat mudah dan widget terintegrasi dengan baik untuk kelas template profesional. Thanks OKETEMPLATE..!!</p></div>
            </div>
  • Silahkan ganti URL berwarna merah dengan URL Foto dari orang yang memberikan testimonial atau bisa juga menggunakan gambar lain.
  • Ganti text berwarna Coklat dengan nama pemberi testimonial dan tex berwarna Hijau ganti dengan alamat pemberi testimonial.
  • Untuk kumpulan text berwarna ungu adalah deskripsi testimonial yang diberikan oleh pembeli,silahkan tuliskan di sana.
  • Klik Simpan Template atau Save Templates.

18. Cara merubah Warna TEMPLATE via Template Designer

  • Silahkan klik menu Tata Letak ( Layout )
  • Lihat di poko kanan atas klik link Desainer Template ( Template Designer )
  • Kemudian pilih menu Tingkat Lanjut ( Advance )
  • Setelah itu anda bisa merubah Warna di beberapa opsi yang sudah di sediakan seperti Warna Background template,warna menu dan masih banyak lagi.
  • Jika sudah pas dengan perubahan template anda > klik Terapkan ke Blog ( apply to blog ) pada pojok kanan atas.
  • SELESAI,......

TERIMA KASIH

Bergabung dengan ribuan blogger lainnya

ads

1 Response to "Panduan Template Tokonesia/Okenesia"

  1. Tolong admin, di cek theme tokonesia ada kerusakan... sudah lama memberi pengaduan tapi tidak pernah di respon... tolong di respon ya... thanks

    BalasHapus