Cara Mempercantik Blockquote Pada Blog

Membuat blog tutorial mungkin blockquote menjadi salah satu andalannya untuk membuat tampilannya lebih bagus. Apa saja sih fungsi blockquote ? Blockquote dapat berfungsi sebagai tempat catatan tips yang perlu diperhatikan dalam sebuah artikel , sebagai pokok pembahasan , dan bahkan sebagai pengingat.

Contoh Blockquote

Lalu bagaimana cara membuat blockquote yang bagus dan keren ? Mungkin kamu bisa mengikuti tutorial berikut :

1. Masuk ke blogger.com
2. Pilih Tema - Edit HTML
3. Cari </head> dan letakkan kode CSS berikut diatasnya

<style type='text/css'>
/*Blockquote Catatan Beritatekno.net */
.post-body blockquote {
    text-align: left;
    background: #6591c2;
    position: relative;
    display: block;
    padding: 55px 20px 20px;
    color: #fff;
    margin: 10px 0;
    border-radius: 3px;
}
.post-body blockquote:before {
    position: absolute;
    content: &#39;Catatan&#39;;
    background: rgba(255,255,255,1);
    right: 3px;
    left: 3px;
    top: 3px;
    padding: 5px 20px;
    display: block;
    font-weight: 700;
    border-radius: 3px 3px 0 0;
    color: #6591c2;

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

4. Klik simpan

Lalu bagaimana cara menggunakannya ?

1. Buatlah barisan teks seperti biasa
2. Klik icon blockquote dan otomatis teks akan menjorok ke tengah dan artikel siap di publish