Cara Menciptakan Kotak Catatan Atau Blockquote Keren Pada Postingan Blog
Blockquote atau yang biasa kita kenal dengan kotak catatan, merupakan sebuah aba-aba pemanis yang akan menciptakan postingan blog anda nampak lebih menarik dan profesional.
Dikatakan sebagai Blockquote alasannya ialah memang fungsinya ialah untuk menempatkan Quote atau kata bijak. Namun seiring berjalannya waktu, Blockquote tidak hanya dimanfaatkan sebagai kawasan 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 berguru bagaimana cara menciptakan Blockquote yang lebih keren dan lebih elegan dari pada Blockquote yang biasa.
Kita akan berguru menciptakan Blockquote yang sederhana, dengan tampilan warna Flat UI, dan efek lipatan keren yang pastinya akan menciptakan Blockquote kita akan lebih seolah-olah dengan kotak catatan asli. Menarik sekali bukan?
Untuk sanggup menciptakan dan mengaplikasikannya pada postingan blog, anda hanya perlu meletakkan beberapa aba-aba kedalam tema blog anda. Dan jika berhasil anda bisa mengaplikasikannya pribadi 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 aba-aba berikut dan letakkan sempurna 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 sanggup memakai 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 aba-aba 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 goresan pena yang bertanda Hijau sesuai cita-cita anda!
Ubah goresan pena yang bertanda Hijau sesuai cita-cita anda!
Catatan:
Blockquote yang saya bagikan disini mempunyai 4 warna berbeda, yaitu Hijau, Kuning, Merah dan Biru. Jika anda ingin mengubah warna pada Blockquote diluar 4 warna tersebut, anda bisa mengganti aba-aba warna pada script yang akan anda gunakan.
4. Lakukan Pratinjau untuk mengetahui hasilnya.Blockquote yang saya bagikan disini mempunyai 4 warna berbeda, yaitu Hijau, Kuning, Merah dan Biru. Jika anda ingin mengubah warna pada Blockquote diluar 4 warna tersebut, anda bisa mengganti aba-aba warna pada script yang akan anda gunakan.
5. Selesai.
Itu ia cara gampang memasang Blockquote pada postingan blog. Sekarang tampilan postingan anda akan lebih menarik dan terlihat profesional pastinya.
Dan untuk selanjutnya anda bisa membuatkan cara ini sesuai kemampuan anda. Semoga sanggup bermanfaat, dan final kata saya ucapkan terimakasih dan hingga jumpa.
