Di kesempatan kali ini saya akan membagikan sebuah tutorial Cara Membuat Deskripsi Box Untuk Blogger agar mempercantik tampilan blog kalian.
Tutorial sengaja saya buat karena sudah banyak yang request di group blogger, kebanyakan dari yang request tutorial ini mereka yang suka jualan seperti toko online dan jasa yang dapat menjelaskan suatu produk dan jasa secara ringkas dan terperinci.
Deskripsi box ini di bangun menggunakan CSS dan HTML tanpa menggunakan JavaScript, jadi jika kalian ingin menggunakan deskripsi box ini tidak akan memberatkan loading blog kalian, dan cara penggunaannya sangat mudah. Oke untuk tutorialnya cara pemasangannya silahkan simak di bawah ini.
Untuk demonya kalian bisa lihat dengan klik tombol di bawah ini
Cara Membuat Deskripsi Box Untuk Blogger
- Silahkan kalian masuk ke Blogger kalian dan pilih Tema lalu Edit HTML
- Cari kode ]]></b:skin> gunakan Ctrl+F agar lebih cepat
- Salin kode di bawah ini dan letakan tepat di atas kode ]]></b:skin>
/* material design box */
.wendybox{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)}
.wendybox 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}
.wendybox.box-yellow h2{background:#e2c601}
.wendybox.box-blue h2{background:#2ad2c9}
.wendybox.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 */
.darkMode .wendybox{background-color:#2d2d30;color:#fefefe;}
.darkMode .wendybox table,.darkMode .wendybox table td,.darkMode .wendybox{border-color:rgba(255,255,255,.15);color:#fefefe}- Jika sudah silahkan klik simpan pada template anda.
Cara Penulisan di Postingan
Untuk penulisan silahkan anda masuk ke postingan anda dan masuk ke Tampilan HTML lalu letakan sesuai keinginan anda.
Untuk tampilannya silahkan pilih beberapa contoh di bawah ini.
DESCRIPTION
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque molestie venenatis nibh, eget egestas justo bibendum et. Aenean volutpat fermentum mi ut aliquet. Aliquam in sapien eu turpis volutpat vulputate. Pellentesque sodales ultricies dignissim.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque molestie venenatis nibh, eget egestas justo bibendum et. Aenean volutpat fermentum mi ut aliquet. Aliquam in sapien eu turpis volutpat vulputate. Pellentesque sodales ultricies dignissim.
Penulisan :
<div class="wendybox">
<h2>Judul</h2>
<!--text kalian di sini-->
</div>DESCRIPTION
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque molestie venenatis nibh, eget egestas justo bibendum et. Aenean volutpat fermentum mi ut aliquet. Aliquam in sapien eu turpis volutpat vulputate. Pellentesque sodales ultricies dignissim.Penulisan :
<div class="wendybox box-blue">
<h2>Judul</h2>
<!--text kalian di sini-->
</div>FEATURES
- Responsive Design
- Google Rich Results
- Fast Load and SEO Optimize
- Google Rich Results
- Mobile Friendly
- Documentation and Tutorial (Full)
Penulisan :
<div class="wendybox box-yellow">
<h2>Judul</h2>
<ul>
<li>text kalian</li>
<li>text kalian</li>
</ul>
</div>DETAIL
Penulisan :
<div class="wendybox">
<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>Source : https://www.wendycode.com/2021/02/material-design-box-deskripsi-untuk-mempercantik-tampilan-blog.html
Sekian untuk postingan Cara Membuat Deskripsi Box Untuk Blogger, jika ada pertanyaan seputar postingan di atas silahkan bertanya melalui kolom komentar atau melalui halaman contact us. Semoga bermanfaat.