Friday, December 1, 2017

Cara Membuat Blockquote Kotak Catatan Keren di Blog

Cara Membuat Blockquote Kotak Catatan Keren di Blog - Mungkin sobat blogger tidak asing lagi dengan yang nama blockquote, sebab ini merupakan bagian dari blogger untuk membuat post dalam memasukkan kode-kode html atau kata kata kutipan di artikel atau laman blog. Biasanya blockquote dipakai untuk memperjelas sebuah arahan maupun perintah dalam artikel, atau memperjelas informasi agar terlihat menonjol, contohnya kata warning atau daftar kalimat yang dianggap penting dalam sebuah tulisan.


Blog blog lain sebenarnya banyak yang sudah membahas tentang materi ini, jadi disini saya hanya menreshare kembali mengenai Membuat Blockquote / Kotak Catatan Keren Di Blog.

# Cara Membuat Blockquote / Kotak Catatan Keren

1. Pertama, kamu harus login ke Blogger. Jika sudah, kamu pilih Tema > Edit HTML. Jika kamu tidak mengerti, ikuti langkah di bawah ini.

Edit HTML

2. Selanjutnya, cari kode </head> . Kamu bisa mencarinya dengan CTRL+F.

3. Jika sudah ketemu, masukkan kode berikut di atas kode </head> yang kamu cari tadi.


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

Pastikan kamu sudah memasang Font Awesome agar iconnya dapat terlihat.
 4. Jika sudah, simpan template kalian.

Berikut ini contoh dari Blockquote / Kotak Catatan yang sudah kita pasang tadi.

Cara Membuat Blockquote Kotak Catatan Keren di Blog

Sekian tutorial dari saya mengenai Membuat Blockquote Kotak Catatan Keren di Blog. Semoga bermanfaat bagi sobat.

Load disqus comments

0 komentar