Elegant Designed Box Deskripsi untuk Mempercantik Tampilan Blog

Hallo semua, pada kesempatan ini saya mau berbagi cara membuat box description dengan tampilan yang elegant, sangat cocok untuk web jual beli atau juga web download.

Berikut ini adalah tampilan box description yang akan kita buat.

Features:

#

• SEO Friendly
• Dark Mode ready
• Mobile Friendly
• Documentation

Description

#

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti qui culpa impedit eum eos exercitationem consequatur accusantium maiores earum laboriosam?

Detail Barang

#

Cara Membuat Elegant Designed Box Deskripsi

#

Seperti bisa, silahkan buka dashboard blogger > tema > edit html salin kode dibawah ini di atas kode ]]>]]></b:skin> atau di atas

/* material design box */ .nkbox{background-color:#fff;position:relative;margin:40px 2px;padding:40px 15px 15px;border:1px solid rgba(230,230,230,1);border-radius:5px;box-shadow:0 10px 20px 0 rgba(30,30,30,.07)} .nkbox h2 {background-color:#02d07a;border-radius:3px;padding:8px 20px!important;position:absolute;margin:0!important;font-size:17px!important;color:#fff;top:-20px;font-weight:bold;left:30px;text-transform:uppercase} .nkbox.box-yellow h2{background:#e2c601} .nkbox.box-blue h2{background:#2ad2c9} .nkbox.box-red h2{background:#f7176a}

        /\* table detail \*/
        table.tr-caption-container{min-width:inherit;width:auto;margin:0 auto;border:0;position:relative}
        table.tr-caption-container tr td{background-color:transparent;border:0;padding:0}
        table.tr-caption-container tr:nth-child(2n+1) td, table.tr-caption-container tr:nth-child(2n+1) td:first-child{border:0;background-color:transparent}
        table.tr-caption-container .tr-caption{display:block;font-size:12px;font-style:italic;color:#767676;background-color:transparent;border:0}
        table{width:100%;margin:20px 0px;border:1px solid rgba(230,230,230,1);border-radius:7px;overflow:hidden;font-size:14px}
        table th{background-color:transparent;padding:15px 20px;border:1px solid #ddd;border-left:0;font-family:Noto Sans;font-size:13px}
        table th:last-child, table tr td:last-child, table tr:nth-child(2n) td:last-child{border-right:0}
        table td{padding:15px 20px;border:1px solid #ddd;border-left:0;border-top:0;vertical-align:middle}
        table tr:nth-child(2n + 1) td{background-color:rgba(0,0,0,.025)}
        .table{display:block;overflow-y:hidden;overflow-x:auto;border-radius:3px;scroll-behavior:smooth;}
        
        /\* css darkmode sesuaikan classnya jika berbeda atau hapus bagian ini \*/
        .drK .nkbox{background-color:#2d2d30;color:#fefefe;}
        .drK .nkbox table,.drK .nkbox table td,.drK .nkbox{border-color:rgba(255,255,255,.15);color:#fefefe}

Jika sudah tinggal klik simpan.

Cara Penulisan Elegant Designed Box

#

Description

#

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti qui culpa impedit eum eos exercitationem consequatur accusantium maiores earum laboriosam?

Cara penulisan:

<div class="nkbox">
        <h2>Judul</h2>
        <!--text kalian di sini-->
        </div>

Features:

#

• SEO Friendly
• Dark Mode ready
• Mobile Friendly
• Documentation

Cara penulisan:

<div class="nkbox box-yellow">
        <h2>Judul</h2>
        <ul>
        <li>text kalian</li>
        <li>text kalian</li>
        </ul>
        </div>

Detail Barang

#

Cara penulisan:

---


Sekian teman, semoga bermanfaat.