Cara Membuat Postingan Produk Pada Template Median UI 1.5 dan 1.6

Rp. 10.000

UkuranKecil, Sedang, Besar

WarnaMerah, Kuning, HIjau, Biru

CatatanIni adalah contoh postingan produk di template Median UI

atau Belanja melalui "Market Place" favorit anda :

⬆ Tab di atas bisa di klik ⬆

Saifullah.id Jadi Median UI itu sebenarnya sudah mendukung postingan khusus untuk berjualan barang atau jasa. Dengan kata lain, setelah membeli template Median UI kita tidak perlu lagi membeli template lain khusus toko online.

Namun, yang jadi masalah adalah pemakai template Median UI banyak yang tidak tahu cara posting produknya. Oleh sebab itu, berikut saya bagikan tutorialnya.

Cara Posting Produk Pada Template Median UI

Sebelum posting, kita buat "template postingan" terlebih dahulu agar tidak perlu copy paste kode setiap kali ingin upload barang jualan terbaru.

1. Cara Membuat Template Postingan

1. Buka Blogger
2. Tekan Setelan
3. Tekan Template entri (opsional)
   
   
   
4. Lalu masukkan Kode Script Postingan (tekan tab Kode Script / Download di bawah logo tokopedia untuk mendapatkan kodenya)
5. Simpan

2. Cara Posting Produk

1. Buka Blogger
2. Tekan Postingan
   
3. Tekan + POSTINGAN BARU
4. Tekan simbol Pensil, lalu ubah ke < > Edit HTML
5. Lalu ubah bagian ini
   
   
   
   
6. Jangan lupa isi bagian Label, Permalink, dan Deskripsi Penelusuran
   
   

   Label wajib di isi dengan kata Product agar harganya tampil di Homepage. Sedangkan Permalink sebaiknya di isi menggunakan tools Slug Converter agar postingan lebih SEO friendly

7. Tekan Publikasikan

Kelebihan Jualan di Median UI

1. Templatenya ringan
2. Sudah ada fitur harga, ukuran, warna, dan link ke Marketplace
3. Bagian deskripsi produk juga bisa di isi beberapa tab yang bisa di kostum sendiri.

Kekurangan Jualan di Median UI

1. Posting produk agak ribet karena berhubungan langsung dengan kode HTML
2. Cocok untuk pajang produk saja, tidak bisa langsung memilih pesanan
3. Terdapat bug pada tombol Tabs
4. Ukuran dan Warna tidak bisa di klik
5. Tidak tersedia tombol Order by Whatsapp
6. Belum mendukung Form Whatsapp Otomatis
7. Intinya tidak sebagus dan sesimpel pakai Wordpress

Jika kalian niat serius berjualan online, sebaiknya pakai Wordpress seperti olshop saya. Silakan lihat sendiri di sini

Template Postingan Median UI 1.5

<div class='separator'>

  <img alt='Image_title' src='Image_src' />

</div>

<!--[ Price to show in homepage ]-->

<div class='proPrice' data-text='Price'>Rp. 200.000</div>

<!--more-->

<div class='proInfo'>

  <div class='proInfoL'><small>Size</small><span>Small, Medium, Large, X Large</span></div>

  <div class='proInfoR'><small>Color</small><span>Merah, Kuning, HIjau, Biru</span></div>

</div>

<div class='proInfo one'><small>Sample</small><span>Nullam congue euismod euismod, mauris lacinia pellentesque vehicula</span></div>

<div class='proMarket'>

  <small>atau Belanja melalui "<b>Market Place</b>" favorit anda :</small>

  

  <!--[ Change attribute href='#' to add url ]-->

  <a title='Tokopedia' href='#' target='_blank' rel='noopener'>

    <img class='lazy' data-src='https://cdn.statically.io/favicons/tokopedia.com' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='>

  </a>

  <a title='Bukalapak' href='#' target='_blank' rel='noopener'>

    <img class='lazy' data-src='https://cdn.statically.io/favicons/bukalapak.com' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='>

  </a>

  <a title='Shopee' href='#' target='_blank' rel='noopener'>

    <img class='lazy' data-src='https://cdn.statically.io/favicons/shopee.co.id' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='>

  </a>

  <a title='Lazada' href='#' target='_blank' rel='noopener'>

    <img class='lazy' data-src='https://cdn.statically.io/favicons/lazada.co.id' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='>

  </a>

