Cara Mudah Membuat Kotak Catatan Section Pada Postingan Blog

Tutorial.web.id – Cara Mudah Membuat Kotak Catatan Section Keren Pada Postingan Blog. Postingan kali ini membahas tentang bagaimana membuat kotak catatan atau note sederhana tapi keren dan juga simple seperti yang ada pada blog tutorial web id ini.

Tidak seperti postingan yang sudah banyak beredar tentang cara membuat kotak catatan ataupun keterangan dengan memodifikasi style blockquote bawaan blogger. Tapi tutorial kali ini adalah cara membuat kotak catatan/keterangan dengan menggunakan fungsi section.

Sebelum lanjut lebih jauh lagi, mungkin sobat juga berminat untuk mengunjungi tutorial yang lain pada link berikut:

Artikel Lainnya : Cara Mudah Memasang Facebook Fan Page Di Blog Tanpa IFrame

Lanjut cara membuat kotak catatan sebetulnya sangat mudah dan gak ribet, karena disini kita hanya menggunakan kode CSS saja. Tidak perlu khawatir template blog sobat menjadi rusak karena menempatkan kode ini, karena cara ini berjalan untuk semua tema blog.

Untuk membuat kotak catatan seperti pada blog tutorial ini, sobat hanya perlu mengikuti langkahnya seperti berikut ini.

Tutorial Cara Membuat Kotak Catatan Pada Postingan Blog

1. Pastikan sobat sudah login akun blogger
2. Selanjutnya langsung pilih menu Theme / Tema kemudian klik Edit HTML
3. Setelah masuk Edit HTML langsung cari kode </head>
Dan Copy Paste kode CSS dibawah ini tepat diatasnya

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

.post-body section:before{
    position:absolute;
    content:'Catatan';
    background:rgba(255,255,255,1);
    right:3px;
    left:3px;
    top:3px;
    padding:5px 20px;
    display:block;
    font-weight:700;
    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:rgba(255,255,255,.6);
}
</style>

Sobat juga bisa mengganti icon pada kotak catatannya, untuk merubah icon cari kode ini content:'🎯';
Sedangkan untuk mengganti tulisan Catatan Cari kode CSS ini content:'Catatan'; dang anti sesuai keinginan sobat.
Jika sudah semua tinggal save.

Menampilkan Kotak Catatan Pada Postingan

Sobat hanya perlu menambahkan kode <section> dan </section> diantara kata atau kalimat pada postingan saja. Contohnya seperti ini

<section>kata dalam box catatan blah...blah...blah</section>

Maka hasilnya akan menjadi seperti dibawah ini

kata dalam box catatan blah...blah...blah

Kalu sudah dibungkus dengan kode seperti diatas, maka tinggal di publikasikan saja postingannya.
Cukup mudah bukan.
Kalau ada yang kurang jelas silakan ditanyakan di kolom komentar ya.

Demikian cara mudah membuat kotak catatan/keterangan pada postingan blog. Semoga bermanfaat :)

Berlangganan update artikel terbaru via email:

Share this post