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
| Nama | Template Keren Banget |
| Lisensi | Personal |
| Versi | 6.9 |
| Harga | Rp.69.000 |
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 </style>
/* 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
| Nama | Template Keren Banget |
| Lisensi | Personal |
| Versi | 6.9 |
| Harga | Rp.69.000 |
Cara penulisan:
<div class="nkbox">
<h2>Detail Barang</h2>
<table cellpadding="0" cellspacing="0" style="text-align: left;">
<tbody>
<tr>
<td><b>Nama</b></td>
<td>Template Keren Banget</td>
</tr>
<tr>
<td><b>Lisensi</b></td>
<td>Personal</td>
</tr>
<tr>
<td><b>Versi</b></td>
<td>6.9</td>
</tr>
<tr>
<td><b>Harga</b></td>
<td>Rp.69.000</td>
</tr>
</tbody>
</table>
</div>
