Membuat Pesan Alert di Postingan Blog

Untuk membuat Membuat Pesan Alert di Postingan Blog sahabat dapat menggunakan script dibawah ini.

Letakkan CSS berikut tepat diatas ]]></b:skin> atau </style>
simpan template jika selesai

.info, .success, .warning, .error {
background-repeat: no-repeat;
background-position: 10px center;
border: 1px solid;
margin: 10px 0;
padding: 14px 9px 14px 48px;
}
.info {
color: #0D81E9;
background-color: #C8E9F8;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVqKoiixFOz1QwUrJOTSr_M_YmDIw8mt0Wwp12lTcfCj62e9CTvQIlZClia-shVjcvJqGsZSzz-pp6RVTXhk7LP6sDeypMI76hMlIdFR4QRwa2vtHKgAHZcOHQqG-hgfBkksMqkSoLcSY/s1600/tbm_info.png');
}
.success {
color: #0D8F07;
background-color: #E5FAC3;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4BOsTJ3UZ7fPg03tE2UgtlMANrabY1PqIM3GXzQozuulJWkFmRtRMdZv-BaBpqS7mCQqNoly06_s0aRizClKE9VTStEmk3S58pbDAvRB7uOvMDDtO9YY530T6cshmseL_opj4OS6IMdA/s1600/tbm_success.png');
}
.warning {
color: #DD8500;
background-color: #EBDCA3;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4YumTI6dP00QnsltzfMudmSVoBeyY9q8aSQcMkMKpye5glVjQYmC446yhfzUfUcSJQkcRQv6-h0jRxXWAuGaDFrRLPcZ6dxHiNqa08q27Pfxucx-jKQHgPThPFWybobnOeG7sE2CRG_8/s1600/tbm_warning.png');
}
.error {
color: #DF000C;
background-color: #F5C8C8;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUDFikRTAtxi5K-zLtmXwSNtc1oEk3Q7GvyLAVTMXvXPoGrqiBtH5YhyL9gxHanLGO2RGqdAjZJrj6Xgv4ybjCjo5_Oc1QdU_9VJltvt7pW1ReCSHZIgQepwMz_INgZXhaqiJGy-5leGg/s1600/tbm_error.png');
}

Masukkan kode dibawah ini pada mode HTML di postingan anda

<div class="info">Pesan Informasi</div>
<div class="success">Pesan Sukses</div>
<div class="warning">Pesan Peringatan</div>
<div class="error">Pesan Error</div>

DEMO
Terima Kasih untuk mas Virlyz Nyzam
http://samsury-sites.blogspot.com/2014/01/membuat-pesan-alert-metro-style.html