Cara buat Kotak Catatan Section Pada Postingan Blog

Tutorial kali ini membahas tentang cara membuat kotak catatan/keterangan  atau biasa disebut note dengan tampilan sederhana yang menarik perhatian dan juga terlihat simple seperti pada blog ini. Pada panduan ini cara membuat kotak catatan/keterangan dengan menggunakan fungsi section.

Berikut, panduan singkat dari tutorial Kotak Catatan Section :
1. silahkan buka Blogger > Template > Edit HTML > Kemudian cari kode </head> .
2. Selanjutnya copykan kode CSS berikut ini tepat diatasnya⏫.

 <style type='text/css'>
/*Section Catatan*/
.post-body section{
    text-align:left;
    background: #DEB887;
    position:relative;
    display:block;
    padding:55px 20px 20px;
    color:#fff;
    margin:10px 0;
    border-radius:3px;
}

.post-body section:before{
    position:absolute;
    content:'Note';
    background: #E5E4E2;
    right:3px;
    left:3px;
    top:3px;
    padding:5px 20px;
    display:block;
    font-weight:750;
    border-radius:3px 3px 0 0;
    color:#6591c2;
}
.post-body section:after{
    position:absolute;
    content:'📌';
    right:10px;
    bottom:5px;
    font-style:normal;
    font-weight:normal;
    font-size:160%;color:  #5CB3FF;
}
</style> 

Anda juga bisa mengganti icon pada kotak catatan, untuk merubah icon cari kode ini content:'📌';
Sedangkan untuk mengganti tulisan Note Cari kode CSS ini content:'Note'; kemudian ganti tulisan sesuai harapan.
Untuk mengubah warna background atau text bisa menggunakan kode warna pada link HTML Color Code & Name
Apabila sudah selesai simpan Tema.

Menampilkan Kotak Catatan Pada Postingan Artikel

Anda hanya perlu menambahkan kode <section> dan </section> diantara kata atau kalimat pada tab HTML postingan. Contohnya seperti ini

 <section>Berilah Deskripsi kata yang menarik pada postingan ini</section> 

Setelah ditambahkan section pada kalimat tersebut Hasilnya menjadi seperti di bawah ini

Berilah Deskripsi kata yang menarik pada postingan ini