Codepelajar – Widget tabel spesifikasi adalah alat yang dapat menampilkan data produk secara terstruktur dalam bentuk tabel. Tabel ini biasanya berisi kolom yang memuat spesifikasi dan fitur-fitur penting dari suatu produk. Materi yang ditampilkan dalam tabel dapat beragam, seperti ukuran, bobot, warna, kecepatan, resolusi, dan banyak lagi. Widget tabel spesifikasi bekerja dengan menyediakan template tabel yang dapat disesuaikan dengan informasi produk yang ingin ditampilkan.
Cara Membuat Widget Table Spesifikasi
Buka Blogspot > tema > edit html salin css di bawah ini dan letakan di atas kode ]]></b:skin> atau di atas kode </style>
• • •
/* table spesifikasi by codepelajar ubah warna orange cari kode #f89000 */
.wc-sp{position:relative;width:100%;line-height:15px;font-family:'Noto Sans', sans-serif;font-size:12px;color:#455065;font-weight:400;background:#ebeff3;margin-top:5px;padding:12px 0 12px 70px}
.wc-sp:before{content:'';position:absolute;height:100%;width:50px;left:0;top:0;padding:10px;z-index:2}
.wc-sp.icon-battery:before{content:'';background:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill='%23fff' d='M16 20H8V6H16M16.67 4H15V2H9V4H7.33C6.6 4 6 4.6 6 5.33V20.67C6 21.4 6.6 22 7.33 22H16.67C17.41 22 18 21.41 18 20.67V5.33C18 4.6 17.4 4 16.67 4M15 16H9V19H15V16M15 7H9V10H15V7M15 11.5H9V14.5H15V11.5Z' /></svg>") center / 12px no-repeat;background-size:20px 20px;background-color:#f89000}
.wc-sp.icon-dimension:before{content:'';background:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill='%23fff' d='M4,6H20V16H4M20,18A2,2 0 0,0 22,16V6C22,4.89 21.1,4 20,4H4C2.89,4 2,4.89 2,6V16A2,2 0 0,0 4,18H0V20H24V18H20Z' /></svg>") center / 12px no-repeat;background-size:20px 20px;background-color:#f89000}
.wc-sp.icon-chipset:before{content:'';background:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill='%23fff' d='M5,3H7V5H9V3H11V5H13V3H15V5H17V3H19V5H21V7H19V9H21V11H19V13H21V15H19V17H21V19H19V21H17V19H15V21H13V19H11V21H9V19H7V21H5V19H3V17H5V15H3V13H5V11H3V9H5V7H3V5H5V3Z' /></svg>") center / 12px no-repeat;background-size:20px 20px;background-color:#f89000}
.wc-sp.icon-storage:before{content:'';background:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill='%23fff' d='M18,8H16V4H18M15,8H13V4H15M12,8H10V4H12M18,2H10L4,8V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V4A2,2 0 0,0 18,2Z' /></svg>") center / 12px no-repeat;background-size:20px 20px;background-color:#f89000}
.wc-sp.icon-camera:before{content:'';background:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill='%23fff' d='M12,17C10.37,17 8.94,16.21 8,15H12A3,3 0 0,0 15,12C15,11.65 14.93,11.31 14.82,11H16.9C16.96,11.32 17,11.66 17,12A5,5 0 0,1 12,17M12,7C13.63,7 15.06,7.79 16,9H12A3,3 0 0,0 9,12C9,12.35 9.07,12.68 9.18,13H7.1C7.03,12.68 7,12.34 7,12A5,5 0 0,1 12,7M20,4H16.83L15,2H9L7.17,4H4A2,2 0 0,0 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z' /></svg>") center / 12px no-repeat;background-size:20px 20px;background-color:#f89000}
.wc-sp.icon-os:before{content:'';background:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill='%23fff' d='M7 22H9V24H7V22M11 22H13V24H11V22M15 22H17V24H15V22M5 4H19A2 2 0 0 1 21 6V18A2 2 0 0 1 19 20H5A2 2 0 0 1 3 18V6A2 2 0 0 1 5 4M5 8V18H19V8H5' /></svg>") center / 12px no-repeat;background-size:20px 20px;background-color:#f89000}
• • •
Format Penulisan Pada Postingan Atau Halaman
Buat postingan batu atau halaman baru dan masuk ke dalam mode HTML, salin kode di bawah ini dan tempelkan di tempat yang sesuai
• • •
<div class='wc-sp icon-battery'>
<b>Battery Capacity:</b> 5000mAh
</div>
<div class='wc-sp icon-dimension'>
<b>Dimension:</b> 197g, 0mm thickness
</div>
<div class='wc-sp icon-chipset'>
<b>Chipset:</b> Qualomm Snapdragon 450
</div>
<div class='wc-sp icon-storage'>
<b>Storage:</b> 32Gb/64GB
</div>
<div class='wc-sp icon-camera'>
<b>Camera:</b> Rear, 13 MP + Front, 8 Mp
</div>
<div class='wc-sp icon-os'>
<b>OS:</b> Android 10
</div>
• • •
Edit bagian yang dibutuhkan lalu simpan dan lihat hasilnya.
Oke mungkin itu saja untuk tutorial hari ini semoga bermanfaat dan dapat di gunakan pada blog Anda agar blog semakin lebih menarik.