</div>

<!--[ Active function ]-->

<input class='allTabs hidden' id='forall-tabs1' type='radio' name='postTabs' checked>

<input class='allTabs hidden' id='forall-tabs2' type='radio' name='postTabs'>

<input class='allTabs hidden' id='forall-tabs3' type='radio' name='postTabs'>

<div class='postTabs'>

  <div class='tabsHead'>

    <!--[ Change atribute data-text='...' to replace tabs title ]-->

    <label for='forall-tabs1' data-text='Deskripsi'></label>

    <label for='forall-tabs2' data-text='Tabs_2'></label>

    <label for='forall-tabs3' data-text='Tabs_3'></label>

  </div>

  <div class='tabsContent'>

    <!--[ Tabs content ]-->

    <div class='tabsContent-1'>

      <!--[ Your content goes here ]-->

    </div>

    <!--[ Tabs content ]-->

    <div class='tabsContent-2'>

      <!--[ Your content goes here ]-->

    </div>

    <!--[ Tabs content ]-->

    <div class='tabsContent-3'>

      <!--[ Your content goes here ]-->

    </div>

  </div>

</div>

Template Postingan Median UI 1.6

<div class='separator'>

  <img alt='title_here' src='image_url_here'/>

</div>

<!--[ Price to show in homepage ]-->

<div class='pPric pPad' data-text='Price'>Rp. 200.000</div>

<!--more-->

<div class='pInfo pPad'>

  <div class='L'><small>Size</small><span>Small, Medium, Large, X Large</span></div>

  <div class='R'><small>Color</small><span>Merah, Kuning, HIjau, Biru</span></div>

</div>

<div class='pInfo o pPad'><small>Sample</small><span>Nullam congue euismod euismod, mauris lacinia pellentesque vehicula</span></div>

<div class='pMart'>

  <small>atau Belanja melalui '<b>Market Place</b>' favorit anda :</small>

  

  <!--[ Change attribute href='#' to add url ]-->

  <a title='Tokopedia' href='#' target='_blank' rel='noopener'>

    <img class='lazy' data-src='https://cdn.statically.io/favicons/tokopedia.com' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='>

  </a>

  <a title='Bukalapak' href='#' target='_blank' rel='noopener'>

    <img class='lazy' data-src='https://cdn.statically.io/favicons/bukalapak.com' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='>

  </a>

  <a title='Shopee' href='#' target='_blank' rel='noopener'>

    <img class='lazy' data-src='https://cdn.statically.io/favicons/shopee.co.id' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='>

  </a>

  <a title='Lazada' href='#' target='_blank' rel='noopener'>

    <img class='lazy' data-src='https://cdn.statically.io/favicons/lazada.co.id' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='>

  </a>

</div>

<!--[ Active function ]-->

<input class='tbIn hidden' id='fTabs-1' type='radio' name='postTabs' checked>

<input class='tbIn hidden' id='fTabs-2' type='radio' name='postTabs'>

<input class='tbIn hidden' id='fTabs-3' type='radio' name='postTabs'>

<!--[ Tabs header/title, replace class attribute to class='tbHd scrlH stick' if you want to create a floating tab title ]-->

<div class='tbHd scrlH'>

  <!--[ Change atribute data-text='...' to replace tabs title ]-->

  <label for='fTabs-1' data-text='Deskripsi'></label>

  <label for='fTabs-2' data-text='Pengiriman'></label>

  <label for='fTabs-3' data-text='Keterangan'></label>

</div>

<div class='tbCn'>

  <!--[ Tabs content ]-->

  <div class='tbText-1'>

    First tab here... 

  </div>

  

  <!--[ Tabs content ]-->

  <div class='tbText-2'>

    Second tab here...

  

  </div>

  

  <!--[ Tabs content ]-->

  <div class='tbText-3'>

    Third tab here...

  </div>

</div>

Download Template Postingan v1.5Download Template Postingan v1.6

Toko Online