Skip to main content
Privacy • Sitemap
©2023 KOMPI AJAIB
HomeBloggerCSS3HTML5WidgetProduct Showcase Widget, Carousel dengan Scrollbar Tanpa Javascript

Product Showcase Widget, Carousel dengan Scrollbar Tanpa Javascript

Ditulis oleh: Adhy Suryadi
Ditulis pada: 6/28/2022

Product Showcase Widget, Carousel dengan Scrollbar Tanpa Javascript - Hari ini saya membuat sebuah idget untuk memajang produk berupa carousel dengan scrollbar tanpa javascript.

Widget ini berguna khususnya untuk para affiliator seperti untuk produk Shopee atau lainnya. Dengan widget ini kita bisa memajang produk lebih dari 1 namun tidak menghabiskan banyak space di blog. Sehingga kemungkinan mendapatkan klik produk lebih banyak lagi.

Widget ini sudah responsive, jadi bisa ditaruh di mana saja, misal di header, sidebar, atau di bawah postingan. Namun saran saya, tempat terbaik untuk menaruh widget ini yaitu di bawah postingan karena kemungkinan mendapat kliknya lebih besar dari tempat lain.

Untuk demonya bisa dicoba pada widget Jsfiddle di bawah ini.

Pada widget ini saya memasang 10 produk, namun Anda bisa menambah atau menguranginya. Yang penting Anda rajin mengganti produknya untuk menjangkau beragam keinginan konsumen. Untuk gambar, nama produk, harga, dan link-nya dipasang secara manual. Untuk mengdapatkan URL gambar, kita bisa memanfaatkan hosting Blogger, tinggal upload gambar di post editor lalu ambil URL gambarnya.

Product Showcase Widget

Bagi yang ingin mencobanya, silahkan gunakan kode-kode berikut ini.

Kode CSS

Silahkan tambahkan kode CSS berikut pada style blog Anda.

@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;}

Kode HTML

Silahkan taruh kode HTML berikut di tempat di mana Anda ingin menampilkannya, tinggal mengganti URL gambar, nama produk, harga, dan link affiliasi Anda.

Perhatian!

Untuk nama produk HARUS 3 baris agar tinggi widget produknya rapih atau tingginya sama, begitu pun dengan gambar HARUS menggunakan gambar persegi.

<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>

Untuk blog AMP, tinggal ubah tag <img menjadi <amp-img. Widget ini juga bisa digunakan oleh pengguna Blogger atau Wordpress.

Demikian postingan kali ini, semoga bermanfaat.

Berbagi itu peduli:

Comment Policy:

Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui. Untuk komentar out of topics silahkan masuk ke Forum Kompi Ajaib
Buka Komentar
Buka Komentar
Jangan Diklik!

Menarik Untuk Dibaca Juga:

slot gacor joker123 sultan69 panenslot panen77 Panengg panenslot slot gacor Panen138 kenzo123 panenslot panenslot login panen138 panen77 linuxmagazines.com panen77 sublimelody.com http://103.146.203.79/ https://panenslot.shop/ panenslot panen77 Dewi138 Panen99 sbobet casino online mahjong ways 2 jawatogel kpk88 slot gacor betgratis
Iklan oleh KompiAjaib

Privacy • Sitemap
©2021 KOMPI AJAIB