UNTUK TUTORIAL KUMPLITNYA CEK DISINI >> https://rianseo.com/documentation-category/tokopedia/


Di bawah ini adalah panduan cara pemasangan dan pengaturan BOSPEDIA. Silakan dibaca dan diikuti dengan teliti agar templatenya tampilannya terpasang dengan baik dan benar.

Pengaturan Nomor Form Widget WhatsApp Template Bospedia

Ini adalah fiktur versi terbaru dari template blogger tokopedia, Untuk mengatur Nomor whatsapp pembelian.

Berlaku untuk template TokoPedia v.1.8.0

Caranya Buka Blogger > Template / Theme > Edit HTML > CTRL+F Masukan tulisan Nomor Whatsapp lalu klik ” Enter ”

Silahkan Anda ganti nomor ” 085886624531 ” dengan nomor Whatsapp milik Anda sendiri.

Lalu ganti juga nomor Whatsapp untuk form kontak, dengan cara CTRL+F Masukan tulisan ” <!– Nomor WhatsApp –> dan klik ” Enter ”

Ganti nomor yang saya beri lingkaran merah dengan nomor Whatsapp Anda.
Jika sudah selesai, silahkan Klik ” SIMPAN “

================================================================

Pengaturan Jumlah Postingan yang Tampil di Homepage

Buka Blogger > Setting > Post dan Komentar

Jika postingan produk yang ingin kamu tampilkan berjumlah 10 maka pengaturan tampilan harus berjumlah 15, sebab 5 dari postingan akan tidak terlihat jika 5 postingan itu berjenis artikel.

Jika kamu tidak menulis artikel, cukup atur tampilan postingan 10 jumlah saja 8 / 6 dalam jumlah genap agar tampilannya bagus. jangan menggunakan tampilan di angka 7 / 5 / 3 / 9

============================================================================================

Mengatur Link Menu atas Header

Buka Blogger Dashbor > Tema > Edit HTML

Klik di keyboard CTRL-F dan masukan text <!-- Menu Top --> Klik enter

<div class='subheader'>
<div class='subheader-inner'>
<div class='subheader-left'>
<a href='/'>Download Template Tokopedia</a>
</div>
<div class='subheader-right'>
<a href='#post-wrapper'>Mulai Berlanja</a>
<a href='/promo/'>Promo</a>
<a href='/help'>Pusat Bantuan</a>
</div>
</div>
</div>

NB: Atur link sesuai dengan keinginan kamu

============================================================================================

Memasang Formulir Kontak

Buka Blogger > Halaman > Halaman Baru

Ubah mode postingan menjadi " HTML "

Lalu salin kode dibawah ini dan letakan didalam halaman tersebut.

Ingin Menghubungi saya? Silahkan isi Form dibawah ini<br />
<div class="contact-form-widget">
<form name="contact-form">
<span class="ctitles">Name :</span>
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" type="text" value="" />
<span class="ctitles">Email <span class="swajib">*</span> :</span>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" type="text" value="" />
<span class="ctitles">Message <span class="swajib">*</span> :</span>
<textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" rows="10"></textarea>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Kirim" />
<br />
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</form>
</div>
Saya tidak menyediakan jasa, konsultasi, atau pelatihan dalam bentuk apapun.
<br />
<br />
Untuk pertanyaan terkait salah satu artikel di Blog ini, silahkan tulis langsung lewat form komentar di halaman artikelnya<br />
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>

Klik "PUBLIKASIKAN"

============================================================================================

Memasang Wigdet Pengiriman di Bagian Sidebar

Buka Blogger Dashbor > Tata Letak > Widget Sidebar > Add Gagdet HTML

Pasti kode HTML dibawah ini.

