Membuat Pesan Alert Metro Style

Setelah membuat template blog dengan gaya Metro Style sudah saatnya kita untuk menambahkan pesan yang anda tuliskan dalam sebuah postingan blog, agar para pembaca dapat dengan mudah memahami maksud dari informasi yang anda sajikan . Termasuk cara untuk menunjukkan kesalahan , pemberitahuan , informasi dan keberhasilan pesan dengan gaya yang tepat . Dalam posting ini ada kode CSS sederhana untuk menambahkan kotak Siaga mengagumkan dalam blogger .
Ini adalah campuran dari HTML sederhana dan tag CSS . Yang akan menciptakan efek yang mengagumkan untuk Anda . Dapatkan tampilan pada berbagai jenis bar pemberitahuan .

1 . Pesan Kesalahan

Pesan Informasi

2 . Pesan Peringatan

Pesan Peringatan

Fungsi tanda - tanda tersebut untuk memperjelas maksud dari sebuah informasi  yang anda berikan dalam postingan blog, baik itu tips maupun tutorial.

Untuk pemasangan di blog :

Tambahkan kode css berikut ini sebelum kode ]]></b:skin>

.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/AVvXsEh_ylb_TeTxgGnFrTmYM2CMdIIHipC-ZWzMqOywnoChVQcnUf_vY5FQ52LF5JZWG-_SBjcJL6SPRlRyrhy027MUtlyut-f8Lr_3oWxdUlufEQmN4_QAWs_7JDtwLPneaUjaR59lDRQIOwQ/s1600/tbm_info.png');
}
.success {
color: #0D8F07;
background-color: #E5FAC3;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG-ZA_iR-7HeMpn4EggASjJHZef4q5Hf6m6syqIG2RoR_lJNoVWWl-QHNjh055_wr2GDobSR2rjjl-hSoV1qverW0ILrJfIieAjWB85-59O97z19MIdjnzMuKq_OLPoRNLLH2XbXpuqeg/s1600/tbm_success.png');
}
.warning {
color: #DD8500;
background-color: #EBDCA3;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-9_-KTYyhitN_tQT0tQkqvjLBRBUZEG3TbR_zmBhJzKlBK6aw54JQd1AH6eT2qumP3c-8wg-aIJPB9-j8i7ap4hNRnmyUyILQqSWLMUoU3WMHQmSouMpT9DQV0sakHtVpMJoxlNLgQTU/s1600/tbm_warning.png');
}
.error {
color: #DF000C;
background-color: #F5C8C8;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKRBnH_1m-MtL9yc4y3oir_wSpyLAwDdk4RZp0GMinaqYYy-wf2O9bFg03rcda0C-dNkyHyl5Hp0tnYWQmxgARknm6UUUvYhi8DZeGt4zpRz4T-L_wfr_roZ45mu8PzFSsRnLDxqFhToU/s1600/tbm_error.png');
}

Kemudian untuk menampilkan pada postingan blog :

Masuk dalam Mode HTML, lalu masukkan kode dibawah ini sesuai dengan pesan yang ingin ditampilkan.

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

Anda hanya perlu mengganti tulisan ( Pesan Informasi, Pesan Sukses, Pesan Peringatan, Pesan Error ) dengan kalimat yang ingin anda sampaikan pada postingan blog.

Demikian sedikit tips blog yang saya berikan semoga bermanfaat.
Enjoy Blogging

Like THIS :

Share this article to: Facebook Twitter Google+ Linkedin Technorati Digg

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di BDariku