Hallo sahabat blogger pada kesempatan kali ini saya akan berbagi tutorial cara membuat table spesifikasi seperti jalantikus menggunakan html dan css di blogger dengan mudah.
Buat kalian yang mau request tutorial seputar blogger silahkan berkomentar di salah satu artikel blogger saya, jika request kalian menarik akan saya buatkan dan posting disini atau kalian juga bisa menanam backlink dengan membuat guest post yang saya sudah sediakan di menu navigasi.
Widget ini sangat cocok sekali buat kalian yang punya blog yang membahas seputar teknologi seperti review laptop dan handphone dan cocok juga untuk blog yang menjual barang elektronik.
Untuk contoh hasilnya kalian bisa lihat gambar di bawah ini:
Atau untuk melihat demonya silahkan klik tombol di bawah ini:
Cara Membuat Table Spesifikasi Seperti Jalan Tikus di Blogger
- Silahkan masuk ke blogger kalian lalu pilih tema dan edit html
- Salin kode di bawah ini dan letakan tepat di atas kode ]]></b:skin>
/* table spesifikasi by telatngoding.com 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}Cara penulisan pada postingan
untuk cara penulisan silahkan gunakan HTML di bawah ini, dan selebihnya silahkan 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>Cara menambahkan icon table baru
Jika kalian ingin menambahkan icon table baru pada postingan kalian maka kalian harus menambahkan CSS seperti di bawah ini
Untuk yang saya tandai .icon-namaicon adalah nama class untuk iconnya dan bebas terserah kalian mau di beri nama apa yang penting dan kalian harus catat nama class icon css harus sama dengan nama di htmlnya
Dan untuk yang saya tandai di bagian kedua adalah icon svgnya, silahkan ganti svgnya dengan yang kalian inginkan dan untuk mengambil icon svgnya kalian bisa langsung mengunjungi situsnya 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}Untuk penulisan HTMLnya perhatikan di bawah ini, untuk yang saya tandai nama class harus sama dengan CSS yang di atas
<div class='wc-sp icon-namaicon'>
<b>judul:</b> keterangan di sini
</div>