<div class="rvm-shipping-support">
<div class="rvm-shipping-support-img">
<img class="lazyload" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8s9T26G3zR4sA8jmEAi94WfAC-CGcxWeAs7d14wV5qbZG-zJ_KVLXiGlbsoY-A_B_kw687CaYKLIRc0LBS2b7aOwIyLLktfSmhjJqg89-xxEiQzs9L5ka4JvQKZ8pJkuqhmvG07fPh44/s1600/kurir-jne.png" alt="JNE" title="JNE" />
</div>
<div class="rvm-shipping-support-title">
<ul class="rvm-shipping-options">
<li><i class="svg_icon__tick_grey"></i><span class="inline-block va-middle">Reguler</span></li>
<li><i class="svg_icon__tick_grey"></i><span class="inline-block va-middle">OKE</span></li>
<li><i class="svg_icon__tick_grey"></i><span class="inline-block va-middle">YES</span></li>
</ul>
</div>
</div>
<div class="rvm-shipping-support">
<div class="rvm-shipping-support-img">
<img class="lazyload" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipqqZ6AuDH9kcQaK2u-68pEsZf6uu8JI_9JZLw1Dvw1iMVzhmnky4N0adYWnvObD1ig1OXSabo4Bqb1ZnyyKUqzkSLsmjE05G0CaSHKmXh6307sdxXQ_TnE41FIT_P4ohYFtZ1ELxmh8M/s1600/kurir-tiki.png" alt="TIKI" title="TIKI" />
</div>
<div class="rvm-shipping-support-title">
<ul class="rvm-shipping-options">
<li><i class="svg_icon__tick_grey"></i><span class="inline-block va-middle">Reguler</span></li>
<li><i class="svg_icon__tick_grey"></i><span class="inline-block va-middle">Over Night Service</span></li>
</ul>
</div>
</div>
<div class="rvm-shipping-support">
<div class="rvm-shipping-support-img">
<img class="lazyload" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbrsC2js4GGIsmhXCyzYm9PAPp2dtPyAXZgvg2hyphenhyphenoWDx-4clk1nceQ7q0dYbtVBMkGEi06aUI7aJyNCBEZ6coz7h3OHBdClkjiVtaJjOHKjStDj2bgNgICEVCGYBFY3bILkhmgYgVhVEg/s1600/kurir-gosend.png" alt="GO-JEK" title="GO-JEK" />
</div>
<div class="rvm-shipping-support-title">
<ul class="rvm-shipping-options">
<li><i class="svg_icon__tick_grey"></i><span class="inline-block va-middle">Instant Courier</span></li>
<li><i class="svg_icon__tick_grey"></i><span class="inline-block va-middle">Same Day</span></li>
</ul>
</div>
</div>
<div class="rvm-shipping-support">
<div class="rvm-shipping-support-img">
<img class="lazyload" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm_L6Gy7uu1omyFeJI7AV2qsVsWvSalWZf8waiGgl89p8864vrgm1Br6q0kw_hBsfxGFT1P8q2jtFtwjWXHa7zEbG9ORNkGfEH9q2dDdeCJry16Gybi5TCsP-D7mg2W9FSvs7jCT4OSE0/s1600/kurir-grab.png" alt="Grab" title="Grab" />
</div>
<div class="rvm-shipping-support-title">
<ul class="rvm-shipping-options">
<li><i class="svg_icon__tick_grey"></i><span class="inline-block va-middle">Instant</span></li>
</ul>
</div>
</div>
<div class="rvm-shipping-support">
<div class="rvm-shipping-support-img">
<img class="lazyload" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi98L410A5U_ghkrfotxPAqurBxDcZDorCC9_7kJLiqDwltOhl7fzCrMrgfmEnvBz4CbUdgRsnVSBAo-BQQbSdiZKFSVQyZymLkDfaxhUiady3VSnGIgIFbLQcC3K_Xr8DeWel6zcN1ekY/s1600/kurir-jnt.png" alt="J&amp;T" title="J&amp;T" />
</div>
<div class="rvm-shipping-support-title">
<ul class="rvm-shipping-options">
<li><i class="svg_icon__tick_grey"></i><span class="inline-block va-middle">Reguler</span></li>
</ul>
</div>
</div>

Klik " SIMPAN / SAVE "
============================================================================================

Memasang Wigdet Barner Iklan dan Icon Kategori

Buka Blogger > Tata Letak > Advertisement

Gadget HTML/JavaScript > Advertisement > Edit

Gadget HTML/JavaScript > Logo Icon Footer > Edit

============================================================================================

Mengatur Link Menu Navigasi

Buka Blogger > Tema > Edit HTML

Klik di keyborad CTRL+F dan masukan text <!-- Edit Menu Navigasi Link --> lalu klik enter

<!-- Edit Menu Navigasi Link -->
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>Blog</a></li>
<li><a href='#'>Menu</a></li>
<li><a href='#'>Menu</a>
<ul>
<li><a href='#'>SubMenu1</a></li>
<li><a href='#'>SubMenu2</a></li>
<li><a href='#'>SubMenu3</a></li>
</ul>
</li>
<li><a href='#'>Menu</a>
<ul>
<li><a href='#'>SubMenu1</a></li>
<li><a href='#'>SubMenu2</a></li>
<li><a href='#'>SubMenu3</a></li>
<li><a href='#'>SubMenu4</a></li>
</ul>
</li>
</ul>
<!-- Penutup Kode Menu Link Navigasi -->

• Ubah tanda # dengan link tujuan kamu
• Ubah text yang tanda berwarna merah dengan text yang kamu inginkan

Mengurangi Menu link Navigasi

Hapus kode mulai dari <li><a href='#'>Menu</a> 

Menambah kode link Menu Navigasi

Copy kode ini <li><a href='#'>Menambah Menu</a>

Menambah Submenu Link Navigasi

Copy kode ini

<li><a href='#'>NamaMenu</a>
  <ul>
 <li><a href='#'>NamaSubMenu1</a></li>
 <li><a href='#'>NamaSubMenu2</a></li>
  </ul>
</li>

Lalu letakan kode diatas </ul><!-- Penutup Kode Menu Link Navigasi -->

============================================================================================

Mengatur Icon Profil Navigasi

Buka Tema > Edit HTML > CTRL+F Masukan tulisan <!-- menu profil --> dan klik " ENTER "

<div class='link-right'>
<div class='toko-profil' tabindex='0'>
<a href='#'>
<img alt='akun' class='lazyload' src=LINK_FOTO_PROFIL_KAMU'/></a>
<ul class='dropdown'>
<li><a href='/p/about.html' title='About'>About</a></li>
<li><a href='/' title='Blog'>Blog</a></li>
<li><a href='/search/label/Artikel' title='Contoh tulisan'>Artikel</a></li>
<li><a href='/p/privacy-policy.html' title='Privacy Policy'>Privacy Policy</a></li>
</ul>
</div>
<li><a href='LINK_ARTIKEL_TERBARU'><i class='icon-bell'/></a></li>
<li><a href='LINK_KONTAK'><i class='icon-envelope'/></a></li>
</div>

Keterangan: 

• Ubah tulisan " LINK_FOTO_PROFIL_KAMU " dengan link / URL foto yang kamu inginkan.
• Atur link lainnya, sesuai dengan link yang kamu inginkan.

============================================================================================

Meganti Barner Gambar depan

• Buka " Blogger " > Tema > Edit HTML
• Tekan CTRL+F Masukan tulisan <div class='slideshow-container'> klik " ENTER "

<div class='slideshow-container'>
  <div class='mySlides fade'>
    <a href='https://alamatdomain.com/'>
    <img src='//ecs7.tokopedia.net/img/cache/1242/banner/2019/5/31/20723472/20723472_7cd58716-7d15-4aa4-9732-f9814905c10e.jpg' style='width:100%;border-radius:8px'/>
  </a>
  <div class='mySlides fade'>
    <a href='https://alamatdomain.com/'>
    <img src='//ecs7.tokopedia.net/img/cache/1242/attachment/2019/5/27/26950746/26950746_829906fe-1129-45a8-800d-3364f7dea735.png' style='width:100%;border-radius:8px'/>
  </a>
  <div class='mySlides fade'>
    <a href='https://alamatdomain.com/'>
    <img src='//ecs7.tokopedia.net/img/cache/1242/attachment/2019/5/27/28201197/28201197_1c1d30dc-c26b-4fc5-8bcb-59654acb91ef.jpg' style='width:100%;border-radius:8px'/>
  </a>

=============================================================================================

Mengatur Icon Label

• Buka " Blogger " > klik " Tata Letak "
• Tambahkan Gagdet > HTLM/JavaScript > Letakan kode HTML dibawah ini.

<!-- Icon Kategori -->
<div class='button-home'>
<a class='icon-tag' href='#'><span class='bus'><img alt='Handphone' src='//ecs7.tokopedia.net/img/cache/100-square/attachment/2019/1/9/20723472/20723472_5f5e7244-47d1-4658-83d4-e1e5432b35e9.png'/></span>
<div>Handphone</div></a>
<a class='icon-tag' href='#'><span class='bus'><img alt='Fashion' src='//ecs7.tokopedia.net/img/cache/100-square/attachment/2019/1/9/20723472/20723472_c1c2e230-a80f-4a3e-8daf-ad51a14cf0fc.png'/></span>
<div>Fashion</div></a>
<a class='icon-tag' href='#'><span class='bus'><img alt='Home &amp; Living' src='//ecs7.tokopedia.net/img/cache/100-square/attachment/2019/1/9/20723472/20723472_83b01a2f-07b1-4380-845e-73d96ed7f596.png'/></span>
<div>Home</div></a>
<a class='icon-tag' href='#'><span class='bus'><img alt='Mom &amp; Baby' src='//ecs7.tokopedia.net/img/cache/100-square/attachment/2019/1/11/20723472/20723472_fb00470f-a7ad-46e0-94f1-8848eb76e655.png'/></span>
<div>Mom &amp; Baby</div></a>
<a class='icon-tag' href='#'><span class='bus'><img alt='Automotive' src='//ecs7.tokopedia.net/img/cache/100-square/attachment/2019/1/11/20723472/20723472_606f519d-b551-4dbc-9fa1-c7f07683b7b8.png'/></span>
<div>Automotive</div></a>
<a class='icon-tag' href='#'><span class='bus'><img alt='Hobbies' src='//ecs7.tokopedia.net/img/official_store/microsite/category/icon-others.png'/></span>
<div>Hobbies</div></a>
<a class='icon-tag' href='#'><span class='bus'><img alt='Mom &amp; Baby' src='//ecs7.tokopedia.net/img/cache/100-square/attachment/2019/1/9/20723472/20723472_78b63617-6868-4e4f-89ca-f1c1f43f03e6.png'/></span>
<div>Beauty &amp; Care</div></a>
<a class='icon-tag' href='#'><span class='bus'><img alt='Hobbies' src='//ecs7.tokopedia.net/img/cache/100-square/attachment/2019/1/9/20723472/20723472_1d9cf415-ce56-4c59-a0a8-f48571f7dcb0.png'/></span>
<div>Food &amp; Health</div></a>
<a class='icon-tag' href='#'><span class='bus'><img alt='Mom &amp; Baby' src='//ecs7.tokopedia.net/img/cache/100-square/attachment/2019/1/9/20723472/20723472_ec927e6f-7e50-4edf-a75a-c5792591f487.png'/></span>
<div>Electronic</div></a>
</div>

• Keterangan :
• # Adalah URL label Produk
• //ecs7.tokopedia.net/img/cache/100-square/attachment/2019/1/9/20723472/20723472_c1c2e230-a80f-4a3e-8daf-ad51a14cf0fc.png- URL Icon, bisa kamu ganti sesuai icon gambar milik kamu sendiri.
• Untuk bisa mendapatkan icon yang bagus dan sesuai dengan keinginan kamu, bisa lihat dan pilihgambar logo / icon yang kamu inginkan di free icon
• Langkah terakhir " SIMPAN "

Cara Membuat Postingan Produk

• Login ke "Blogger" > klik "Entri Baru"
• Pada editor artikel pilih mode "HTML"
• Setelah itu paste kode ini pada bagian halaman artikel :

