Hallo, Kali ini admin Mrchll Studio akan memberikan tutorial Cara membuat widget deskripsi untuk memperindah blog untuk kalian.
Widget deskripsi cukup berguna untuk blog / situs yang bertema perjualan online atau landing page, untuk demo-nya kalian bisa lihat di postingan ini.
Berikut ini adalah tutorial membuat widget deskripsi untuk memperindah blog/situs anda, simak dengan baik.
Cara Membuat Widget Deskripsi untuk Memperindah Blog
Step 1: silahkan pergi ke beranda blogger
Step 2: klik tema
Step 3: pilih edit html
Step 4: silahkan salin kode css dibawah ini, lalu taruh diatas kode </style> atau ]]></b:skin>.
/* material design box */
.mrchllbox{background-color:transparent;position:relative;margin:40px 2px;padding:40px 15px 15px;border:1px solid rgba(230,230,230,1);border-radius:15px;box-shadow:0 10px 20px 0 rgba(30,30,30,.07)}
.mrchllbox h2 {box-shadow:0 5px 10px rgba(30,30,30,.2);background-color:#02d07a;border-radius:5px;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}
.mrchllbox.box-yellow h2{background:#e2c601}
.mrchllbox.box-blue h2{background:#2ad2c9}
.mrchllbox.box-red h2{background:#f7176a}
.mrchllbox.box-gradient h2{background:linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab)}
/* 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 .mrchllbox{background-color:#2d2d30;color:#fefefe;}
.drK .mrchllbox table,.drK .mrchllbox table td,.drK .mrchllbox{border-color:rgba(255,255,255,.15);color:#fefefe}
Bagian yang saya beri tanda .drK silahkan ubah class nya dengan class dark mode kalian masing - masing.
Step 5: kalau sudah klik simpan, lalu cara menerapkan-nya simak caranya dibawah ini
Style 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisl tincidunt eget nullam non.
Quis hendrerit dolor magna eget est lorem ipsum dolor sit. Volutpat odio facilisis mauris sit amet massa. Commodo odio aenean sed adipiscing diam donec adipiscing tristique.
Penulisan Codenya :
<div class='mrchllbox'> <h2>Judul</h2> <!--[ text kalian disini ]--> </div>
Style 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisl tincidunt eget nullam non.
Quis hendrerit dolor magna eget est lorem ipsum dolor sit. Volutpat odio facilisis mauris sit amet massa. Commodo odio aenean sed adipiscing diam donec adipiscing tristique.
Penulisan Codenya :
<div class='mrchllbox box-yellow'> <h2>Judul</h2> <!--[ teks kalian disini ]--> </div>
Bagian yang saya beri tanda box-yellow bisa diubah ke warna lainnya, untuk list warna kalian bisa lihat dibawah ini.
Warna Lainnya:
Yellow: box-yellow
Blue: box-blue
Red: box-red
Gradient: box-gradient
Style 3
| Nama | Coding Pro |
| Lisensi | Personal |
| Versi | 1.0 |
| Harga | Rp.100.000 |
Penulisan Codenya :
<div class="mrchllbox box-gradient">
<h2>Style 3</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>
Sekian, tutorial Cara membuat widget deskripsi untuk memperindah blog ini, semoga bermanfaat untuk kalian.
Referensi:
https://www.wendycode.com/2021/02/material-design-box-deskripsi-untuk-mempercantik-tampilan-blog.html
2 komentar