Senin, 04 November 2013

Message Information

Message Information - ini adalah merupakan berbagai bentuk pesan dalam postingan.
Pesan yang secara otomatis terpasang apabila kita panggil dengan kode html nya
maka pesan tersebut akan muncul di postingan.

Baiklah, Untuk Contohnya sobat bisa lihat dibawah ini :

Info message

Sukses message

Warning message

Error message


Gimana?? jika sobat tertarik mencobanya, silahkan ikuti tahap-tahap berikut :
1. Login Ke Akun Blog Sobat
2. Pilih Rancangan/Tata Letak
3. Cari Kode ]]></b:skin> , Lalu Masukan Kode CSS Berikut tepat diatasnya.

.info, .sukses, .warning, .error {
border: 1px dotted;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
}
.info {
color: #00529B;
background-color: #BDE5F8;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4ri4fDtj76XtCg-IbUEwbfF_A1w6XZM80RXUvTzuHsvK-CvDknTwM4QeBzb7fwqN6YSgBGtr3S4rlNX7p_7zpZLjbMSMIphQw7ietg-LkqWf0Xr6MhrQItK3LzDL_rJ9flpgLSRRFlmo/);
}
.sukses {
color: #4F8A10;
background-color: #DFF2BF;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqspMZPYBqyphHVgcacEU8iFDRESeSBa_-1r7virOVrDV9Sfr2KtHUrHZS-wSMZ9EKJJAMPVyZ6AGQ4-nwq9XIUIifxyoSPgPgr7ZaOBq0fdvHV2KJGsKNfCGD4w8hK4eqVEnjQ41UuSA/);
}
.warning {
color: #9F6000;
background-color: #FEEFB3;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj04HgQ03lhoIUo87RsWi-cGTIFZM_Vhl4SUoRIny5K4sn95OHXWR8oC8K7p2GJIjzV2BOq2gm3Eb4gSewnT3N14sNo_V23zW7cpyKCDIfIkvq9FWZudGRpR-9BDr0denfhS02iQfrpY3w/);
}
.error {
color: #D8000C;
background-color: #FFBABA;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjskplMS9GFysQbDtr3ndvc83H6E6txWqT3XPebdXt4gvJ05Ki4MpaF4zz6jMy58C2D3U25uuBFiHecHE9llfd3zzSBxL8KHVQUHdjRSnPUVlOV8Q7eLfDwzVVay2hFMq-KKP0nkwp2rnA/);
}

4. Selanjutnya untuk pemanggilan nya gunakan salah satu html berikut ini  pada postingan sobat :

<div class="info">Info message</div>

<div class="sukses">Sukses message</div>

<div class="warning">Warning message</div>

<div class="error">Error message</div>


Selamat mencoba, dan kembangkan sesuai keinginan masing-masing... :)

0 komentar:

Posting Komentar