Hallo Bloggers pada kesempatan ini saya akan membuat tutorial membuat Material Design Box di Blogger
Untuk demonya kalian bisa lihat di postingan ini
Cara Membuat Material Design Box Deskripsi
Masuk ke Blogger tema dan edit html salin css dibawah ini, letakkan di atas kode ]]></b:skin>
/* material design box */
.rulsbox{background:#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)}
.rulsbox h2 {background:#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}
.rulsbox.box-yellow h2{background:#e2c601}
.rulsbox.box-blue h2{background:#2ad2c9}
.rulsbox.box-red h2{background:#f7176a}
/* table detail */
.Blog table.tr-caption-container{min-width:inherit;width:auto;margin:0 auto;border:0;position:relative}
.Blog table.tr-caption-container tr td{background-color:transparent;border:0;padding:0}
.Blog table.tr-caption-container tr:nth-child(2n+1) td, .Blog table.tr-caption-container tr:nth-child(2n+1) td:first-child{border:0;background:transparent}
.Blog table.tr-caption-container .tr-caption{display:block;font-size:12px;font-style:italic;color:#767676;background-color:transparent;border:0}
.Blog table{width:100%;margin:20px 0px;border:1px solid rgba(230,230,230,1);border-radius:7px;overflow:hidden;font-size:14px}
.Blog table th{background-color:transparent;padding:15px 20px;border:1px solid #ddd;border-left:0;font-family:Noto Sans;font-size:13px}
.Blog table th:last-child, .Blog table tr td:last-child, .Blog table tr:nth-child(2n) td:last-child{border-right:0}
.Blog table td{padding:15px 20px;border:1px solid #ddd;border-left:0;border-top:0;vertical-align:middle}
.Blog table tr:nth-child(2n + 1) td{background-color:rgba(0,0,0,.025)}
.Blog .table{display:block;overflow-y:hidden;overflow-x:auto;border-radius:3px;scroll-behavior:smooth;}jika template kalian sudah ada css table silakan hapus dulu agar tidak bentrok atau kalian juga bisa tidak menyalin css yang /* table detail */ di atas jika ingin menggunakan style table kalian,bagi pengguna template median ui pada css di atas yang /* table detail */ jangan di salin karena css tersebut sudah ada di template median ui, agar tampilannya sesuai demo nanti tambahkan saja css di bawah ini.
<!--cari kode ini-->
.Blog table{min-width:70%;margin:0 auto;border:0;overflow:hidden;font-size:14px;}
<!--hapus kode diatas dan ganti kode ini-->
.Blog table{width:100%;margin:20px 0px;border:1px solid rgba(230,230,230,1);border-radius:7px;overflow:hidden;font-size:14px}
.dark-mode .rulsbox{background:#2d2d30;border:unset;}
Lalu simpan, untuk menerapkan di postingan simak tutorial dibawah ini
Judul
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget magna ut velit placerat dapibus eget vitae sem. Sed tristique hendrerit imperdiet. Fusce leo lorem, aliquet nec tristique id, viverra non justo. Sed tortor risus, faucibus sit amet ipsum eu, gravida bibendum libero. Cras tincidunt accumsan metus id ullamcorper. Maecenas vitae fringilla lectus. Curabitur erat mauris, finibus vel augue blandit, placerat posuere sapien. Phasellus euismod mattis est non mattis. Phasellus pulvinar nisi ac nunc ullamcorper, id porttitor arcu condimentum. In sagittis leo ac dictum varius. Morbi lorem turpis, pellentesque ac arcu vitae, ultricies vehicula quam. Nunc sed enim eget eros volutpat convallis a nec dui.Format penulisan:
<div class="rulsbox"> <h2>Judul</h2> Text Kalian Disini </div>
Judul
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget magna ut velit placerat dapibus eget vitae sem. Sed tristique hendrerit imperdiet. Fusce leo lorem, aliquet nec tristique id, viverra non justo. Sed tortor risus, faucibus sit amet ipsum eu, gravida bibendum libero. Cras tincidunt accumsan metus id ullamcorper. Maecenas vitae fringilla lectus. Curabitur erat mauris, finibus vel augue blandit, placerat posuere sapien. Phasellus euismod mattis est non mattis. Phasellus pulvinar nisi ac nunc ullamcorper, id porttitor arcu condimentum. In sagittis leo ac dictum varius. Morbi lorem turpis, pellentesque ac arcu vitae, ultricies vehicula quam. Nunc sed enim eget eros volutpat convallis a nec dui.Format penulisan:
<div class="rulsbox box-blue"> <h2>Judul</h2> Text Kalian Disini </div>
Detail
- New Desain
- Fix Bugs
Format penulisan:
<div class="rulsbox box-yellow"> <h2>Judul</h2> <ul> <li>text kalian</li> <li>text kalian</li> </ul> </div>
Judul
| Nama | Coding Pro |
| Lisensi | Personal |
| Versi | 1.0 |
| Harga | Rp.100.000 |
Format penulisan:
<div class="rulsbox"> <h2>Judul</h2> <table cellpadding="0" cellspacing="0" style="text-align: left;"> <tbody> <tr><td><b>Nama</b></td> <td>Coding Pro</td></tr> <tr><td><b>Lisensi</b></td> <td>Personal</td></tr> <tr><td><b>Versi</b></td> <td>1.0</td></tr> <tr><td><b>Harga</b></td> <td>Rp.100.000</td></tr> </tbody> </table> </div>
Ok Itulah Tutorial Cara Membuat Material Design Box Deskripsi, Jika Ada Pertanyaan Silahkan Tinggalkan Komentar Di Bawah
Source : https://blog.choipanwendy.com