Cara Membuat Kotak Quotes pada Postingan Blog

Dalam posting artikel di blog terkadang kita ingin membedakan antara tulisan penjelasan dengan tulisan yang ingin kita beri penekanan, misalnya quotes, tips, atau mungkin puisi jika kita sedang menulis artikel puisi. Cara membedakan antara tulisan tersebut kita bisa menggunakan blockquote otomatis yang sudah tersedia dari blognya(untuk blogger), atau membuat elemen tersendiri yang intinya untuk membuat area teks yang kita inginkan berbeda dengan teks lainnya.

Contoh kotak quotes pada postingan blog

Jika menggunakan blockquote dari blog, kita tidak perlu repot-repot menulis tag script untuk membuat area teks yang berbeda. Namun kita tidak bebas mengcustom model area, warna, atau bahkan lebar area teks tertentu yang kita inginkan. Jika menggunakan blockquote otomatis dari blog, kita hanya akan mendapat satu macam model area teks tergantung dari template yang kita gunakan. Misalnya, pada template blog saya blockquote otomatisnya seperti ini

Ini blockquote otomatis blog saya

Nah, jika kamu menginginkan nuansa berbeda pada setiap area teks yang kamu inginkan, kamu bisa mengikuti cara yang saya lakukan. Misalnya kamu membuat artikel tentang kumpulan kata-kata bijak, atau kumpulan puisi namun antara kata-kata atau puisi yang satu dengan yang lainnya ingin kamu beri area yang berbeda-beda, maka kamu bisa mengikuti langkah di bawah ini.

Cara Membuat Kotak Area Quotes

Pertama-tama kamu buat posting seperti biasa.
Nah, di halaman posting artikel, silakan kamu tulis artikel seperti biasanya. Lalu saat kamu sampai pada bagian yang ingin kamu beri area berbeda, silakan kamu enter/beri jarak. Selanjutnya kamu lihat di pojok kiri atas halaman posting artikel kamu, di situ ada tulisan Compose dan HTML. Nah itu merupakan mode kita dalam menulis artikel, Compose itu seperti biasanya dan HTML itu mode menulis dengan tag-tag html. Sekarang kalian klik yang HTML.
Sekarang kalian akan melihat tampilan yang sedikit bikin pusing(kalau yang benar-benar ngga tau codingan). Jangan dibikin pusing ya, silakan kalian beri jarak kursor kalian dengan tulisan di atasnya.

Nah, di mode html ini tidak masalah kalian beri jarak berapapun, karena untuk memberi(enter) dalam mode html kita menggunakan tag <br> , jadi walau dikasih jarak berapapun tidak akan terbaca sebagai enter jika tidak menggunakan tag tersebut. Tujuan kita memberi jarak yaitu biar ngga pusing lihat tulisannya kecampur-campur.
Lalu untuk membuat area yang berbeda, kalian tinggal copy salah satu script yg ada di bawah, maka akan muncul area seperti area pada script yang kalian copy. (Script-scriptnya saya tulis di bawah ya)
Sekarang pindah ke mode Compose lagi(lihat pojok kiri atas layar, lalu klik Compose) . Terakhir tinggal ganti "tulis quotes, puisi, dan lain-lain di sini" dengan tulisan yang kalian inginkan. Untuk membuat area berbeda lagi, kalian tinggal ulangi langkah-langkahnya

Script-script untuk langkah no 4

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background: rgba(160, 221, 39, 0.3); border-left: 4px solid #a0dd27; border-radius: 10px; padding: 10px;">
Tulia quotes, puisi, dan lain-lain di sini
</div>
<br />

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background: rgba(108, 221, 39, 0.3) border-radius: 10px; border: 3px dashed #6cdd27; padding: 15px;">
Tulis quotes, puisi, dan lain-lain di sini
</div>
<br />

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: rgba(160, 221, 39, 0.3); border-left: 4px solid #a0dd27; border-radius: 10px; padding: 10px;">
Tulis quotes, puisi dan lain-lain di sini
</div>
<br />

<div style="background: rgba(217 , 221 , 39, 0.3); border-radius: 10px; border-top-color: rgb(217 , 221 , 39); border-top-style: solid; border-top-width: 4px; padding: 10px;">
Tulis quotes, puisi, dan lain-lain di sini
</div>
<br />

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background: rgba(221 , 154 , 39 , 0.3); border-radius: 10px; border-top: 4px solid #dd9a27; padding: 10px; width: 75%;">
Tulis quotes, puisi dan lain-lain di sini
</div>
<br />

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background: rgba(168, 39, 219, 0.3); border-radius: 10px; border-top: 4px solid #a827db; float: right; padding: 10px; width: 75%;">
Tulis quotes, puisi, dan lain-lain di sini
</div>
<br />

Keterangan :

Untuk mengubah lebar kotak kalian tinggal ubah nilai width
Untuk mengatur lengkungan kotak, kalian bisa ubah nilai border-radius, -webkit-border-radius, dan -moz-border-radius( di atas tertulis 10px). Atau kalau ingin tidak ada lengkungan(bentuk kotak) hapus border-radius, -webkit-border-radius, dan -moz-border-radius
Mengubah warna border, ubah nilai border-right/border/border-top( format di atas adalah ukuran tipe #kodewarna)
Untuk height sebaiknya auto saja agar tinggi kotak mengikuti tulisan kita.
Untuk mengubah warna background, kalian tinggal ubah nilai background. Di atas saya menggunakan rgba pada backgroundnya karena saya ingin membuat warna background yg sama dengan bordernya tapi transparansinya di ubah. Kalau kalian mau isi nilai background dengan kode hexa(#kodewarna) pun tidak masalah.

Nah untuk kode warna kan ngga mungkin dihafalkan. Jadi untuk melihat kode warna yang kalian inginkan silakan ke google dan search "color picker" nanti akan muncul hasil seperti dibawah ini.

Kalian tinggal klik-klik/geser-geser pada warna yang kalian inginkan, selanjutnya tinggal copy kode warna yang muncul.

Sebenarnya kotak-kotak area seperti di atas kalau di tutorial lain biasanya untuk kotak script. Namun saya rasa kurang cocok, karana yang kita butuhkan dalam kotak script yang utama adalah indentation dan syntax highlighter(warna setiap tag berbeda). Saya rasa area-area seperti di atas lebih cocok untuk kotak quotes. Karena jika kalian memposting kumpulan quotes atau puisi misalnya, namun semua itu(puisi/quotes) dalam bentuk gambar maka ngga kebayang beratnya loading blog kalian.

Nah, cukup sekian tulisan kali ini. Sampai di sini ada yang ingin ditanyakan? Kalau ada jangan sungkan sampaikan pertanyaan kalian melalui kolom komentar, terima kasih, semoga bermanfaat.