Cara Membuat Kotak Catatan Keren Banget di Blog

Cara Membuat Kotak Catatan Keren Banget di Blog — Kotak catatan dibutuhkan ketika kamu mau menandai apa yang kamu tulis di blog dengan keterangan tertentu. Misalnya, "Ingat ya, ditulisnya di halaman edit html, bukan di compose!".

Nah, kalau kamu pernah menulis yang seperti itu, tutorial kali ini memang cocok untuk kamu.

Saya modifikasi kodenya sedikit dari dua sumber ini:
◾http://tewswsw.blogspot.com/2016/07/cara-membuat-kotak-catatan-tisp-dan.html
◾http://gunzyber.blogspot.com/2013/01/membuat-box-kotak-pesan-keren-di-blog.html#.Xny6pEAzbIU

Yang paling utama perbedaannya adalah saya mengubahnya menjadi inline CSS.

Salah satu keuntungan inline CSS adalah membuat loading blog menjadi lebih cepat karena CSS tidak masuk ke dalam struktur template.

Namun, inline CSS ada kekurangannya juga, yaitu harus copas ulang kode dibawah ini setiap kali mau menggunakannya dalam suatu postingan.

Hasilnya nanti akan seperti ini:

Langsung saja demo jadinya dan kodenya.

Tulis catatan di sini

<div style="background: #e0e5eb url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTsbAnIu-b6hyc9yWRXZ9oc0T2YU_oEvm3q2kJMK1fs9r4evaWhP5-9FjiN8Qz63BuyrSf4kCmTO8aw5Zbbwxfm0kFmkD6eZk3R2TowBkvAdd7F8SiLymVOPuZ9GICWFsGQt00J7wXTAg/s1600/info.png&quot;) no-repeat 12px 1px; color: #222222; line-height: 22px; margin: 5px 0; min-height: 38px; padding: 10px 12px 12px 68px;"> 
Tulis catatan di sini</div>

Tulis tips di sini

<div style="background: #7cadde url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOGjgB_MWCBH5wptxaN9l1hlT25JFQkdqpqBo1p3pLxCi6mAfhpUK3ceUf8AgwCJv-BwQyTYcOAF7l0fbnAtXh2_DEPfWZmAup98JX3_DOUNwfVhNHnUDeWXfK4bso4ZtQ4DENjKhEU9w/s1600/tips.png&quot;) no-repeat 12px 1px; color: white; line-height: 22px; margin: 5px 0; min-height: 38px; padding: 10px 12px 12px 68px;"> 
Tulis tips di sini</div>

Tulis peringatan di sini

<div style="background: #db6161 url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuCBErwfR-qzlPVjwfJfo4GzXtK4RzIjKI97KUXt-DcbhDC579FCQBVMo4aWcb37n4xqrWFfXVg0w2maVlewetT1CPrCUhtM572v4NX26z__HHdiO3BHkVvm80moaTfbs8KHDVj2zM5kw/s1600/warning.png&quot;) no-repeat 12px 1px; color: white; line-height: 22px; margin: 5px 0; min-height: 38px; padding: 10px 12px 12px 68px;"> 
Tulis peringatan di sini</div>

text message here

<div style="-moz-border-radius: 15px; -moz-box-shadow: 0 0 5px #888; -webkit-border-radius: 15px; -webkit-box-shadow: 0 0 5px #888; background: #bde5f8 url(&quot;https://sites.google.com/site/problogiz/my-icon/info.png&quot;) no-repeat 10px center; border-radius: 5px; border: 1px solid; box-shadow: 0 0 5px #888; color: #00529b; font: bold 12px &quot;verdana&quot;; margin: 15px 0px; padding: 15px 20px 15px 55px; text-shadow: 2px 2px 2px #ccc; width: 100%;"> 
text message here</div>

text message here

<div style="-moz-border-radius: 15px; -moz-box-shadow: 0 0 5px #888; -webkit-border-radius: 15px; -webkit-box-shadow: 0 0 5px #888; background: #dff2bf url(&quot;https://sites.google.com/site/problogiz/my-icon/ok.png&quot;) no-repeat 10px center; border-radius: 5px; border: 1px solid; box-shadow: 0 0 5px #888; color: #4f8a10; font: bold 12px &quot;verdana&quot;; margin: 15px 0px; padding: 15px 20px 15px 55px; text-shadow: 2px 2px 2px #ccc; width: 100%;"> 
text message here</div>

text message here

<div style="-moz-border-radius: 15px; -moz-box-shadow: 0 0 5px #888; -webkit-border-radius: 15px; -webkit-box-shadow: 0 0 5px #888; background: #feefb3 url(&quot;https://sites.google.com/site/problogiz/my-icon/warning.png&quot;) no-repeat 10px center; border-radius: 5px; border: 1px solid; box-shadow: 0 0 5px #888; color: #9f6000; font: bold 12px &quot;verdana&quot;; margin: 15px 0px; padding: 15px 20px 15px 55px; text-shadow: 2px 2px 2px #ccc; width: 100%;"> 
text message here</div>

text message here

<div style="-moz-border-radius: 15px; -moz-box-shadow: 0 0 5px #888; -webkit-border-radius: 15px; -webkit-box-shadow: 0 0 5px #888; background: #ffbaba url(&quot;https://sites.google.com/site/problogiz/my-icon/dialog_error_3.png&quot;) no-repeat 10px center; border-radius: 5px; border: 1px solid; box-shadow: 0 0 5px #888; color: #d8000c; font: bold 12px &quot;verdana&quot;; margin: 15px 0px; padding: 15px 20px 15px 55px; text-shadow: 2px 2px 2px #ccc; width: 100%;"> 
text message here</div>

Cara membuatnya cukup mudah, tinggal dicopas kodenya dan ditaruh di halaman postingan tulisan kamu. Jadi deh!

Terimakasih ya sudah mau membaca dan siapa tahu ada yang mau mencobanya dalam tulisan di blog kamu sendiri.