Cara Mudah Membuat Blockquote Kotak Catatan Di Blogger

Cara Mudah Membuat Blockquote Kotak Catatan Di Blogger

Kembali lagi saya share cara membuat blockquote di blogger. Pastinya jika kita sudah mempunyai blog, tentu ingin membuat website/ blog kita terlihat lebih cantik atau keren di mata pengunjung termasuk saya. 

Nah apa tujuan dari kita memasukan blockquote di blog kita tersebut, ini tidak lain supaya agar para pengunjung bisa betah dan nyaman untuk berlama- lama mampir di blog kita. Yaitu dengan kita membuat blockquote "Quote" agar terlihat lebih bagus ataupun terlihat keren di mata mereka.

Jangan Baca Juga : Cara Mudah Membuat BlockQuote Dapat Berubah-ubah Warna di Blogger

Biasanya blockquote dipakai untuk memperjelas sebuah arahan maupun perintah dalam postingan, atau juga untuk memperjelas informasi agar terlihat menonjol, seperti contohnya kata warning atau daftar kalimat yang dianggap penting dalam sebuah tulisan tersebut.

Untuk demo nya bisa anda lihat video gif yang sudah saya sediakan di bawah ini. Blockquote Kotak Catatan tersebut sudah saya edit sedikit jadi untuk calor tidak sama lagi, hehe

Untuk anda yang sudah penasaran ingin menerapkan Blockquote Kotak Catatan di blog kalian, maka anda bisa ikuti langkah- langkah sebagai berikut:

# Cara Membuat Blockquote

1. Pertama , pastikan anda sudah masuk di dasbhor anda sendiri
2. Masuk pada bagian editor template , caranya pilih Menu Template -> Edit HTML.
3. Temukan kode disamping ini </head> Untuk mempercepat pencarian anda tekan CTRL+F.

4. Nah jika sudah ketemu kode tersebut, Copas kode di bawah ini dan paste atau letakan di atas kode </head> 

.post-body blockquote {text-align: left;background: #1b9a62;position: relative;display: block;padding: 55px 20px 20px;color: #fff;border-radius: 3px;}
.post-body blockquote:before {position: absolute;content: 'Catatan';background: #0b6e3e;position: absolute;top: 0;padding: 9px 0;left: 0;right: 0;color: #fff;display: block;margin: 0;font-weight:700;text-indent: 15px;border-radius:3px 3px 0 0;}
.post-body blockquote:after {display: inline-block;content: "\f0a1";font-family: fontAwesome;font-style: normal;font-weight: normal;font-size: 18px;color: #fff;top: 0;right: 0;padding: 9px 14px;position: absolute;}

4. Jika sudah maka anda bisa langsung klik save template

Oh ya pastikan anda sudah memasang Font Awesome agar iconnya dapat terlihat.

Demikian penjelasan saya pada hari ini, semoga dapat membantu anda dan selamat mencoba. Jika anda kurang paham bisa anda klik tombol komentar di bawah ini. Salam Blogger

Artikel Terkait