Cara Membuat Kotak Catatan Keren di Blog - Inspector

Membuat Kotak Catatan Pada Postingan - Dalam menyampaikan sebuah informasi, terkadang kita perluh menyisipkan sebuah catatan atau keterangan pendukung untuk memberikan penjelesan dan catatan ataupun warning kepada pembaca untuk memahami sebuah artikel, terlebih apabila artikel tersebut mengarah ke Teoritis.

Nah, untuk membuat sebuah catatan dalam postingan blog bukanlah hal yang sulit, kita bisa memanfaatkan fitur blockquote bawaan blogger. Tetapi biasanya kurang mencolok dan perluh untuk memodifikasi secara manual, sehingga setiap kali menggunakannya kita harus menyisipkan script secara manual. Jadi, mari kita sederhanakan hanya dengan menggunakan fungsi section. 

Dalam penerapannya sangat mudah, kita hanya perluh menggunakan CSS saja. Tidak perluh khawatir, CSS ini berjalan dengan baik untuk semua template tanpa merusak template blog yang digunakan.

Cara Membuat Note Keren Pada Blogger

1. Masuk ke akun Blogger

2. Selanjutnya masuk ke menu Theme/Tema, lalu klik Edit HTML

3. Kemudian cari kode </head> dengan menggunakan Ctrl+F. Lalu copy paste kode CSS dibawah ini tepat diatasnya. 

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

.post-body section:before{
    position:absolute;
    content:&#39;Note&#39;;
    background:rgb(227, 45, 36);
    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:&#39;💬&#39;;
    right:10px;
    bottom:5px;
    font-style:normal;
    font-weight:normal;
    font-size:160%;color:rgba(255,255,255,.6);
}
</style>

Untuk mengganti icon pada kotak catatan, sobat bisa merubahnya dari kode ini content:'💬';Untuk mengganti tulisan 'note' silahkan dirubah melalui kode CSS content:'Note'; sesuai keinginan sobat. Setelah selesai silahkan di save.

Cara Menampilkan Kotak Catatan Pada Artikel

Caranya sangat simpel, kita hanya perluh memanggil CSS dengan menambahkan kode <section> dan </section> diantara kalimat catatan yang akan kita buat. Contohnya bisa kita lihat seperti ini:

<section> ini adalah kalimat catatan yang akan kita tempilkan pada artikel blog </section>

Maka hasilnya menjadi seperti ini:

ini adalah kalimat catatan yang akan kita tempilkan pada artikel blog

Sangat mudah bukan? kita tidak perluh repot-repot untuk memodifikasi blockquote bawaan blogger ataupun menambahkan script secara manual setiap kali kita ingin menambahkan catatan penting pada artikel blog.

Related Posts