Cara Memasang Note, Alert dan Instruction di Blog

Mungkin Sudah banyak Blog-blog yang di tempat Lain yang sudah pernah Share Tentang Cara Memasang Note, Alert dan Instruction di Blog Tapi tidak salahnya saya Juga berbagi Trik ini Diblog Saya Hehehe..

Disini akan dibahas bagaimana cara membuat blok note (catatan), alert (tanda, peringatan) dan instruction (instruksi). Selain ini masih ada Banyak lagi blok lainnya seperti blockquote (kutipan). Dan lain Sebagainya Trik ini pun sudah saya pasang Diblog saya ini jadi bila ingin melihatnya bisa lihat artikel-artikel saya terdahulu. langsung Saja

Cara Memasang Note, Alert dan Instruction di Blog

Login Di Blogger
Setelah masuk di beranda Blog silahkan masuk bagian Template > Edit HTML

Letakan Kode CSS dibawah tepat di atas Kode]]></b:skin> atau </style>

/*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 Terkahir Simpan Template

Cara menerapkannya

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

Akan Menjadi

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

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

Akan Menjadi

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.

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

Akan Menjadi

Dalam tutorial ini, saya tidak menggunakan img atau gambar icon

itulah Cara Memasang Note, Alert dan Instruction di Blog Bagaimana Mudah bukan untuk Pembelajaran Di dunia Blog ini Bila ada yang ingin di tanyakan silahkan tinggalkan Komentar dibawah Sekian.