Membuat Showcase Widget Product Shopee

Juni 29, 2022

Candil Kuya - Hallo Sobat Developers kembali lagi di blog saya yang sangat sederhana ini, hari ini kita akan belajar web design mebuat Showcase Widget Product Shopee sebuah tutorial pemrograman dasar hanya menggunakan CSS dan HTML yang bisa dijadikan refferensi pembelajaran untuk anda para pengunjung setia blog dan juga youtube channel Candil Code, anda bisa menerapkan design ini untuk mempercantik tampilan website anda. Tidak usah berlama lama langsung saja saya share tutorial Showcase Widget Product Shopee Silahkan di simak dan perhatikan baik-baik code di bawah ini.

Cara Membuat Showcase Widget Product Shopee

HTML CSS Javascript


<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='Bag Shopping Totebag Unisex' height='800' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK875n7mndauqPlmi8Kxua_tmM7X59R0uBJ3PIQb2kjudOUM7WcfpIPZ3Ezjbp4VqdhC0Mr96YobIUOpcNEOGtrISySVP24zctXUlJx_Zq3AyVXLE2VshO1hkCaSXjlgi_AL4FFCiNLlVZJb2E5vYEbaaAfohaApVy2bXgalJeqpQnnJjWIhVRn1U/s1600/Dailyoutfits%20Totebag%20Bag%20Shopping.jpeg' title='Bag Shopping Totebag Unisex' width='800' />
    </div>
    <div class='desk-produk'>
      <span>Shopping Totebag Unisex Premium Quality</span>
      <div class='harga-produk'>
        Rp29.000
      </div>
      <a class='link-produk' href='https://bit.ly/3ymnOFH' rel='nofollow sponsored noopener' target='_blank' title='Beli Sekarang'>
        BELI SEKARANG
      </a>
    </div>
  </div>
 
  <div class='produk'>
    <div class='gambar-produk'>
      <img alt='MAINAN ANAK EDUKASI BELAJAR' height='800' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7qr91v_xulRiiBK4q3VJTQ9SKdkQnAOpFQuPeaWThSLOhagjXoUpeiLiwztIhXEam_lJSwx4WwukAabzGblZ18I6jHc0MC23rDJnfGec08Ity0jqVO-KT_AU-2A2Y0EzvlknP-CBWE830B_E6LH6HCWg9P-WLEwRq1RqsLZTW7mSTVhcIGPs2NSk/s1600/MAINAN%20ANAK%20EDUKASI%20BELAJAR.jpeg' title='MAINAN ANAK EDUKASI BELAJAR' width='800' />
    </div>
    <div class='desk-produk'>
      <span>MAINAN ANAK EDUKASI BELAJAR PROJECTOR</span>
      <div class='harga-produk'>
       Rp39.100-Rp88.880
      </div>
      <a class='link-produk' href='https://bit.ly/3I5iutK' rel='nofollow sponsored noopener' target='_blank' title='Beli Sekarang'>
        BELI SEKARANG
      </a>
    </div>
  </div>
 
  <div class='produk'>
    <div class='gambar-produk'>
      <img alt='AGENBAJU SAJADAH TRAVELING' height='800' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxr092oR8bisY3tVh_NWxIucs_ACZziI0PDG80uskym8DjEFol_yT2GnbtpktK5Cm33b3HD_THOVgJd9Kwd0FOPJnXIfHg2ycjqnDhUjb2itAPdxB2W8h69aYNfxrSaI-77MKKQg5FBzkIBxFr2BqSrCR5H2xHBStG2K3qjPg1S9XvPTGjYRbbYZA/s1600/AGENBAJU%20SAJADAH%20TRAVELING.jpeg' title='AGENBAJU SAJADAH TRAVELING' width='800' />
    </div>
    <div class='desk-produk'>
      <span>AGENBAJU SAJADAH TRAVELING</span>
      <div class='harga-produk'>
        Rp16.500
      </div>
      <a class='link-produk' href='https://bit.ly/3yqMME3' rel='nofollow sponsored noopener' target='_blank' title='Beli Sekarang'>
        BELI SEKARANG
      </a>
    </div>
  </div>
 
  <div class='produk'>
    <div class='gambar-produk'>
      <img alt='Kerudung Khimar Instan Hijab Sporty pet' height='800' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVRylUVjeEg1TftzvL02dme97IaRzo9rPGgLrsp6xlKsta08_g-LTRttNPvyQRnW0c0mkC4E6k2uiOF-XFnqzrrp1FfHbJtGzD5jm_397tsY74piiHC7vE6Qpjgs1PlhZu8v3xMw7DDwfQWxX5410w-n6ZLGKX46s90PNV62acfCSNt4FgignQQAI/s1600/Kerudung%20Khimar%20Instan%20Hijab%20Sporty%20pet.jpeg' title='Kerudung Khimar Instan Hijab Sporty pet' width='800' />
    </div>
    <div class='desk-produk'>
      <span>Kerudung Khimar Instan Hijab Sporty pet</span>
      <div class='harga-produk'>
        Rp13.500
      </div>
      <a class='link-produk' href='https://bit.ly/3Om3dXH' rel='nofollow sponsored noopener' target='_blank' title='Beli Sekarang'>
        BELI SEKARANG
      </a>
    </div>
  </div>
 
  <div class='produk'>
    <div class='gambar-produk'>
      <img alt='HIJAB BELLA SQUARE / HIJAB POLYCATTON ' height='800' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrBXn28wb9UwZtiR-G56Z2QEwTtZO0Ew6yYJHY33L8U6FzHlwUeHEmuf5R355kkXLbabibtxg9LRKG4pnJe3xEKwfoXZFtO_mgNjPfUOScY786oI3xCZ-KcuV8cepIYhiSHUdh-C7zygxNYP1_Nml8wPPcj6OaWA2rQBg9VR5dyZkDUlXIn7flB2o/s1600/HIJAB%20BELLA%20SQUARE%20HIJAB%20POLYCATTON%20.jpeg' title='HIJAB BELLA SQUARE / HIJAB POLYCATTON ' 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='https://bit.ly/3QU92x1' rel='nofollow sponsored noopener' target='_blank' title='Beli Sekarang'>
        BELI SEKARANG
      </a>
    </div>
  </div>
 
  <div class='produk'>
    <div class='gambar-produk'>
      <img alt='30+ WARNA (CAMILA) Pashtan Anak Camila' height='800' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw5e2q5QxYEkQxBG2FzseozfsTJNFfg4mlA53Q_KcsR9W6rncAhf921kFrX-67c-k_-QBD9v7_FAL4ji13coq9o71WaSZAkkEwzrdPMqx1bfrKfrZyivTMxBmGGjxrO1LlQYyO2ur6PYW89SVzfguhWJePLU70K34MC_oucOab9SvKvnI-fAdF9UQ/s1600/Pashtan%20Anak%20Camila.jpeg' title='30+ WARNA (CAMILA) Pashtan Anak Camila' width='800' />
    </div>
    <div class='desk-produk'>
      <span>30+ WARNA (CAMILA) Pashtan Anak Camila</span>
      <div class='harga-produk'>
        Rp12.999-Rp13.999
      </div>
      <a class='link-produk' href='https://bit.ly/3y3SHgC' rel='nofollow sponsored noopener' target='_blank' title='Beli Sekarang'>
        BELI SEKARANG
      </a>
    </div>
  </div>
 
  <div class='produk'>
    <div class='gambar-produk'>
      <img alt='Wallpaper Dinding FOAM Timbul 3D Bata Putih' height='800' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_wkW8BjndPawfB-8hv3fSGwW5D3VMa_sUac5t68noY54vnJE36s2UFhrf3OgChJRIv1cNv1vUdv1OhVui0xMAtP6pfgpOBGAg0IjpGE2LE6avvIXqwlaaTLmE37U_OpJTGcECFy1Jgbvlw2Cf2tNmS1Og2j2fJyut7NVLFDzY1176N1ai9M6zAlc/s1600/Wallpaper%20Dinding%20FOAM%20Timbul%203D.jpeg' title='Wallpaper Dinding FOAM Timbul 3D Bata Putih' width='800' />
    </div>
    <div class='desk-produk'>
      <span>Wallpaper Dinding FOAM Timbul 3D Bata Putih</span>
      <div class='harga-produk'>
        Rp1.999-Rp7.700
      </div>
      <a class='link-produk' href='https://bit.ly/3y03GYL' rel='nofollow sponsored noopener' target='_blank' title='Beli Sekarang'>
        BELI SEKARANG
      </a>
    </div>
  </div>
 
  <div class='produk'>
    <div class='gambar-produk'>
      <img alt='KAOS POLOS LENGAN PENDEK COTTON COMBED 30S' height='800' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ-JfIvl4MFM0zUch2D2-cmf-7a7QDFIzgMGfWZriu05STPWgsTSzVnX4z0qVfFcH9vmLgHXhWFsWySUFZVuwaNEm_ziPQz4w95QLp4SvCKhtD5JUqh4mHKHd-UzBcrbIavQaxKOFpQvUdoctMySohCvHdOEC0ejH23wOzSVAK2Mf2JLbfx_R3MTQ/s1600/KAOS%20POLOS%20LENGAN%20PENDEK.jpeg' title='KAOS POLOS LENGAN PENDEK COTTON COMBED 30S' width='800' />
    </div>
    <div class='desk-produk'>
      <span>KAOS POLOS LENGAN PENDEK COTTON COMBED</span>
      <div class='harga-produk'>
        Rp29.900-Rp32.900
      </div>
      <a class='link-produk' href='https://bit.ly/3OP4Cpk' rel='nofollow sponsored noopener' target='_blank' title='Beli Sekarang'>
        BELI SEKARANG
      </a>
    </div>
  </div>
 
  <div class='produk'>
    <div class='gambar-produk'>
      <img alt='Cetak Brosur Murah A5 Fullcolor' height='800' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhufq4xkHqgtjwkLvK61bTESlm20-kyMmIPbI-PVK_Belu5gFGxWhzx9NU7FDstEANX-PLGW6efMn81vGGut4wcRKeaGMuxALThqF51TavT5SAk4EJHSQFOx_SOFsgdQTfXG0eeMhao3WkUdZEWrbVASuIWl4wmQyWp0-8bT-VXt31U9dWb9DIp2rk/s1600/Cetak%20Brosur%20Murah%20A5%20Fullcolor.jpeg' title='Cetak Brosur Murah A5 Fullcolor' width='800' />
    </div>
    <div class='desk-produk'>
      <span>Cetak Brosur Murah A5 Fullcolor</span>
      <div class='harga-produk'>
        Rp199 - Rp299
      </div>
      <a class='link-produk' href='https://bit.ly/3bzr9rW' rel='nofollow sponsored noopener' target='_blank' title='Beli Sekarang'>
        BELI SEKARANG
      </a>
    </div>
  </div>
 
  <div class='produk last'>
    <div class='gambar-produk'>
      <img alt='[LANGSUNG DARI PABRIK] Kaos Polos cotton' height='800' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxRcBQGzHRnD9RW8Iml8BCYTlJilXYKKOM0efDSwSWwN_XAaUr88Mh9VIVW7Sd7XbaYlGrKJUFTWU4KF5Mwhpe_oZqjxGTm3dmKmLKlD3aC75qtNUouXO3gzsV27fxikAIiloWvUeTJh1Y5I3MHY_NenNl3TKFJ8flDEtd63rG73sN6T6CRXB0LIQ/s1600/%5BLANGSUNG%20DARI%20PABRIK%5D%20Kaos%20Polos%20cotton.jpeg' title='[LANGSUNG DARI PABRIK] Kaos Polos cotton' width='800' />
    </div>
    <div class='desk-produk'>
      <span>[LANGSUNG DARI PABRIK] Kaos Polos cotton</span>
      <div class='harga-produk'>
        Rp52.999
      </div>
      <a class='link-produk' href='https://bit.ly/3NmUkf3' rel='nofollow sponsored noopener' target='_blank' title='Beli Sekarang'>
        BELI SEKARANG
      </a>
    </div>
  </div>
 
