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.
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
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>
4. Jika sudah maka anda bisa langsung klik save template.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;}
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
loading...