Cara Buat Kotak Catatan Blog Keren

Beberapa hari yang lalu saya sempat berkunjung kebeberapa blog yang cukup menyita perhatian saya, salah satu blog yang saya kunjungi ialah Blog Dunia Blanter. Didalam blog ini saya menemukan sebuah tutorial yang bisa berguna bagi para blogger pemula seperti saya ini, tutorial yang saya maksud ialah tutorial Cara Buat Kotak Catatan Blog Keren. Tampilan dari kotak catatan ini terbilang keren dengan tampilan minimalis tapi tetap mengusung keunikan sendiri. Perhatikan tutorial dibawah ini dengan seksama jangan sampai ada yang terlewat.

Tutorial Cara Buat Kotak Catatan Blog Keren

1. Silahkan sobat buka Dashboard Blog sobat.
2. Buka Template/Tema lalu klik Edit HTML
3. Klik CTRL+F lalu silahkan sobat cari kode ]]></b:skin> atau </style> lalu letakkan kode CSS dibawah ini tepat diatasnya.
.info, .tips, .warning {
 line-height: 22px;
 min-height: 38px;
 padding-left: 10px;
 padding: 10px 12px 12px 68px;
 margin: 5px 0;
}
.info {
 background: #e0e5eb url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaAzQ5DobUavJkHqJsl-bn_drgQLiywF76_yGr0zh_AgD6wdvuiO41LsJrL7NKg-9oJrFQnzZihsS1dydfSVhodaw29pDr6bERXIopkrmM6WzJKe6dyk4n3b7ih_DliS-fRaDOTVGT7h4/s1600/info.png') no-repeat 12px 8px;
 color: #222
}
.tips {
 background: #7CADDE url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB7YKFGnA9zbC_UIsSf1VM46kktHi8_-s7YxizWp6dGDRCAzhCifaiylrXCbgdjXnci7AEX763hy4-YkcxFryDj6JCwnhMAObrixtE_X-kUyS44MMMQE5AS1dOiSsGczFjdkdHCKtkB6s/s1600/tips.png') no-repeat 12px 8px;
 color: #fff;
}
.warning {
 background: #db6161 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgomHyfszIXZDX54SdYB7-G8mLiNDfdBAnb-f0Q7HTY-2iFA9x0kX4vc0fHl61gGLZPuE_OyQ07qQ87JTb5QgelvguFAiJu-I178_xDS4JdQGryxxctlXtdRBHqyJXkfXYEdv_7Y_mkqn4/s1600/warning.png') no-repeat 12px 8px;
 color: #fff;
}
4. Setelah selesai silahkan klik Simpan.

Jika sobat ingin menggunakan kotak catatan keren pada blog, sobat bisa meletakkan salah satu dari 3 kode dibawah ini pada postingan atau halaman yang sobat inginkan.

1. Untuk Info

<div class='info'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.
</div>

2. Untuk Tips

<div class='tips'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.
</div>

3. Untuk Peringatan atau Warning

<div class='warning'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.
</div>

Berikut bentuk dari catatan keren berdasarkan tutorial diatas (Lihat pada Result). 

Nah itulah tutorial Cara Buat Kotak Catatan Blog Keren semoga tutorial ini bermanfaat. Jika sobat ingin bertanya atau ada saran silahkan tinggalkan dikolom komentar. Jangan lupa untuk share tutorial ini ke temam-teman yang lain. Jangan lupa berkunjung lagi jika dirasa perlu hehe, Terima kasih dan sampai jumpa diartikel selanjutnya.