</div>
</div>


 @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:#ee4d2d;}
.produk-showcase .produk-header{background:#ee4d2d;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:#ee4d2d;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;}

***

Demo Video

Gunakan Live code editor online untuk mencoba tutorial diatas.

Tentang Cara Membuat Showcase Widget Product Shopee

Bagaimana sobat Candil Code cukup mudah bukan? artikel ini sengaja saya sediakan khusus untuk anda yang masih pemula di dalam dunia pemrograman, Semoga dapat bermanfaat bagi sobat Candil yang ingin belajar dasar pemrograman seperti HTML, CSS dan Juga Javascript. Anda juga bisa menggunakan jasa candil kuya untuk anda yang sedang mencari layanan Jasa Pembuatan Website.

Saya membagikan code ini hanya untuk tujuan pengujian dan pembelajaran. Jika anda mempunyai kritik dan saran Silahkan kirimkan pesan kepada Saya Melalui Halaman Kontak atau bisa berkomentar di kolom yang sudah saya sediakan dibawah.

Penutup

Sebelumnya saya ucapkan terima kasih banyak kepada Kang adhy Suryadi Pemilik blog Kompi Ajaib yang sudah memberikan refferensi tutorial ini. Semoga saja code Showcase Widget Product Shopee bisa dijadikan refferensi pembelajaran untuk anda yang masih baru terjun ke dalam dunia web pemrograman jangan lupa di share ke teman atau kerabat anda, nantikan web design menarik lainnya hanya di blog ini, Semoga Bermanfaat and Hapy Ngoding.

Baca juga :

Candil Code

Membuat Showcase Widget Product Shopee

Cara Membuat Showcase Widget Product Shopee

Tentang Cara Membuat Showcase Widget Product Shopee

Penutup

Posting Komentar

Butuh bantuan? Chat sekarang!