Cara Membuat Note Notice Keren Di Blog

Cara Membuat Note "Notice" Keren Di Blog

Selamat Datang agan/aganwati kali ini saya akan menyampaikan cara-cara untuk membuat note notice keren. Cara pembuatannya gampang tapi disini agan/aganwati hanya membutuhkan ketelitian untuk membuatnya baiklah artikel ini sangat berguna untuk blog agan maka dari itu langsung saja ini dial langkah-langkahnya :

Langkah 1: Simpan kode di bawah ini di atas ]]></b:skin>

/*Blok*/
.note,.alert,.instruction {position:relative;display:block;font-style:normal;color:#555;padding:15px 18px 15px 48px;background-color:#f8e38d;border-radius:3px;border-bottom:2px solid rgba(0,0,0,.1)}
.note p,.alert p,.instruction p {margin:0px}
.note {background-color:#FCD683}
.alert {background-color:#db6161}
.alert a,.alert code {color:#FFC0A7}
.instruction {background-color:#58C99D}
.instruction a,.instruction code {color:#C4FCE5}
.note:before,.alert:before,.instruction:before {font-family:'FontAwesome';display:block;position:absolute;top:15px;left:16px;color:rgba(0,0,0,.15);font-size:22px;line-height:1}
.note:before {content:"\f040"}
.alert:before {content:"\f071"}
.instruction:before {content:"\f05a"}

Langkah 2: Penggunaan HTML.

1. Note

<div class="note">...</div>

Di dalam CSS nya telah ditambahkan CSS untuk link a, parapgraph p dan code. Anda boleh menggunakannya sesuka hati.

2. Alert

<div class="alert">...</div>

Masih banyak cara lain untuk modifikasi blok seperti ini. Tidak harus menggunakan font icon. Anda juga boleh menggunakan img gambar icon, tutorialnya ada di situs lain.

3. Instruction

<div class="instruction">...</div>

Dalam tutorial ini, saya tidak menggunakan img atau gambar icon, melainkan menggunakan font-family:'FontAwesome' yang berarti jika kalian yang belum punya font nya, maka untuk bisa menggunakan Font Awesome ini Anda harus simpan kode link dibawah ini diatas </head>

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

Sekian dari saya dari Cara Membuat Notice Keren di blog. Semoga Bermanfaat sekian dan Terimakasih. Selamat Mencoba gan...!

Published By: Tsani Aziz | Jika Ingin Copas Tolong Sertakan Sumber Di Bawah ini

Terimah Kasih telah membaca artikel Cara Membuat Note Notice Keren Di Blog. Yang ditulis oleh Tsani Aziz .Pada hariSenin, 10 November 2014. Jika anda ingin sebarluaskan artikel ini, mohon sertakan sumber link asli. Kritik dan saran dapat anda sampaikan melalui kotak komentar Dan Jika Anda Memberi Like/Share Saya Sangat Berterima Kasih. Sekian Trimakasih ^_^

<a href="http://juragandawet69.blogspot.com/2014/11/langkah-1-kode-css-ini-di-atas-blok.html" target="_blank">Cara Membuat Note Notice Keren Di Blog</a>