Cara Membuat Kotak Catatan Atau Blockquote Keren Pada Postingan Blog

Blockquote atau yg biasa kita kenal dengan kotak catatan, adalah sebuah kode pelengkap yang akan membuat postingan blog kamu nampak lebih menarik serta profesional.

Dikatakan sebagai Blockquote lantaran memang kegunaannya adalah buat menempatkan Quote atau tutur bijak. Tetapi seiring berjalannya waktu, Blockquote tidak hanya dimanfaatkan sebagai tempat 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 belajar bagaimana cara menciptakan Blockquote yg lebih keren dan lebih elegan dari pada Blockquote yg biasa.

Kita akan belajar membuat Blockquote yang sederhana, beserta tampilan warna Flat UI, serta efek lipatan keren yang pastinya akan membuat Blockquote kita akan lebih mirip dengan kotak tulisan 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 kamu bisa mengaplikasikannya langsung pada postingan blog kamu.

Saya rasa kamu 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:#3498db

4. Simpan Tema

Untuk 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

• Cara Membuat Kotak
• Cara Membuat Kotak Di Word
• Cara Membuat Kotak Kado
• Cara Membuat Kotak Dari Kertas
• Cara Membuat Kotak Pensil
• Cara Membuat Kotak Di Photoshop
• Cara Membuat Kotak Kemasan
• Cara Membuat Kotak Dari Kardus
• Cara Membuat Kotak Di Excel
• Cara Membuat Kotak Pensil Dari Kardus

<div class='note'>...ISI DENGAN CATATAN...</div>

Catatan:
Ubah catatan yg bertanda Hijau sesuai harapan kamu!Catatan:
Blockquote yg aku bagikan disini mempunyai 4 warna tidak sama, yaitu Hijau, Kuning, Merah dan Biru. Jika kamu ingin mengubah warna pada Blockquote diluar 4 warna tadi, kamu sanggup mengganti kode warna dalam script yang akan anda gunakan.4. Lakukan Pratinjau buat memahami hasilnya.
5. Selesai.

Itu beliau cara gampang memasang Blockquote pada postingan blog. Sekarang tampilan postingan kamu akan lebih menarik dan terlihat profesional pastinya.

Baca Juga: 6 Panduan Ampuh Agar Konten BlogTidak Dapat Dicuri Atau Di Copas Oleh Orang Lain

Dan untuk selanjutnya anda bisa mengembangkan cara ini sesuai kemampuan anda. Semoga bisa bermanfaat, dan akhir kata aku ucapkan terimakasih dan sampai jumpa.