Cara Membuat Kotak Catatan Blockquote Keren Pada Blog

Cara Membuat Kotak Catatan Blockquote Keren Pada Blog - Hay jumpa lagi dengan Blog Mas Newbie. Kali ini Mas Newbie akan kasih sedikit Tutorial tentang Cara Membuat Kotak Catatan Blockquote Keren Pada Blog. Mungkin ini tidak terlalu penting bagi Blog tetapi apa salahnya kita coba, cara ini juga sering di gunakan para master Blogger. Contohnya seperti arlina design, Mas Tamvan, dan para master Blogger lainya.

Memang sih Tutorial ini udah banyak di Google tapi karena teman saya meminta untuk di buatkan Tutorial ini. Ya mumpung saya lagi gak ada kerjaan ya saya sempatkan untuk membuat Tutorial ini. Ok baiklah langsung saja kalian ikuti step By step Tutorial ini.

Cara Membuat Kotak Catatan Blockquote Keren Pada Blog

1. Masuk ke akun Blogger.
2. Silahkan Klik Template / Tema, Silahkan kalian backup Template terlebih dahulu untuk menghindari hal-hal yang tidak diinginkan.
3. Jika sudah silahkan klik Edit HTML.
4. Carilah kode </head> Kemudian letakkan kode CSS berikut diatas kode </head>

.post-body blockquote {
    text-align: left;
    background: #3cc091;
    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: #3cc091;

}
.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);
}

5. Kemudian simpan Template.

Kalian bisa mengganti kode warna yang saya tandai dengan warna Anda sendiri, Dan jika ikon tidak tampil bisa tambahkan kode berikut diatas </head>.

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

Silahkan tes dengan membuat postingan baru. Jika belum tahu cara menerapkannya silahkan ikuti langkah-langkah berikut.

Cara Menerapkan Kode Blockquote

• Buat postingan baru dengan tulisan yang Anda ingin kan.
• Kemudian Block semua tulisan tersebut.

• Jika sudah di Block klik ikon kutip seperti gambar diatas.

Jika ingin memasukan melalui mode HTML masukan kode berikut.


<blockquote class="tr_bq">lorem ipsum</blockquote>

• Ganti yang saya tandai dengan catatan Anda.
• Selesai dan publikasikan.
• Dan lihat hasilnya..

Terimakasih telah membaca Cara Membuat Kotak Catatan Blockquote Keren Pada Blog. Selamat mencoba dan semoga berhasil.

Bagikan Artikel ini