Product Showcase Widget, Carousel dengan Scrollbar Tanpa Javascript

Widget tampilan produk, bilah gulir dengan Javascript tanpa korsel . Hari ini saya membuat widget produk scrollbar carousel tanpa javascript.

Widget ini sangat berguna untuk mitra seperti produk Shopee dan lainnya. Dengan widget ini kita bisa menampilkan lebih dari 1 produk, namun tidak akan memakan banyak space di blog. Oleh karena itu, peluang untuk mendapatkan lebih banyak klik pada produk.

Widget ini responsive, sehingga dapat ditempatkan dimana saja, seperti di header, sidebar, atau di bawah postingan. Tapi saran saya lebih baik menempatkan widget ini di bawah posting karena memiliki peluang lebih baik untuk mendapatkan klik daripada tempat lain.

Anda dapat mencoba demo di widget Jsfiddle di bawah ini.

Saya memasang 10 produk di widget ini, tetapi Anda dapat menambahkan atau menghapusnya. Yang terpenting, Anda mencoba mengubah produk agar sesuai dengan kebutuhan konsumen yang berbeda. Nama produk, harga, dan tautan ke gambar dimasukkan secara manual. Kita dapat menggunakan hosting Blogger untuk mendapatkan URL gambar hanya dengan mengunggah gambar di editor pos dan kemudian mendapatkan URL gambar.

Widget Demo Produk

Yang ingin mencoba, gunakan kode berikut.

kode css

Tambahkan CSS berikut ke gaya 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

Rekatkan kode HTML di bawah ini di mana Anda ingin menampilkannya, cukup ubah URL gambar, nama produk, harga, dan tautan afiliasi Anda.

Perhatian!

Untuk nama produk, widget produk HARUS setinggi 3 baris agar rapi atau sama tingginya, dan gambar harus berupa gambar persegi.

 Barang Terlaris di Shopee 















 Anting titanium stainless steel emas asli Korea untuk anak laki-laki



 Rp5928



 

BELI SEKARANG

 

















 Bella Square Baru "bagian warna 1" || hijab segi empat



 9900 rupee



 

BELI SEKARANG

 

















 HIJAB BELLA SQUARE / HIJAB POLYCOTTON



 10.500 rupiah



 

BELI SEKARANG

 

















 Lipstik matte PINKFLASH, lembut, tahan lama



 1.000 - 16.000 rupiah



 

BELI SEKARANG

 

















 Penjualan Resmi - Pensil Alis Mireya Perfect - Pensil Alis



 Rp6000



 

BELI SEKARANG

 

















 BUHOTEI【BPOM】 Bioaqua Sheet Mask Serum Alami



 3.249 - 3.829 rupee



 

BELI SEKARANG

 

















 Racun tikus mati kering dan tidak berbau - Mao Wang



 Rp 1080



 

BELI SEKARANG

 

















 BOXER PRIA WANITA | petinju



 dari 3.999 hingga 14.999 rupee



 

BELI SEKARANG

 

















 Kemeja bergaris premium lengan panjang



 dari 29.900 menjadi 34.500 rupee



 

BELI SEKARANG

 

















 Kemeja linen wanita ukuran plus / Kemeja Olivia



 Rs 52.999



 

BELI SEKARANG

Untuk blog AMP tinggal ganti tag menjadi . Widget ini juga bisa digunakan oleh pengguna Blogger atau Wordpress. menjadi . Widget ini juga bisa digunakan oleh pengguna Blogger atau Wordpress.

Demikian postingan kali ini semoga bermanfaat.