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>
.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...!