Cara Menciptakan Kotak Catatan Atau Blockquote Keren Pada Postingan Blog
Blockquote atau yg biasa kita kenal dengan kotak catatan, adalah sebuah kode pelengkap yang akan menciptakan postingan blog kau nampak lebih menarik serta profesional.
Dikatakan sebagai Blockquote alasannya memang kegunaannya adalah buat menempatkan Quote atau tutur bijak. Tetapi seiring berjalannya waktu, Blockquote tidak hanya dimanfaatkan sebagai daerah buat menulis tutur-ungkap bijak, namun pula kata-kata lainnya.
Tampilan Blockquote yang akan kita buat ini sangatlah tidak sinkron bersama Blockquote dalam umumnya. Disini kita akan mencar ilmu bagaimana cara menciptakan Blockquote yg lebih keren dan lebih elegan dari pada Blockquote yg biasa.
Kita akan mencar ilmu menciptakan Blockquote yang sederhana, beserta tampilan warna Flat UI, serta dampak lipatan keren yang pastinya akan menciptakan Blockquote kita akan lebih seakan-akan dengan kotak gesekan pena asli. Menarik sekali bukan?
Untuk bisa menciptakan serta mengaplikasikannya dalam postingan blog, anda hanya perlu meletakkan beberapa kode kedalam tema blog anda. Dan apabila berhasil kau bisa mengaplikasikannya pribadi pada postingan blog kamu.
Saya rasa kau sudah tak sabar lagi buat mengetahui caranya. Baiklah silahkan ikuti caranya dibawah ini;
1. Masuk ke www.blogger.com
2. Pada dashboard blogger silahkan pilih Tema>Edit HTML
3. Copy kode berikut serta letakkan tepat di atas kode ]]></b:skin> atau </style>
/* CSS Note */.noteposition:relative;padding:1.2em 1.5em;margin:2em auto;color:#fff;background:#2ecc71;overflow:hidden.note.yellowbackground:#f1c40f.note.redbackground:#e74c3c.note.bluebackground:#3498db.note:beforecontent:"";position:absolute;top:0;right:0;border-width:0 16px 16px 0;border-style:solid;border-color:#fff #fff #27ae60 #27ae60;background:#27ae60;box-shadow:0 1px 1px rgba(0,0,0,0.3),-1px 1px 1px rgba(0,0,0,0.2);display:block;width:0.note.yellow:beforeborder-color:#fff #fff #f1c40f #f1c40f;background:#f1c40f.note.red:beforeborder-color:#fff #fff #e74c3c #e74c3c;background:#e74c3c.note.blue:beforeborder-color:#fff #fff #3498db #3498db;background:#3498dbUntuk bisa menggunakan Blockquote dalam postingan blog, silahkan ikuti cara berikut:
1. Pada dashboard blogger pilih Postingan>Entri Baru
2. Masuk dalam mode HTML (bukan "Compose")
3. Masukan salah satu kode berikut dalam tab HTML tadi:
Blockquote warna Biru
<div class='note blue'>...ISI DENGAN CATATAN...</div>Blockquote warna Merah
<div class='note red'>...ISI DENGAN CATATAN...</div>Blockquote warna Kuning
<div class='note yellow'>...ISI DENGAN CATATAN...</div>Blockquote warna Hijau
Baca Juga
<div class='note'>...ISI DENGAN CATATAN...</div>Catatan:
Ubah catatan yg bertanda Hijau sesuai harapan kamu!Catatan:
Blockquote yg saya bagikan disini mempunyai 4 warna tidak sama, yaitu Hijau, Kuning, Merah dan Biru. Jika kau ingin mengubah warna pada Blockquote diluar 4 warna tadi, kau sanggup mengganti kode warna dalam script yang akan anda gunakan.4. Lakukan Pratinjau buat memahami hasilnya.
5. Selesai.
Itu beliau cara praktis memasang Blockquote pada postingan blog. Sekarang tampilan postingan kau akan lebih menarik dan terlihat profesional pastinya.
Dan untuk selanjutnya anda bisa membuatkan cara ini sesuai kemampuan anda. Semoga bisa bermanfaat, dan tamat kata saya ucapkan terimakasih dan sampai jumpa.
0 Response to "Cara Menciptakan Kotak Catatan Atau Blockquote Keren Pada Postingan Blog"
Post a Comment