Cara Menciptakan Catatan Block Quotes Keren Di Blogger

Cara Membuat Catatan Block Quotes Keren di Blogger - Kali ini aku akan membagikan cara gampang menciptakan blok info, catatan dan peringatan dengan tampilan warna dan icon yang berbeda pada blog.
Cara Membuat Catatan Block Quotes Keren di Blogger Cara Membuat Catatan Block Quotes Keren di Blogger

Block quote pada blog ini berfungsi untuk menambahkan catatan tersendiri, semoga terlihat lebih menonjol dibandingkan isi artikel yang kita punya. Dengan tujuan semoga para pembaca sanggup memperhatikan catatan tersebut, baik itu berupa isu atau peringatan ihwal isi artikel yang kita miliki.

Sebenarnya jikalau kita menulis artikel, blogger atau pembuatan template bahwasanya sudah menyediakan fitur quote pada sajian yang ada di postingan blog kita. Namun pada kesempatan kali ini, aku 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 sajian Tema > pilih Edit HTML

2. Letakkan instruksi CSS ini sempurna berada di atas instruksi ]]></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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB_hyphenhyphensgjQ4WhXk2W6F9PBQQHraSzuXZkelTNFkbFOfy3zprMrqemtXF9Dz07lryN4O8SdFuJ6fAslDjyjb-TTAgm4DTYjOWRSEpZRd9pZBqpR8L7IiDarl5j8CxDBSfhcy7XZIHGGfojw/s1600/info.png') no-repeat 12px 8px;  color: #222 } .catatan {  background: #c5ce59 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFJd8rDrorKIhx9uDUMji1l40og8T7yNsCT5IvAJLzSayu73ZzqK1eJJvwU2LK_CSi-VkWRLLJ4A67jVqo5OKyQJ5o-JsY8VtkK6iDBzCCOUd3VmlqiMXuIDQkWKKtNXOWY5ZnrpOsfOA/s1600/catatan.png') no-repeat 12px 8px;  color: #fff; } .peringatan {  background: #df8787 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-aVTlDeVOw2Na5MZmqunMO9O8hbApXGBoJxReAaylCSfUdC2TDl_qmofl7_rL-rYZ2Nuos_yMEEKqtyJpah02UR3vn0AbGoV1KSmEAMQTG98Dc1YwcEVqdhxpk5hwcVtsOmCaR4CYsw8/s1600/peringatan.png') no-repeat 12px 8px;  color: #fff; }

3. Jika sudah lalu pilih Simpan Tema

4. Untuk menerapkannya di blog anda > buat postingan baru > pilih sajian HTML > lalu letakkan instruksi ini di dalamnya:

Untuk tampilan quote info, gunakan instruksi ini:
<div class='info'> Cara menciptakan block quotes catatan, isu dan peringatan pada blog, dengan tampilan icon dan warna yang berbeda </div>

Untuk tampilan klip catatan, gunakan instruksi ini:
<div class='catatan'> Cara menciptakan block quotes catatan, isu dan peringatan pada blog, dengan tampilan icon dan warna yang berbeda </div>

Untuk tampilan quote peringatan, gunakan instruksi ini:
<div class='peringatan'> Cara menciptakan block quotes catatan, isu 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 aku ihwal Cara Membuat Catatan Block Quotes Keren di Blogger. Jika ada hal yang tidak dimengerti sanggup pribadi bertanya di kolom komentar, terimakasih,
Sumber https://www.analisyuki.com/

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel