Setting Template TokoPedia Blogger

Dibawah ini adalah panduan tata cara mengatur template TokoPedia Blogger yang sudah kamu beli. Mohon ikuti secara perlahan agar tampilannya sesuai dengan benar.

Cara Memasang Template Blogger

Buka file template yang berformat RAR

Klik kanan file template > Extra Here

extra template blogger format rar

Buka Notepad > drag file template yang berformat.xml ke Notepad

drag template blogger ke notepad

Salin kode yang berada di Notepad, CTRL+A lalu CTRL+C untuk menyalin semua kode.

notepad blogger template

Buka Blogger > Dashbor Pilih Template / Theme

blogger template setting

Klik Edit HTML > CTRL+A untuk menghapus semua kode template yang sebelumnya berada di blogger.

Paste kode template yang sudah disalin tadi sebelumnya, dengan cara klik kanan > paste atau CTRL+V

Lalu klik ” SIMPAN / SAVE ” Template.

Cara Kedua Memasang Template Blogger

  • Login ke Blogger > Pilih menu Tema
  • Klik Backup / Pulihkan
  • Klik Choose File
  • Pilih file template di Komputer > Klik Upload
  • Template sudah berhasil terpasang.

Cara Merubah Tulisan Logo Blogger

Buka Blogger > Dashbor > Tata Letak

Pilih Header > Edit

Cara Membuat Postingan Produk Template TokoPedia

Buka ” Blogger

Pilih Post > News Post > Pilih Mode HTML

new post produk blogger simple post

mode html post blogger

Salin kode HTML khusus dibawah ini.

<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="deskripsi-produk">
Isi spesifikasi Produk!
</div>

Catatan :

  • #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 dibawah 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>

Klik “Publikasikan

Menganti Gambar / Barner Halaman Depan

Buka ” Blogger ” > Tema > Edit HTML

Tekan CTRL+F Masukan tulisan <div class=’slideshow-container’> klik ” ENTER

Lalu ubah <img src=’//ecs7.tokopedia.net/img/cache/1242/banner/2019/5/31/20723472/20723472_7cd58716-7d15-4aa4-9732-f9814905c10e.jpg‘ style=’width:100%;/>

Tulisan yang berwarna kuning, dengan link foto / gambar milik kamu sendiri.

 

Rian SEO

View posts by Rian SEO
Blogger dari kalimantan selatan yang sudah lama berposisi sebagai penulis online dan memberikan berbagai macam informasi, trik, internet dan dunia blogging, Jika ada pertanyaan jangan malu untuk mengirim pesan kepada saya!
Scroll to top