Cara Membuat Catatan Block Quotes Keren di Blogger – Kali ini saya akan membagikan cara mudah membuat blok info, catatan dan peringatan dengan tampilan warna dan icon yang berbeda pada blog.
Block quote pada blog ini berfungsi untuk menambahkan catatan tersendiri, agar terlihat lebih menonjol dibandingkan isi artikel yang kita punya. Dengan tujuan agar para pembaca dapat memperhatikan catatan tersebut, baik itu berupa info atau peringatan tentang isi artikel yang kita miliki.
Sebenarnya jika kita menulis artikel, blogger atau pembuatan template sebenarnya sudah menyediakan fitur quote pada menu yang ada di postingan blog kita. Namun pada kesempatan kali ini, saya akan membagikan block quote dengan beberapa warna yang berbeda dan tentunya dengan tampilan icon keren. Tanpa basa-basi lagi, berikut tutorialnya.
Cara Membuat Catatan Block Quotes Keren di Blogger
1. Masuk ke blog anda > pilih menu Tema > pilih Edit HTML
2. Letakkan kode CSS ini tepat berada di atas kode ]]></b:skin> atau </style>
.info, .catatan, .peringatan {line-height: 22px;min-height: 38px;padding-left: 10px;padding: 10px 12px 12px 68px; margin: 5px 0;
}
.info {
background: #cbd1d9 url('https://4.bp.blogspot.com/-3JKMzkwpjlE/XGNs0c8gMJI/AAAAAAAAA6M/RXjEdhNgxkgPMKKJBt7mbSmI36SCTfHJgCLcBGAs/s1600/info.png') no-repeat 12px 8px;
color: #222
}
.catatan {
background: #c5ce59 url('https://1.bp.blogspot.com/-Fx0z-S6mNgU/XGNs0NSd0eI/AAAAAAAAA6I/syyKPUKE1-kkjECbExtTll_afBAoohH9gCLcBGAs/s1600/catatan.png') no-repeat 12px 8px;
color: #fff;
}
.peringatan {
background: #df8787 url('https://4.bp.blogspot.com/-X12eVnzjo-k/XGNs0fl6ZbI/AAAAAAAAA6Q/_HjE2gQHncgMQ2g3_87nXdaQ3UWI5owSwCLcBGAs/s1600/peringatan.png') no-repeat 12px 8px;
color: #fff;
}3. Jika sudah kemudian pilih Simpan Tema
4. Untuk menerapkannya di blog anda > buat postingan baru > pilih menu HTML > kemudian letakkan kode ini di dalamnya:
Untuk tampilan quote info, gunakan kode ini:
<div class='info'>
Cara membuat block quotes catatan, info dan peringatan pada blog, dengan tampilan icon dan warna yang berbeda
</div>Untuk tampilan klip catatan, gunakan kode ini:
<div class='catatan'>
Cara membuat block quotes catatan, info dan peringatan pada blog, dengan tampilan icon dan warna yang berbeda
</div>Untuk tampilan quote peringatan, gunakan kode ini:
<div class='peringatan'>
Cara membuat block quotes catatan, info dan peringatan pada blog, dengan tampilan icon dan warna yang berbeda
</div>*Catatan : ubah warna merah tersebut dengan teks yang anda inginkan.
Cukup sekian tutorial singkat dari saya tentang Cara Membuat Catatan Block Quotes Keren di Blogger. Jika ada hal yang tidak dimengerti bisa langsung bertanya di kolom komentar, terimakasih,
