Product Specification Table Widget

Hello all, on this occasion I will share a specification table widget such as jalantikus.com with html and css.

This widget is reguest by Imran shah via email sent to us, for those of you who want to regulate tutorials or widgets, please comment on one of my articles or forum pages and email, if it is good or interesting I will make it in the future. and keep in mind I do not accept regulations from you guys who copy my articles and share my source code without permission!

This widget is perfect for those of you who have online stores that sell electronics, or those of you who have blogs that discuss technology such as reviewing cellphones, laptops, etc.

for the demo you can see through the button below, ok for those of you who want to make it, let's see how below.

DEMO

please go to blogger > themes > edit html copy the css below and place it above the code ]]></b:skin> if it is done don't forget to click save.

/* specification table by Blogger Store change the color orange look for the code #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}

Writing Format for Posts

use html as below to create a specification table in the post, the rest please adjust yourself.

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

Added New Table Icon

if you want to add a new table icon then you have to add css as below, I hope you understand a little knowledge of css and svg icons to understand this.

The part I marked .icon-namaicon is the name of the class icon, it's free, it's up to you to name what is important later, it must be the same as in the html.

while I marked the second is the svg icon, please replace it with your svg code, to get the svg icon you can visit 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}

and the html writing format is as below, pay attention to what I marked the class name must be the same as the css above.

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

ok, so that's all the specification table widgets like jalantikus.com that I can share this time, hopefully it's useful and thank you for visiting.

Thanks for reading: Product Specification Table Widget, Sorry, my English is bad:)

Blogger store

Ezoic

Product Specification Table Widget