Cara Membuat Kotak Catatan Minimalis Berwarna di Blog

Saat membaca artikel di blog pasti kamu pernah melihat penulis dari artikel tersebut menambahkan catatan didalam kotak sehingga lebih enak dipandang.

Penambahan catatan atau note pada sebuah artikel terkadang diperlukan agar pembaca dapat lebih memahami isi atau maksud dari artikel blog tersebut.

Artikel-artikel pada blog ini juga sering berisi catatan-catatan seperti itu.

Karena itulah untuk kamu bisa mencoba cara dibawah ini jika ingin menambahkan catatan di blog kamu.

Adapun kotak catatan atau note atau biasa disebut juga blockquote yang akan Carimul.com bagikan ini memiliki desain yang flat dan minimalis sehingga cocok dengan zaman sekarang.

Selain itu juga terdapat beberapa pilihan warna yang bisa kamu pilih sesuai selera kamu. langsung saja simak cara membuat kotak catatan pada blog dibawah ini.

Cara Membuat Kotak Catatan Minimalis Berwarna di Blog

Untuk membuat kotak note ini pun tidaklah sulit, kamu hanya perlu menambahkan kode css dan kemudian menggunakan kode html untuk memanggil kode css tersebut ke postingan blog.

Adapun langkah-langkahnya..

1. Bukalah Dashboard Blogger kamu
2. Bukalah Edit Html pada menu Tema
3. Copy dan Pastekan kode dibawah ini sebelum kode ]]></b:skin> atau </style>

*Agar labih mudah carilah kode ]]></b:skin> atau </style> terlebih dahulu menggunakan Ctrl+f
 

/* CSS Note */
.note{position:relative;padding:1.2em 1.5em;margin:2em auto;color:#fff;background:#2ecc71;overflow:hidden}
.note.yellow{background:#f1c40f}
.note.red{background:#e74c3c}
.note.blue{background:#3498db}
.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.yellow:before{border-color:#fff #fff #f1c40f #f1c40f;background:#f1c40f}
.note.red:before{border-color:#fff #fff #e74c3c #e74c3c;background:#e74c3c}
.note.blue:before{border-color:#fff #fff #3498db #3498db;background:#3498db}

4. Simpan Tema

Sampai pada tahap ini kamu sudah berhasil menambahkan kode css.

Kode css diatas sendiri memiliki 4 warna kotak catatan yang bisa kamu pilih

Untuk demo atau contoh dari masing-masing kotak catatan kurang lebih sama seperti yang tertera pada gambar diatas, ataupun kamu dapat kamu lihat secara langsung disini.

Untuk menggunakan kotak catatan ini pada postingan blog kamu cukup pastekan saja kode dibawah ini pada bagian HTML bukan Compose.

Warna Hijau

<div class='note'>...ISI DENGAN CATATAN...</div>

Warna Kuning

<div class='note yellow'>...ISI DENGAN CATATAN...</div>

Warna Merah

<div class='note red'>...ISI DENGAN CATATAN...</div>

Warna Biru

<div class='note blue'>...ISI DENGAN CATATAN...</div>

Itulah tadi cara membuat kota catatan berwarna yang bisa mempercantik tulisan di blog kamu.

Adapun jika kamu malas mengedit html blog, kamu bisa coba membuat kotak seperti yang digunakan pada blog Carimul.com dibawah ini

Pastekan Code Script Di Sini

Untuk membuat kotak diatas hanya perlu paste kan kode di postingan blog, untuk lengkapnya dapat kamu baca disini.

Akhir kata selamat mencoba, semoga berhasil dan semoga artikel ini dapat berguna dan bermanfaat untuk kita semua

Share this post