Mengubah Tampilan Blockquote Pada Blog

SatuAja : Blockquote pada sebuah blog digunakan untuk menampilkan suatu peringatan atau catatan penting. Tampilan Blockquote bawaan pada blog tentu sangat sederhana. Kali ini kita akan belajar mengubah agar tampilan Blockquote menjadi lebih menarik.

Hal ini bertujuan agar Blockquote menarik perhatian pengunjung dengan tampilan yang berbeda dari biasanya. Kita akan menggunakanmetode coding CSS untuk mengubah tampilan Blockquote pada blog.

Pertama silahkan copy kode CSS berikut.

/*Blockquote Catatan*/
.post-body blockquote {
    text-align: left;
    background: #000080;
    position: relative;
    display: block;
    padding: 55px 20px 20px;
    color: #fff;
    margin: 10px 0;
    border-radius: 5px;
}
.post-body blockquote:before {
    position: absolute;
    content: 'Note :';
    background: #008080;
    right: 10px;
    left: 10px;
    top: 10px;
    padding: 5px 20px;
    display: block;
    font-weight: 700;
    border-radius: 30px;
    color: #fff;

}
.post-body blockquote:after {
    position: absolute;
    content: '\f027';
    right: 10px;
    bottom: 5px;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    font-size: 160%;
    color: rgba(255,255,255,.6);
}

Kemudian masuk di pengaturan template dan pilih Edit HTML. Cari kode ]]></b:skin> dan paste kode CSS diatasnya sebelum tanda }. Kalian bisa mengubah sesuka hati kode warna background, jenis font, warna text, ketebalan huruf dan lain sebagainya. Simpan template untuk menyimpan perubahan.

Untuk menerapkan dalam artikel dalam mode penulisan klik ikon " yang ada di bar atas. Jika kalian menulis artikel dalam mode HTML bisa menuliskan kode <blockquote class="tr_bq">Tulis Catatan Disini</blockquote">.

Ganti kata Tulis Catatan Disini dengan pesan atau kalimat yang ingin kalian sematkan dalam Blockquote.