Membuat Info, Tips dan Warning di Blogger

Kali ini saya akan berbagi cara membuat info, tips dan warning agar para pengunjung mengetahui mana yang harus diubah dan mana yang tidak diubah.
Info, tips dan warning membuat Blog lebih stylish dan menarik.

Memasang Info, Tips dan Warning di Blog

1. Seperti biasa, login Blogger.
2. Template, Edit HTML.
3. Letakkan CSS berikut di atas code ]]></b:skin>.

.info, .tips, .warning {
 line-height: 22px;
 min-height: 38px;
 padding: 10px 12px 12px 68px;
 margin: 5px 0;
}
.info {
 background: #e0e5eb url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcdI2xIjmg7tI1mvJPo_G4mw_R9CuwYkAA_hlUEK0lRLDgcCxtO8_VP9REGVnB6oX3-wlvatYzAoRBxYCFtpZ_Hbv_GHRs7af9W1zo87WXpz5eeKsIBA5nQY7x0yZ6VA-0abg8zJLeT4U/s1600/info.png') no-repeat 12px 8px;
 color: #222
}
.tips {
 background: #7CADDE url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5CdFjryc-TU0bom0ztVqPCAiW-6gr_bioE6as0dexjgCvvVvjs0W-wQJ0O-_Qgs6snuVGeg4k1sHpskEYSN8nUYcztxxdl690BtlgiU0tEk8dWiSzMgp3J4PJFu3tpQFNjqDoBhuUQ60/s1600/tips.png') no-repeat 12px 8px;
 color: #fff;
}
.warning {
 background: #db6161 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU-mpP4yB199vQWgLIpOW7S3Tns3gAZQA6RIn-ujw2tkpGuwUnpJGIiX-GLxVay-8bxeXky7CPgpydKhQ29iuaySDJk4atWMNqmWEcZ4u2ocRbvNq_58WEet1lvz5GwP5DXqHS68ci5XA/s1600/warning.png') no-repeat 12px 8px;
 color: #fff;
}

4. Untuk menggunakannya, Anda bisa gunakan code berikut dan letakkan di HTML postingan.

<div class='info'>
Tulis Text di sini
</div>

<div class='tips'>
Tulis Text di sini
</div>

<div class='warning'>
Tulis Text di sini
</div>

5. Publish.

Share This :