Membuat Pesan Alert, Notice, Info, Success dan Series di blog

Critical Alert, Notice, Info dsb.

Membuat pesan critical di postingan blogger - Disini saya akan menerangkan bagaimana membuat pesan kritikal di blogger pesannya berupa Alert, Notice, Info, Success dan Series.

Apa Fungsinya?

Fungsinya kita bisa menekan kan atau menggaris bawahi hal yang sangat penting dalam postingan blog sehingga pembaca bisa lebih terfokus dengan critical yang lebih menarik.

Bagaimana Caranya?

• Login Blogger anda.
• Masuk tab Rancangan.
• Pilih Edi Html, cari atau tekan CTRL+F kode ]]></b:skin>
• Masukan kode CSS berikut diatas kode ]]></b:skin>:

/* Critical-XdX-Message */
.posting{max-width:620px!important;width:100%;margin:15px 20px 15px 0px;}#blog-pager{margin:1.5em 0;}
.alert,.notice,.info,.success,.series{display:block;font-style:normal;padding:15px 18px 15px 48px;position:relative;border-radius:4px;color:#333;border-bottom:1px solid rgba(0,0,0,.1);margin-top:1em;margin-bottom:1em;}
.alert,.notice{background-color:#BCC049;}
.info{background:#DFE7FE;}
.success{background:#CCFEBF;}
.series{background:#9FCFFF;}
.alert:before,.notice:before,.info:before,.success:before,.series:before{font-family:'fontAwesome';display:block;position:absolute;top:15px;left:16px;color:rgba(0,0,0,.18);font-size:24px;line-height:1;}
.alert:before,.notice:before{content:"\f05a"}.info:before{content:"\f0eb"}
.success:before{content:"\f14a"}
.series:before{content:"\f02d"}

• Masukan Stylesheet dibawah  tepat diatas kode </head> :

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

DEMO :

Penggunaanya : Ketika ingin mengaplikasikan pada halaman blog kita bisa memilih salah satu crritical dari 'alert' 'notice'  'info' 'success' dan 'series'. seperti <div class="CRITICAL_ANDA">.....Tulisan Anda </div>. Contoh : <div class="alert">..Tulisan anda..</div>

Demo Critical Message

Demikianlah cara membuat Critica Message pada postingan blog, apabila ada yang akan ditanyakan sudah kami siapkan kotak komentar :) :p .