Cara Membuat Kotak Catatan Keren di Blog

Pada tutorial kali ini Trik Keren akan memberikan Tutorial Membuat Kotak Catatan atau Blockquote di Blog

Blockquote berfungsi untuk memberitahu pada pengunjung bahwa text yang ada di blockquote itu adalah sebuah pesan penting.

Sebenarnya blockquote di blog sudah ada namun stylenya kurang bagus, nah sekarang Trik Keren akan memberikan CSS Style yang keren untuk Blockquote.

Cara Membuat Kotak Catatan Keren di Blog

Pertama-tama anda login ke Blogger
Kemudian pencet menu Tema / Template lalu klik Edit HTML
Cari kode </head>
Jika sudah ketemu, masukkan kode CSS dibawah ini tepat diatasnya

<style type='text/css'>
/*Blockquote dari www.alfi-yt.com*/
.post-body blockquote {
    text-align: left;
    background: #00D2FF;
    position: relative;
    display: block;
    padding: 55px 20px 20px;
    color: #fff;
    margin: 10px 0;
    border-radius: 3px;
}
.post-body blockquote:before {
    position: absolute;
    content: 'Catatan';
    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: '\f027';
    right: 10px;
    bottom: 5px;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    font-size: 160%;
    color: rgba(255,255,255,.6);
}
</style>

Lalu save temanya

Jika icon nya tidak tampil, tambahkan kode dibawah ini tepat diatas </head>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>

Apakah anda sudah tahu cara menampilkannya? Jika belum, anda bisa melihat tutorialnya dibawah ini

Cara Menampilkan Blockquote

Jika ingin menampilkan blockquote, anda harus meng-klik icon kutip dua lalu tulis textnya dan publikasikan postingan anda.

Akhir Kata

Cukup sekian tutorialnya, Jika masih belum paham anda bisa berkomentar. Semoga bermanfaat

Berlangganan artikel terbaru dari blog ini langsung via email.