CSS3 Info Box dengan Icon Font Awesome

Untuk memperganteng tampilannya saya menggunakan icon dari Font Awesome , dengan begitu pada langkah pemasangannya kamu harus memanggil fontnya terlebih dahulu.

Demo

Pemasangan pada Blog

Pada Dasboard Blogger pilih menu Template lalu Edit HTML tekan keyboard CTRL + F dan cari kode </head> setelah ketemu, letakkan link css ini tepat diatas kode yang kamu temukan itu.

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"></link>

Masih pada bagian Template, Sekarang cari kode ]]></b:skin> atau kode </style>. Setelah ketemu, Letakkan CSS ini tepat diatasnya

.catatan, .info, .alert, .instruksi, .update {
    display: block;
    font-style: normal;
    color: #333;
    padding: 15px 18px 15px 48px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    position: relative;
    border-radius:3px;
    margin:0 0 10px;
    color:#FFF
}
.catatan:before, .info:before, .alert:before, .instruksi:before, .update:before {
    font-family:"FontAwesome";
    display: block;
    position: absolute;
    top: 15px;
    left: 16px;
    color: rgba(0, 0, 0, 0.15);
    font-size: 22px;
    line-height: 1;
}
.catatan:before {
    content:'\f11d'
}
.info:before {
    content:'\f05a'
}
.alert:before {
    content:'\f071'
}
.instruksi:before {
    content:'\f028'
}
.update:before {
    content:'\f085'
}
.catatan {
    background-color:#49A5D7
}
.info {
    background-color:#FF9531
}
.alert {
    background-color:#B25A5A
}
.instruksi {
    background-color:#FAD163;
    color: #000;
}
.update {
    background-color:#69A24A
}

Cara Menggunakan

Terdapat beberapa macam info box yang saya tuliskan disini, seperti catatan, info, alert, instruksi, dan yang terkahir update.

Untuk penggunaanya hampir sama, hanya saja pada kelasnya yang berbeda, untuk menampilkannya pada posting blog, pertama tama masuk HTML Post bukan Compose , dan tempelkan HTML dibawah ini

<div class='catatan'>. . Teks anda Disini. .</div>

Perhatikan class yang saya beri tanda, itu adalah class dari jenis info box apa yang akan digunakan, misal akan membuat info box pemberitahuan tentang posting yang telah diupdate, maka class yang digunakan adalah class Update.

Semoga Bermanfaat!