Widget Product Showcase Sama seperti shopee
Widgate Product Showcase Carousel dengan Scrollbar Tanpa Javascript hanya menggunakan CSS halo rekan rekan pengunjung blog ini pada kesempatan kali ini saya akan membahas mengenai bagai mana cara menambah widget Produk yang mirip dengan toko online kebetulan saya menemukan blog yang membahas mengenai widget tersebut,widget ini berasal dari kompiajaib.com dan sangat membantu buat kalian yang memiliki blog toko online dan ingin menambah produk kalian di tampilan halaman utama blog anda.
Jika anda memiliki beberapa produk hal ini sangat di anjurkan agar pengunjung toko online kalian menyukai produk yang kalian tawarkan.
Salah satu blog prabayar yang menggunakan widget hampir sama adalah www.dailybloggerpro.com salah satu blog yang membahas konten premium buat para pembacanya.
Oleh karena itu saya di sini akan menjelaskan sedikit tentang widget tersebut karena sangat mudah dan gampang untuk orang membeli produk yang di tawarkan,selain itu Widget ini sudah responsive jadi jangan kuatir.
Baik lah sebelum memulai di sini kita tidak harus faham akan koding karena di sini kalian hanya mengikuti setep by step saja.
Untuk melihat demo kalian bisa langsung saja lihat di bawah:
Pada widget di atas hanya ada 10 produk yang di sematkan kalian bisa mengatur dan mengurangi sesuai kebutuhan kalian saja.
Namun widget ini ada kelemahanya di mana kalian harus mengganti link gambar dan cara ordernya sesuai kebutuhan karena widget ini manual dan tidak otomatis maka produk yang di tampilkan adalah produk produk yang harus di pilih pilih.
Hal yang harus di lakukan adalah
- 1.Product Showcase Widget
- Kode CSS
@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;}
Produk Terlaris di Shopee
Traktir creator minum kopi dengan cara memberi sedikit traktiran untuk membeli kopi.
silakan klik icon panah di atas