widget table spesifikasi seperti jalantikus.com

cocok buat kalian yang memiliki blog yang mengbahas teknologi / review gadget

Hallo semua pada kesempatan kali ini saya akan membagikan widget table spesifikasi seperti jalantikus.com dengan html dan css.

widget ini di reguest oleh Andriana melalui email yang di kirimkan ke kami, buat kalian yang mau reguest tutorial maupun widget silakan bisa komentar ke salah satu artikel saya maupun halaman forum dan email, jika bagus atau menarik akan saya buatkan di masa mendatang. dan perlu di ingat saya tidak terima reguestan dari kalian yang mengcopas artikel saya dan membagikan source code saya tanpa izin!

widget ini cocok sekali buat kalian yang memiliki toko online yang menjual elektronik, atau kalian yang memiliki blog yang mengbahas seputar teknologi seperti mengreview hp laptop dll.

untuk demonya kalian bisa melihat melalui tombol di bawah ini, ok buat kalian yang ingin membuatnya mari simak caranya di bawah ini.

Widget Table Spesifikasi Seperti Jalan Tikus

silakan masuk ke blogger > tema > edit html salin css di bawah ini dan letkkan di atas kode ]]></b:skin> atau di atas kode </style>

/* table spesifikasi by wendy code 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

gunakan html seperti di bawah ini untuk membuat table spesifikasi pada postingan, selebihnya silakan di sesuaikan sendiri.

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

Menambahkan Icon Table Baru

jika ingin menambahkan icon table baru maka harus menambahkan css seperti di bawah ini, saya harap kalian memahami sedikit pengetahuan css dan icon svg untuk bisa memahami ini.

bagian saya tandai .icon-namaicon adalah nama class iconnya bebas aja terserah kalian mau beri nama apa yang penting nanti harus sama dengan di htmlnya.

sedangkan yang saya tandai kedua adalah icon svgnya, silakan kalian ganti dengan kode svg milik kalian, untuk mendapatkan icon svg kalian bisa kunjungi https://materialdesignicons.com

.wc-sp.icon-namaicon: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}

dan format penulisan htmlnya seperti di bawah ini, perhatikan yang saya tandai nama class harus sama dengan css di atas.

<div class='wc-sp icon-namaicon'>
<b>judul:</b> keterangan di sini
</div>

ok jadi sekian widget table spesifikasi seperti jalantikus.com yang bisa saya bagikan kali ini semoga bermanfaat dan terima kasih telah berkunjung.