Apa Itu Material Design Box

Material Design Box adalah sebuah konsep desain yang dikembangkan yang menggunakan prinsip-prinsip desain dasar yang terinspirasi dari kertas dan ink. Konsep ini menekankan pada penggunaan warna, tipografi, dan ruang yang terstruktur dengan baik serta memberikan aksen dan interaksi pengguna. Material Design Box juga mengutamakan konsistensi dan responsifitas dalam desain untuk memberikan pengalaman pengguna yang terbaik di semua perangkat.

Keunggulan Menggunakan Material Design Box Deskripsi

Deskripsi terlihat lebih rapi, ringkas dan lebih menarik
Dapat digunakan untuk menunjukan detail produk untuk situs penjualan
Terlihat lebih kreatif dan dekoratif
Text deskripsi mudah ter-notice pembaca
Sangat cocok digunakan pada situs penjualan, penjualan jasa, ataupun landing page
dll

Demo Material Design Box Deskripsi

Mungkin kamu pernah melihat Material Design Box dan penasaran untuk membuat untuk di terapkan pada situs kamu. Nah, berikut demo Material Box Deskripsi yang bisa  terapkan dengan menggunakan CSS, HTML yang terlah disediakan.

Bagaimana Cara Membuat Material Design Box Deskripsi


Langkah Penerapan

  1. Buka halaman dasbor Blogger
  2. Tap pada bar tema dan edit HTML
  3. Kemudian cari ]]</b:skin>
  4. Salin CSS di bawah ini kemudian tempel tepat di atas kode ]]</b:skin>
  5. Jika sudah, jangan lupa untuk menyimpan
Format Penulisan CSS: 
  /* material design box */
.ngebaitbox{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)}
.ngebaitbox 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}
.ngebaitbox.box-yellow h2{background:#e2c601}
.ngebaitbox.box-blue h2{background:#2ad2c9}
.ngebaitbox.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 .ngebaitbox{background-color:#2d2d30;color:#fefefe;}
.drK .ngebaitbox table,.drK .ngebaitbox table td,.drK .ngebaitbox{border-color:rgba(255,255,255,.15);color:#fefefe}
/* material design box */
.ngebaitbox{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)}
.ngebaitbox 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}
.ngebaitbox.box-yellow h2{background:#fab005}
.ngebaitbox.box-blue h2{background:#2ad2c9}
.ngebaitbox.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 .ngebaitbox{background-color:#2d2d30;color:#fefefe;}
.drK .ngebaitbox table,.drK .ngebaitbox table td,.drK .ngebaitbox{border-color:rgba(255,255,255,.15);color:#fefefe}

Penerapan Material Design Box Deskripsi Pada Postingan


Description

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Felis eget nunc lobortis mattis. Mi bibendum neque egestas congue quisque egestas diam in. Egestas egestas fringilla phasellus faucibus scelerisque. Dignissim enim sit amet venenatis urna. Nibh cras pulvinar mattis nunc sed blandit libero volutpat. Nec feugiat nisl pretium fusce id. Placerat orci nulla pellentesque dignissim enim. Aliquam nulla facilisi cras fermentum odio eu feugiat pretium. Cras semper auctor neque vitae tempus. Eget gravida cum sociis natoque penatibus. Amet mauris commodo quis imperdiet massa tincidunt nunc pulvinar.
Format Penulisan: 
  <div class="ngebaitbox">
<h2>Judul Deskripsi</h2>
<!-- Isi teks deskripsimu disini -->
</div>

Description

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Purus semper eget duis at tellus. Ac turpis egestas sed tempus. Id neque aliquam vestibulum morbi blandit cursus risus at. Eget mi proin sed libero enim sed. Odio aenean sed adipiscing diam donec adipiscing tristique risus nec. Tincidunt dui ut ornare lectus sit. Ut tortor pretium viverra suspendisse potenti nullam ac tortor vitae. Cursus sit amet dictum sit amet. Ipsum suspendisse ultrices gravida dictum fusce ut placerat orci. Cum sociis natoque penatibus et magnis dis parturient montes nascetur. Urna molestie at elementum eu facilisis sed. Et netus et malesuada fames ac turpis. Arcu bibendum at varius vel pharetra vel turpis nunc eget.
Format Penulisan: 
  <div class="ngebaitbox box-blue">
<h2>Judul</h2>
<!-- Isi teks deskripsimu disini -->
</div>

Features

  • Responsif Design
  • FastLoad and SEO Optimize
  • Mobile Friendly
  • Fix Bug
  • New Design
  • Additional Documentation
Format Penulisan: 
  <div class="ngebaitbox box-yellow">
<h2>Judul</h2>
<ul>
<li>Teks Deskripsi Kamu</li>
<li>Teks Deskripsi Kamu</li>
</ul>
</div>

Details

Nama montain_view.webp
Format .webp
Size 15000kb
Resolution 1080x1080
Format Penulisan: 
  <div class="ngebaitbox">
<h2>Details</h2>
<table cellpadding="0" cellspacing="0" style="text-align: left;">
<tbody>
<tr><td><b>Nama</b></td> <td>montain_view.webp</td></tr>
<tr><td><b>Format</b></td> <td>.webp</td></tr>
<tr><td><b>Size</b></td> <td>15000kb</td></tr>
<tr><td><b>Resolution</b></td> <td>1080x1080</td></tr>
</tbody>
</table>
</div>