Cara Mudah Membuat Kotak Catatan Berwarna didalam Postingan Blog

Kemain Kored Id sudah membahas tentang cara membuat blockquote berwarna pada postingan blog, nah sekrang ada cara lain untuk membuat kotak catatan untuk postingan blog. kotak catatan sama halnya fungsinya dengan blockquote, yaitu agar tulisan yang ada dalam tulisan bisa lebih jelas di baca. dan bisa juga sebagai kalimat penting dalam sebuah artikel. Kalimat yang di anggap penting didalam artikel biasanya kalimat tersebut harus sedikit di tonjolkon, supaya si pembaca dapat mengetahui kalau yang di beri kotak catatan kalimatnya berbeda dengan yang lain.

Berbeda dengan blockquote, blockquote sudah pasti disediakan atau sudah tersedia di semua template yang digunakan (bawaan). kalau kotak catatan harus menambahkan kode-kode css lagi. Namun cara menambahkan Kotak catatan kali ini terbilang sangat mudah. kita tinggal menambahkan kode css ke dalam  kode html template kita, lalu memanggilnya di dalam sebuah postingan. Selain mudah digunakan,untuk warna tampilannya pun bisa kalian sesuaikan sendiri, selain memudahkan si pembaca juga bisa untuk mempercantik tampilan blog kita. untuk lebih jelasnya langsung saja,

Baca Juga : 

• Cara Membuat Link Sumber Otomatis Ketika Artikel Blog di Copas Orang Lain
• Cara Mudah Membuat Effect Double Click To Select Dengan Tag Selection 'kbd'
• 5 Situs Terbaik Untuk Belajar SEO

Cara Membuat Kotak Catatan didalam Postingan Blog

1. Seperti biasa masuk ke blogger.com
2. Pilih Tema -> Edit HTML
3. Cari Kode </style> atau ]]></b:skin> ( Cari menggunakan ctrl+f)
4. Kemudian Tambahkan kode dibawah ini sebelum kode </style> atau ]]></b:skin>

/* CSS Kotak Catatan */
.note{position:relative;padding:1.2em 1.5em;margin:2em auto;color:#fff;background:#2ecc71;overflow:hidden}
.note.Dimgray{background:#696969}
.note.red{background:#e74c3c}
.note.Darkslateblue{background:#483D8B}
.note:before{content:"";position:absolute;top:0;right:0;border-width:0 16px 16px 0;border-style:solid;border-color:#fff #fff #27ae60 #27ae60;background:#27ae60;box-shadow:0 1px 1px rgba(0,0,0,0.3),-1px 1px 1px rgba(0,0,0,0.2);display:block;width:0}
.note.Dimgray:before{border-color:#fff #fff #696969 #696969;background:#696969}
.note.red:before{border-color:#fff #fff #e74c3c #e74c3c;background:#e74c3c}
.note.Darkslateblue:before{border-color:#fff #fff #483D8B #483D8B;background:#483D8B}

5. Selanjutnya, Simpan Tema

Cara Menggunakan Kotak Catatan Di Postingan Blog

Cara menggunakannya kita hanya perlu memanggil kode css yang telah kita sisipkan tadi ke dalam postingan kita.
Caranya sangat mudah,
1. Pilih Postingan -> Entri Baru
2. Pilih Tab HTML bukan compose
3. Sisipkan salah salah satu kode dibawah ini ke dalam postingan anda

1. Kotak Catatan Warna Darkslateblue

<div class='note Darkslateblue'>Ganti Dengan Catatanmu Disini</div>

2. Kotak Catatan Warna Merah

<div class='note red'>Ganti Dengan Catatanmu Disini</div>

3. Kotak Catatan Warna Hijau

<div class='note'>Ganti Dengan Catatanmu Disini</div>

4. Kotak Catatan Warna Dimgray

<div class='note Dimgray'>Ganti Dengan Catatanmu Disini</div>

Silahkan Ganti tulisan yang diberi warna merah sesuai kebutuhan atau keperluan dalam postingan anda

Baca Juga :

• 5 Youtuber Dengan Kenaikan Subscriber Tercepat Di Indonesia Tahun 2019
• Cara Mengambil Video dan Foto Dari Status WhatsApp (WA) Teman Tanpa Aplikasi
• 7 Tips Menjauhkan Anak Dari Hp/ Gadget. Nomor 4 Paling Ampuh 

Silahkan Pilih salah satu warna kotak catatan yang kalian suka. Lumayan kan untuk mempercantik tampilan artikel di blog kalian. Untuk melihat hasilnya kalian bisa klik di bawah ini.

Lihat

Itulah langkah-langkah membuat Kotak Catatan didalam Postingan Blog, Gimana sangat mudah bukan? silahkan kalian coba gunakan ke dalam blog kalian. Semoga bisa diterapkan didalam blog kalian. Semoga Bermanfaat.