Cara Membuat Blok Note, Alert, Dan Instruction

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Halo sobat blogger, dihari Rabu ini saya akan share Cara Membuat Blok Note, Alert, Dan Instruction. Block ini sering di gunakan pada blog Dian Anarchyta dan Blog Irvan Efendy. Nah, blok note ini sangat cocok dengan template yang dibuat oleh Kang Ismet karna lebih berwarna, Seperti: Template Kang Ismet, Droidpluss, DLL. Langsung aja ke inti pembahasannya.

TUTORIAL:

• Masuk ke blogger >> Dashboard >> Template >> Edit HTML.
• Setelah masuk ke Edit HTML simpan CSS dibawah ini diatas kode ]]></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"}

• Penggunaan HTML pada saat kalian ingin share postingan.

A. Note 

<div class="note">Ganti Sesuai Selera</div>

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

B. Alert 

<div class="alert">Ganti Sesuai Selera</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.

C. Instructions

<div class="instruction">Ganti Sesuai Selera</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'/>