<div class="gambar-produk">
<img alt="judul-produk" src="#FOTO" />
</div>
<div class="status-produk">
<div class="stok-habis">Stok Habis</div>
</div>
<div class="detail-produk" itemprop="offers" itemscope="" itemtype="https://schema.org/Offer">
<div content="IDR" itemprop="priceCurrency"></div>
<div class="harga-produk" content="3551500" itemprop="price">
Rp355.1500</div>
</div>
<div class="rating-produk" itemprop="aggregateRating" itemscope="" itemtype="https://schema.org/AggregateRating">
<span class="skor" itemprop="ratingValue">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half"></i>
</span>
<span class="rating" itemprop="reviewCount">8</span>
</div>
<div class="detail-produk">
Isi spesifikasi Produk!
</div>

• Keterangan :
  • #FOTO Adalah URL Foto Produk
  • content=”3551500″
    Ganti angka 3551500 dengan harga produk tanpa tanda (,) koma/ (.)titik
  • Rp.355.1500
    Ganti angkanya dengan harga produk menggunakan simbol mata uang.
  • <i class="fa fa-star"></i> - Ini adalah icon bintang nilai riview Produk, Jika ingin menambahkan / menggurangi jumlah bintang, silahkan hapus <i class="fa fa-star"></i> / tambahkan. Icon menggunakan FontAwesome.
  • Angka ( 8 ) adalah nilai riview produk, ubah sesuai keinginan.
  • Isi spesifikasi Produk!…
    Ganti dengan deskripsi produk
  • Untuk menambah harga dicoret, tambahkan kode <strike>HARGA</strike> di depan harga. Kurang lebih jadinya seperti ini :
    <strike>Rp.4.000.000</strike> Rp.4.000.000
  • Untuk menambahkan keterangan stok habis, tambahkan kode ini :

    <div class="status-produk">
    <div class="stok-habis">Stok Habis</div>
    </div>

  • Untuk menambahkan keterangan promo, tambahkan kode ini :

    <div class="promo">45%</div>

  • Untuk menambahkan keterangan terlaris, tambahkan kode ini :

    <div class="produk-terlaris">Terlaris</div>

Cara Membuat Post Tabel Deskripsi Produk

<table><tbody>
<tr><td colspan="2">Product Details</td> </tr>
<tr><td>Product Code</td><td>702583</td></tr>
<tr><td>Types of products</td><td>Local</td></tr>
<tr><td>Weight</td><td>250 grams</td></tr>
<tr><td>Description</td><td>All Size<br>
P = 60 cm<br>
L = 46 cm</td></tr>
<tr><td>Material</td><td>Spandek Rayon</td></tr>
<tr><td>Stock</td><td><div class="item_stock">
<span id="mit">Limited</span></div>
</td></tr>
</tbody></table>

Cara Membuat Tab Deskripsi Produk

<div class="deskripsi-produk">
<section class="tabs">  
<input checked="checked" class="tab-selector-1" id="tab-1" name="radio-set" type="radio">  
<label class="tab-label-1" for="tab-1">Rincian</label>  
<input class="tab-selector-2" id="tab-2" name="radio-set" type="radio">  
<label class="tab-label-2" for="tab-2">About Brand</label>  
<input class="tab-selector-3" id="tab-3" name="radio-set" type="radio">  
<label class="tab-label-3" for="tab-3">Kebijakan</label>  
<div class="content">
<div class="content-1">
Isi Tulisan 1
</div>
<div class="content-2">
Isi Tulisan 2
</div>
<div class="content-3">
Isi Tulisan 3
</div>
</div>
</section>
</div>

Menganti Nomor WhatsApp,Telephone dan SMS

<div class='tombol-beli'> 
<div class='beli-lewat-chat'>
<h3>Beli Sekarang :</h3>
<a class='chat-wa' href='https://api.whatsapp.com/send?phone=+6282111111111' target='_top'>
<i aria-hidden='true' class='fa fa-whatsapp'/> Chat WhatsApp
</a>
<a class='chat-phone' href='tel:082111111111' target='_top'>
<i aria-hidden='true' class='fa fa-phone'/> Telepon
</a>
<a class='chat-sms' href='sms:082111111111' target='_top'>
<i aria-hidden='true' class='fa fa-envelope'/>
Kirim SMS
</a>
</div>