Cara Membuat Widget Table Spesifikasi Di Blog

Cara Membuat Widget Table Spesifikasi Di Blog - Tutorial terpilih kali ini mengenai cara membuat widget table spesifikasi di blog. Kami membuat postingan tentang cara membuat widget table spesifikasi di blog karena mungkin ada yang mencari informasi cara membuat widget table spesifikasi di blog dengan mudah di blog.

Tutorial cara membuat widget table spesifikasi di blog bisa kalian pasang di blog mengunakan beberapa kode sederhana di bawah ini. Kode yang di butuhkan untuk memasang widget table spesifikasi di blog hanya perlu copy paste dari postingan ini.

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.Tanpa basa basi berikut tutorial cara membuat widget table spesifikasi di blog.

Widget Table Spesifikasi Seperti Jalan Tikus

silakan masuk ke blogger > tema > edit html salin css di bawah ini dan letakkan di atas kode ]]></b:skin> jika sudah jangan lupa untuk klik simpan.

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

Terimakasih sudah membaca artikel kami tentang Cara Membuat Widget Table Spesifikasi Di Blog. Kami membuat postingan ini karena mungkin ada yang mencari informasi tentang Membuat Widget Tabel Harga Paket Hanya dengan CSS widget table spesifikasi Cara Membuat Tabel Spesifikasi Smartphone Di Blogger Cara Membuat Tabel Spesifikasi Responsive didalam Artikel Smoga bermanfaat..