Cara Membuat Kotak Catatan Atau BlockQuote Pada Blog

Cara Membuat Kotak Catatan Atau BlockQuote Pada Blog


Pelajar Design - Pada kesempatan kali ini saya akan memberikan tutorial Cara Membuat Kotak Catatan Atau BlockQuote Pada Blog. Sebenarnya sudah banyak yang men-share tutorial ini, namun karena ada permintaan untuk Membuat Kotak Catatan Atau BlockQuote Pada Blog maka saya buatkan.

Nah, untuk Membuat Kotak Catatan Atau BlockQuote Pada Blog kita cukup mengganti tampilan dari CSS BlockQuote default yang disediakan template default pada blogger. Tapi jika kalian sudah pernah mencustom munkin ada beberapa bagian tidak sesuai, untuk mengatasinya kalian bisa menghapus CSS bawaan template.

Cara Membuat Kotak Catatan Atau BlockQuote Pada Blog

1. Silahkan login ke blogger.com dengan menggunakan akun Gmail kalian.
2. Selanjutnya masuk ke menu TEMA > Edit HTML.
3. Lalu kalian cari kode </head> (Gunakan Control + F Agar Lebih Mudah).
4. Jika sudah ketemu kalian tinggal memasukkan kode dibawah ini tepad DIATAS kode tersebut.

<style type='text/css'>
/*Blockquote Catatan*/
.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: '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>

Jika icon tidak tampil silahkan tambahkan kode dibawah ini tepat DIATAS kode </head>. Kalian juga bisa mengganti tulisan Catatan dengan tulisan yang kalian inginkan. Caranya carilah kode CSS ini content: 'Catatan'.

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

5. Jika sudah silahkan Simpan.

Lalu bagaimana cara menampilkannya pada postingan? Buat kalian yang belum tau caranya silahkan lihat langkah-langkahnya dibawah.

Memasang BlockQuote Pada Postingan Blog

1. Silahkan kalian buat artikel bebas.
2. Jika sudah kalian block artikel yang ingin dijadikan BlockQuote.
3. Lalu kalian klik icon kutip dua pada menu atas postingan.

4. Jika sudah silahkan kalian publikasikan artikel yang telah kalian buat.

Cukup sekian artikel tentang Cara Membuat Kotak Catatan Atau BlockQuote Pada Blog. Silahkan download dibawah dan jangan lupa berikan komentar template apalagi yang kalian inginkan untuk saya bahas.

You may like these posts