Custom Material Design Box

Material Design Box adalah sebuah konsep desain yang dikembangkan oleh Google pada tahun 2014 dan kemudian diadopsi di banyak aplikasi Google. Material Design mempunyai elemen yang memiliki kotak garis, blok warna, efek bayangan dan hover yang realistis, yang mengingatkan kita pada kertas dan tinta .

Custom Material Design Box : Heading, Description

Tujuan dibuat nya Material Design Box diantaranya adalah supaya Blog dengan artikel panjang dengan adanya penambahan kotak garis, blok warna dan efek bayangan akan membuat para pembaca Blog tidak bosan membaca artikel dari atas ke bawah tanpa catatan atau ringkasan paragraf, dan membuat para pembaca blog merasa tertarik, sehingga terikat dengan artikel blog kita.

Material Design Box disingkat dengan MDB mengutamakan konsistensi dan responsifitas dalam desain untuk memberikan tampilan yang terbaik di semua perangkat.

Table of Contents

A. Widget Heading Material Design Box

Cara membuat dan menambahkan Heading Material Design di halaman postingan Blogger, ikuti langkah-langkahnya sebagai berikut.

Kode Script CSS Heading MDB

Pertama-tama Login ke Dashboard Blogger Anda.
Pilih Tema.
Klik icon panah ke bawah di sebelah tombol 'Sesuaikan'
Klik Edit HTML, Anda akan diarahkan ke halaman pengeditan.
Cari kode ]]></b:skin> kemudian salin script CSS dibawah ini, kemudian tempelkan di atas kode ]]></b:skin>
Terakhir - Simpan.

  
.saebox{margin-top:17px;padding:15px;border-radius:10px;box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;background-color: #ffffff; opacity: 1; background-image: radial-gradient(#e7e7e7 2px, #ffffff 2px); background-size: 40px 40px; } .box-info{padding:2px;border:1px solid #f0f0f0;margin-top:12px;border-radius:5px;background-color:#FFFFFFBF; } .saebox h3{background:#f7176a;border-radius:5px;padding:8px 20px!important;margin:0!important;font-size:17px!important;color:#fff;top:-20px;font-weight:bold;left:30px;text-transform:uppercase;text-align: center;}
/*color by Gradient Hunt */.saebox.yellow h3{background-image: radial-gradient( circle 957px at 8.7% 50.5%, rgba(246,191,13,1) 0%, rgba(249,47,47,1) 90% );} .saebox.red h3{background-image: radial-gradient( circle 905.6px at 4.9% 7.9%, rgba(218,0,0,1) 14.1%, rgba(168,2,144,1) 65%, rgba(102,2,110,1) 90% );} .saebox.blue h3{background-image: radial-gradient( circle farthest-corner at 10% 20%, rgba(37,145,251,0.98) 0.1%, rgba(0,7,128,1) 99.8% );} .saebox.black h3{background-image: radial-gradient( circle farthest-corner at 10% 20%, rgba(90,92,106,1) 0%, rgba(32,45,58,1) 81.3% );} .saebox.pink h3{background-image: radial-gradient( circle 602px at 2.1% 5.1%, rgba(233,0,120,1) 0%, rgba(0,0,0,1) 90.1% );}
/* darkmode color */
.drK .saebox{box-shadow: rgba(50, 50, 93, 225.25) 0px 2px 5px -1px, rgba(225, 225, 225.3) 0px 1px 3px -1px;background-color:#292929;background-image: radial-gradient(#363434 2px, #141313 2px); background-size: 40px 40px; }.drK .box-info{background-color: #363535B5;}

Kode Script HTML Heading MDB

Terakhir, pilih dan salin kode script HTML di bawah ini, dan letakkan sesuai dengan yang anda inginkan.

<!--[ change the color code as you need. red, yellow, pink, blue, black ]-->
<div class="saebox red">
<!---[ heading h3 ]-->  
<h3>Your Heading Here</h3>
<!---[ paragrap p ]-->
<div class="box-info">  
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>

Kustomisasi Heading MDB

- Untuk merubah warna style heading : ganti seabox red .... yellow / pink / blue / black

Demo Heading MDB

Tampilan Heading Material Design Box

Your Heading Here Red

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Your Heading Here Yellow

B. Widget Material Design Box Deskripsi

Material Design Box Deskripsi adalah box deskripsi yang terdiri dari teks, garis kotak dan blok warna. Dengan ditambahkan box deskripsi pada blog, maka artikel akan terkesan terlihat lebih rapi, mudah dibaca, ringkas, menarik , lebih kreatif dan dekoratif. MDB Deskripsi cocok digunakan pada situs web blog penjualan barang, penjualan jasa, ataupun landing page, dll.

Nama Judul Kuning

teks paragraf di sini

Nama Judul Merah

Nama	Template Modie-UI
Lisensi	Personal
Versi	2.0
Harga	Rp.125.000

Kode Script Deskripsi MDB

Kode script HTML dan CSS Material Design Box Deskripsi , sebagai berikut.

MDB Deskripsi

Demikian kami sajikan mengenai Kumpulan Widget Custom Material Design Box Blogger , semoga bermanfaat.

Source:
W3schools dan Bloggers

Go to Link

Sae Bloggers

Kumpulan Widget Custom Material Design Box Blogger