Blockquote atau yang biasa kita kenal dengan kotak catatan, merupakan sebuah kode pelengkap yang akan membuat postingan blog anda nampak lebih menarik dan profesional.
Dikatakan sebagai Blockquote karena memang fungsinya adalah untuk menempatkan Quote atau kata bijak. Namun seiring berjalannya waktu, Blockquote tidak hanya dimanfaatkan sebagai tempat untuk menulis kata-kata bijak, namun juga kata-kata lainnya.
Tampilan Blockquote yang akan kita buat ini sangatlah berbeda dengan Blockquote pada umumnya. Disini kita akan belajar bagaimana cara membuat Blockquote yang lebih keren dan lebih elegan dari pada Blockquote yang biasa.
Kita akan belajar membuat Blockquote yang sederhana, dengan tampilan warna Flat UI, dan efek lipatan keren yang pastinya akan membuat Blockquote kita akan lebih mirip dengan kotak catatan asli. Menarik sekali bukan?
Untuk dapat membuat dan mengaplikasikannya pada postingan blog, anda hanya perlu meletakkan beberapa kode kedalam tema blog anda. Dan bila berhasil anda bisa mengaplikasikannya langsung pada postingan blog anda.
Saya rasa anda sudah tidak sabar lagi untuk 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 dan letakkan tepat diatas kode ]]></b:skin> atau </style>
/* CSS Note */
.note{position:relative;padding:1.2em 1.5em;margin:2em auto;color:#fff;background:#2ecc71;overflow:hidden}
.note.yellow{background:#f1c40f}
.note.red{background:#e74c3c}
.note.blue{background:#3498db}
.note:before{content:"";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:before{border-color:#fff #fff #f1c40f #f1c40f;background:#f1c40f}
.note.red:before{border-color:#fff #fff #e74c3c #e74c3c;background:#e74c3c}
.note.blue:before{border-color:#fff #fff #3498db #3498db;background:#3498db}Untuk dapat menggunakan Blockquote pada postingan blog, silahkan ikuti cara berikut:
1. Pada dashboard blogger pilih Postingan>>Entri Baru
2. Masuk pada mode HTML (bukan "Compose")
3. Masukan salah satu kode berikut pada tab HTML tersebut:
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
<div class='note'>...ISI DENGAN CATATAN...</div>
Catatan:
Ubah tulisan yang bertanda Hijau sesuai keinginan anda!
Ubah tulisan yang bertanda Hijau sesuai keinginan anda!
Catatan:
Blockquote yang saya bagikan disini memiliki 4 warna berbeda, yaitu Hijau, Kuning, Merah dan Biru. Jika anda ingin mengubah warna pada Blockquote diluar 4 warna tersebut, anda bisa mengganti kode warna pada script yang akan anda gunakan.
4. Lakukan Pratinjau untuk mengetahui hasilnya.Blockquote yang saya bagikan disini memiliki 4 warna berbeda, yaitu Hijau, Kuning, Merah dan Biru. Jika anda ingin mengubah warna pada Blockquote diluar 4 warna tersebut, anda bisa mengganti kode warna pada script yang akan anda gunakan.
5. Selesai.
Itu dia cara mudah memasang Blockquote pada postingan blog. Sekarang tampilan postingan anda akan lebih menarik dan terlihat profesional pastinya.
Dan untuk selanjutnya anda bisa mengembangkan cara ini sesuai kemampuan anda. Semoga dapat bermanfaat, dan akhir kata saya ucapkan terimakasih dan sampai jumpa.