Hallo sobat okayim.com , pada kesempatan kali ini saya akan membagikan tutorial Cara Membuat Tampilan List Produk Scrollbar yang bisa digeser ke kiri dan kekanan. Tampilan Scrollbar list produk mirip Tokopedia / shopee ini sangat cocok buat kamu yang memiliki blog toko online untuk menampilkan produk-produk jualan kamu.

Created Produk List Showcase Scrollbar With Html CSS

Bagi sobat okayim.com yang ingin mencoba membuatnya sobat bisa mengikuti langkah" yang akan saya berikan dibawah ini.

CSS List Produk Scrollbar

Langkah pertama yang harus sobat siapkan yaitu menyiapkan code CSS yang akan saya berikan ini. Silahkan copy dan pastekan code CSS produk Showcase dibawah ini.

@font-face{font-family:Roboto;font-display:swap;font-style:normal;font-weight:400;src:local('Roboto'),local('Roboto-Regular'),url(https://fonts.gstatic.com/s/roboto/v16/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2'),url(https://fonts.gstatic.com/s/roboto/v16/2UX7WLTfW3W8TclTUvlFyQ.woff) format('woff'),url(https://fonts.gstatic.com/s/roboto/v16/QHD8zigcbDB8aPfIoaupKOvvDin1pK8aKteLpeZ5c0A.ttf) format('truetype')}
@font-face{font-family:Roboto;font-display:swap;font-style:normal;font-weight:500;src:local('Roboto Medium'),local('Roboto-Medium'),url(https://fonts.gstatic.com/s/roboto/v16/RxZJdnzeo3R5zSexge8UUVtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'),url(https://fonts.gstatic.com/s/roboto/v16/RxZJdnzeo3R5zSexge8UUT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff'),url(https://fonts.gstatic.com/s/roboto/v16/RxZJdnzeo3R5zSexge8UUSZ2oysoEQEeKwjgmXLRnTc.ttf) format('truetype')}
@font-face{font-family:Roboto;font-display:swap;font-style:normal;font-weight:700;src:local('Roboto Bold'),local('Roboto-Bold'),url(https://fonts.gstatic.com/s/roboto/v16/d-6IYplOFocCacKzxwXSOFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'),url(https://fonts.gstatic.com/s/roboto/v16/d-6IYplOFocCacKzxwXSOD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff'),url(https://fonts.gstatic.com/s/roboto/v16/d-6IYplOFocCacKzxwXSOCZ2oysoEQEeKwjgmXLRnTc.ttf) format('truetype')}
.produk-showcase{width:100%;height:auto;margin:0;padding:0;}
.produk-showcase .produk-box{width:100%;height:310px;overflow-x:scroll;overflow-y:hidden;border:1px solid #F48FB1;background:#FCE4EC;padding:10px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;display:block;white-space:nowrap;}
.produk-showcase .produk-box::-webkit-scrollbar{width:2px;height:8px;}
.produk-showcase .produk-box::-webkit-scrollbar-thumb{background-color:#C2185B;}
.produk-showcase .produk-header{background:#C2185B;color:#fff;font-family:Roboto,sans-serif;font-size:16px;font-weight:700;margin:0;padding:0 10px;display:block;text-align:left;height:30px;line-height:30px;text-transform:uppercase;}
.produk-showcase .produk{position:relative;margin-right:6px;width:150px;min-height:277px;height:auto;border:1px solid #F48FB1;background:#fff;border-radius:10px;overflow:hidden;display:inline-block;white-space:normal;}
.produk-showcase .produk.last{margin-right:0;}
.produk-showcase .gambar-produk{width:100%;height:auto;position:absolute;top:0;left:0;}
.produk-showcase .gambar-produk img{width:100%;height:auto;display:block}
.produk-showcase .desk-produk{margin-top:160px;position:relative;padding:0 10px 10px;}
.produk-showcase .desk-produk span{color:#333;font-family:Roboto,sans-serif;font-size:14px;font-weight:400;margin-bottom:5px;line-height:1.1;display:block;}
.produk-showcase .desk-produk .harga-produk{color:#880E4F;font-family:Roboto,sans-serif;font-size:14px;font-weight:700;margin-bottom:5px;line-height:1.1;display:block;}
.produk-showcase .desk-produk a.link-produk{background:#C2185B;color:#fff;font-family:Roboto,sans-serif;font-size:14px;font-weight:500;padding:8px 12px;display:block;text-align:center;}
.produk-showcase .google-auto-placed{display:none;}

Html List Produk Scrollbar Showcase

Langkah kedua silahkan anda copy dan pastekan code html dibawah

<div class='produk-showcase'>
<div class='produk-header'>Produk Terlaris di Shopee</div>
<div class='produk-box'>

  <div class='produk'>
    <div class='gambar-produk'>
      <img alt='Gambar Produk' height='800' src='URL GAMBAR PRODUK' title='Gambar Produk' width='800' />
    </div>
    <div class='desk-produk'>
      <span>Anting Titanium Anak Emas Asli Korea Anti Karat</span>
      <div class='harga-produk'>
        Rp5.928
      </div>
      <a class='link-produk' href='LINK AFFILIASI DI SINI' rel='nofollow sponsored noopener' target='_blank' title='Beli Sekarang'>
        BELI SEKARANG
      </a>
    </div>
  </div>
 
  <div class='produk'>
    <div class='gambar-produk'>
      <img alt='Gambar Produk' height='800' src='URL GAMBAR PRODUK' title='Gambar Produk' width='800' />
    </div>
    <div class='desk-produk'>
      <span>Bella Square New "warna part 1" || hijab segiempat</span>
      <div class='harga-produk'>
        Rp9.900
      </div>
      <a class='link-produk' href='LINK AFFILIASI DI SINI' rel='nofollow sponsored noopener' target='_blank' title='Beli Sekarang'>
        BELI SEKARANG
      </a>
    </div>
  </div>
 
  <div class='produk'>
    <div class='gambar-produk'>
      <img alt='Gambar Produk' height='800' src='URL GAMBAR PRODUK' title='Gambar Produk' width='800' />
    </div>
    <div class='desk-produk'>
      <span>HIJAB BELLA SQUARE / HIJAB POLYCATTON</span>
      <div class='harga-produk'>
        Rp10.500
      </div>
      <a class='link-produk' href='LINK AFFILIASI DI SINI' rel='nofollow sponsored noopener' target='_blank' title='Beli Sekarang'>
        BELI SEKARANG
      </a>
    </div>
  </div>
 
  <div class='produk'>
    <div class='gambar-produk'>
      <img alt='Gambar Produk' height='800' src='URL GAMBAR PRODUK' title='Gambar Produk' width='800' />
    </div>
    <div class='desk-produk'>
      <span>PINKFLASH Matte Lipstik Lembut Tahan Lama</span>
      <div class='harga-produk'>
        Rp1.000 - Rp16.000
      </div>
      <a class='link-produk' href='LINK AFFILIASI DI SINI' rel='nofollow sponsored noopener' target='_blank' title='Beli Sekarang'>
        BELI SEKARANG
      </a>
    </div>
  </div>
 
  <div class='produk'>
    <div class='gambar-produk'>
      <img alt='Gambar Produk' height='800' src='URL GAMBAR PRODUK' title='Gambar Produk' width='800' />
    </div>
    <div class='desk-produk'>
      <span>Clearance Sale - Mireya Perfect Brow Pencil - Pensil Alis</span>
      <div class='harga-produk'>
        Rp6.000
      </div>
      <a class='link-produk' href='LINK AFFILIASI DI SINI' rel='nofollow sponsored noopener' target='_blank' title='Beli Sekarang'>
        BELI SEKARANG
      </a>
    </div>
  </div>
 
  <div class='produk'>
    <div class='gambar-produk'>
      <img alt='Gambar Produk' height='800' src='URL GAMBAR PRODUK' title='Gambar Produk' width='800' />
    </div>
    <div class='desk-produk'>
      <span>BUHOTEI【BPOM】Bioaqua Sheet Mask Natural Serum</span>
      <div class='harga-produk'>
        Rp3.249 - Rp3.829
      </div>
      <a class='link-produk' href='LINK AFFILIASI DI SINI' rel='nofollow sponsored noopener' target='_blank' title='Beli Sekarang'>
        BELI SEKARANG
      </a>
    </div>
  </div>
 
  <div class='produk'>
    <div class='gambar-produk'>
      <img alt='Gambar Produk' height='800' src='URL GAMBAR PRODUK' title='Gambar Produk' width='800' />
    </div>
    <div class='desk-produk'>
      <span>Racun Tikus Mati Kering dan Gak Bau - Mao Wang</span>
      <div class='harga-produk'>
        Rp1.080
      </div>
      <a class='link-produk' href='LINK AFFILIASI DI SINI' rel='nofollow sponsored noopener' target='_blank' title='Beli Sekarang'>
        BELI SEKARANG
      </a>
    </div>
  </div>
 
  <div class='produk'>
    <div class='gambar-produk'>
      <img alt='Gambar Produk' height='800' src='URL GAMBAR PRODUK' title='Gambar Produk' width='800' />
    </div>
    <div class='desk-produk'>
      <span>BOXER PRIA WANITA | CELANA PENDEK PRIA</span>
      <div class='harga-produk'>
        Rp3.999 - Rp14.999
      </div>
      <a class='link-produk' href='LINK AFFILIASI DI SINI' rel='nofollow sponsored noopener' target='_blank' title='Beli Sekarang'>
        BELI SEKARANG
      </a>
    </div>
  </div>
 
  <div class='produk'>
    <div class='gambar-produk'>
      <img alt='Gambar Produk' height='800' src='URL GAMBAR PRODUK' title='Gambar Produk' width='800' />
    </div>
    <div class='desk-produk'>
      <span>Kaos Rib Premium Lengan Panjang</span>
      <div class='harga-produk'>
        Rp29.900 - Rp34.500
      </div>
      <a class='link-produk' href='LINK AFFILIASI DI SINI' rel='nofollow sponsored noopener' target='_blank' title='Beli Sekarang'>
        BELI SEKARANG
      </a>
    </div>
  </div>
 
  <div class='produk last'>
    <div class='gambar-produk'>
      <img alt='Gambar Produk' height='800' src='URL GAMBAR PRODUK' title='Gambar Produk' width='800' />
    </div>
    <div class='desk-produk'>
      <span>Kemeja wanita oversize linen / Olivia Shirt</span>
      <div class='harga-produk'>
        Rp52.999
      </div>
      <a class='link-produk' href='LINK AFFILIASI DI SINI' rel='nofollow sponsored noopener' target='_blank' title='Beli Sekarang'>
        BELI SEKARANG
      </a>
    </div>
  </div>
 
</div>
</div>

Kemudian anda bisa menyesuaikan ya pada bagian-bagian tertentu seperti.

src='URL GAMBAR PRODUK'

<span>Bella Square New "warna part 1" || hijab segiempat</span>

BELI SEKARANG

Demikian artikel cara membuat list produk Scrollbar Showcase menggunakan html CSS. Semoga artikel saya ini bermanfaat.

OKAYIMDOTCOM

Html CSS Produk List Scrollbar

Created Produk List Showcase Scrollbar With Html CSS

CSS List Produk Scrollbar

Html List Produk Scrollbar Showcase

Post a Comment

Cara Membuat Multi Related Post Di Blogger

viral foto pegawai ambulan buang mayat di hutan

Cara Buka Situs Dewasa Tanpa Vpn

Cara mendapatkan Backlink Gratis 2024

Code Script Untuk Menghapus Link Komentar Di Blogger Otomatis