Cara Mudah Membuat Kotak Catatan Berwarna didalam Postingan Blog - Kored ID

24 February 2019

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.

Membuat Kotak Catatan Berwarna - Kored ID

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 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 :
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.

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.