Cara Membuat Blok Info, Tips, Larangan / Warning

Bagikan :

Tweet

Hai Sobat, kali ini saya akan share " Cara Membuat Blok Info, Tips, Larangan / Warning ". Cara ini cocok untuk membuat peringatan / tips & info jika ada kesalahan / anda memberikan tambahan di artikel.
Mau tau caranya... Lanjutkan Ke Tutorial...

Cara Membuat Blok Info, Tips, Larangan / Warning

1. Masuk Ke Beranda Blogger > Template > Edit HTML
2. Cari Kode ]]></b:skin> Atau </style> Untuk Memudahkan Pencarian Anda Dapat Tekan CTRL + F
3. Masukkan Kode Di Bawah Ini Di Atas Kode ]]></b:skin> Atau </style>

.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/AVvXsEiHrTiaCx5fqq_04cqQCiNUTOaX8PyUbdl7Zeu1BtpUGT7FsFEi4HQ35bPDS1qTB1aFiY26flcpnT8OxXIrLGkKGFRfmWriIxf3qauo95IvmMhJhWRX5ae5X__TIt_XgXL7w53KADJsZD8/s1600/info.png') no-repeat 12px 8px;
 color: #222
}
.tips {
 background: #7CADDE url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrzAemvrZm5IlbgqKU24sO7Q3gDc_eqEyYurzlhXwg__-FqivbueSGnv4JXh7xPiX4u0xy_r7T532kRdzBRs3f6mBBd03o3z1xg21LARwjf_t315P4sNpCZ8_uZglPbPrSWbMxOiJxVMk/s1600/tips.png') no-repeat 12px 8px;
 color: #fff;
}
.warning {
 background: #db6161 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgQ4BLbuC97jYdEeYrQn25KizsQI6hHqI6tc0oaeEqOahq3MCcKm2PWFaHttA07vmUjmsy8f0Yhe4RbM_NNE3jxHdaqQlLEYyP5T5zzQYL5dMg-Qow6d-MUNAoUYwAqNj7xjc-jBLqXHo/s1600/warning.png') no-repeat 12px 8px;
 color: #fff;
}

4. Klik Simpan

Untuk Penerapan

1. Untuk Kode 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 Kode 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 Kode Larangan / Warning :

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

Tag : CSS