Cara Mudah Membuat Material Design Box Deskripsi Di Blogger

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.

Demo

---

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:40px2px;padding:40px15px15px;border:1px solid rgba(230,230,230,1);border-radius:5px;box-shadow:010px20px0rgba(30,30,30,.07)} .ngebaitboxh2 {background-color:#02d07a;border-radius:3px;padding:8px20px!important;position:absolute;margin:0!important;font-size:17px!important;color:#fff;top:-20px;font-weight:bold;left:30px;text-transform:uppercase} .ngebaitbox.box-yellowh2{background:#e2c601} .ngebaitbox.box-blueh2{background:#2ad2c9} .ngebaitbox.box-redh2{background:#f7176a} /* table detail */
	table.tr-caption-container{min-width:inherit;width:auto;margin:0 auto;border:0;position:relative} table.tr-caption-containertrtd{background-color:transparent;border:0;padding:0} table.tr-caption-containertr:nth-child(2n+1)td, table.tr-caption-containertr: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:20px0px;border:1px solid rgba(230,230,230,1);border-radius:7px;overflow:hidden;font-size:14px} tableth{background-color:transparent;padding:15px20px;border:1px solid #ddd;border-left:0;font-family:Noto Sans;font-size:13px} tableth:last-child, tabletrtd:last-child, tabletr:nth-child(2n)td:last-child{border-right:0} tabletd{padding:15px20px;border:1px solid #ddd;border-left:0;border-top:0;vertical-align:middle} tabletr: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.ngebaitboxtable,.drK.ngebaitboxtabletd,.drK.ngebaitbox{border-color:rgba(255,255,255,.15);color:#fefefe} /* material design box */
	.ngebaitbox{background-color:#fff;position:relative;margin:40px2px;padding:40px15px15px;border:1px solid rgba(230,230,230,1);border-radius:5px;box-shadow:010px20px0rgba(30,30,30,.07)} .ngebaitboxh2 {background-color:#02d07a;border-radius:3px;padding:8px20px!important;position:absolute;margin:0!important;font-size:17px!important;color:#fff;top:-20px;font-weight:bold;left:30px;text-transform:uppercase} .ngebaitbox.box-yellowh2{background:#fab005} .ngebaitbox.box-blueh2{background:#2ad2c9} .ngebaitbox.box-redh2{background:#f7176a} /* table detail */
	table.tr-caption-container{min-width:inherit;width:auto;margin:0 auto;border:0;position:relative} table.tr-caption-containertrtd{background-color:transparent;border:0;padding:0} table.tr-caption-containertr:nth-child(2n+1)td, table.tr-caption-containertr: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:20px0px;border:1px solid rgba(230,230,230,1);border-radius:7px;overflow:hidden;font-size:14px} tableth{background-color:transparent;padding:15px20px;border:1px solid #ddd;border-left:0;font-family:Noto Sans;font-size:13px} tableth:last-child, tabletrtd:last-child, tabletr:nth-child(2n)td:last-child{border-right:0} tabletd{padding:15px20px;border:1px solid #ddd;border-left:0;border-top:0;vertical-align:middle} tabletr: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.ngebaitboxtable,.drK.ngebaitboxtabletd,.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:

Judul Deskripsi

---

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:

	<divclass="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:

	<divclass="ngebaitbox">
	<h2>Details</h2>
	<tablecellpadding="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>