Membuat kotak Kutipan, Quotes dan link pada artikel di blog

YG Tech blog. Bagaimana caranya membuat kotak kutipan / Quotes yang ada di dalam artikel pada blog? kotak yang biasanya terdapat dalam sebuah artikel memiliki peranan yang penting, sebab tulisan tersebut memberi pesan khusus sehingga akan mudah terlihat dan akan menarik perhatian bagi pembaca blog, Sehingga pembaca akan melakukan tindakan-tindakan atau bisa memahami dengan cepat tentang pesan yang ingin disampaikan oleh penulis artikel.

Dalam kesempatan kali ini kami akan mengulas tentang cara dan langkah-langkah membuat kotak yang ada dalam artikel, berikut ulasannya.

Cara Membuat Kotak Area 

Pertama-tama kamu buatlah postingan seperti biasa, di halaman postingan artikel, Lalu saat kamu sampai pada bagian yang ingin kamu beri area berbeda ( Kotak ), silakan kamu beri jarak. Selanjutnya kamu lihat di pojok kiri atas halaman posting artikel kamu, di situ ada tulisan Compose dan HTML.  itu merupakan mode dalam menulis artikel, Compose akan menampilkan bidang untuk mengetik seperti biasanya dan HTML mode menulis dengan tag-tag html. Sekarang klik yang HTML.

Di mode html ini, 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 agar memperjelas bidang yang akan kita beri kotak.

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 di copy.

Selanjutnya pindah ke mode Compose lagi(lihat pojok kiri atas layar, lalu klik Compose) .

Terakhir tinggal ganti "tulis quotes, Kutipan, Link dan lain-lain di sini" dengan tulisan yang kalian inginkan. Untuk membuat area berbeda lagi, ulangi langkah-langkahnya

Inilah script-script atau kode HTML yang digunakan untuk membuat kotak.

<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;">
Tulis quotes, kutipan, link 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, kutipan, link, 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, kutipan link 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, kutipan, link, 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, kutipan, link 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, kutipan, link 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-radiusMengubah 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 hanya menggunakan rgba pada backgroundnya karena  ingin membuat warna background yg sama dengan bordernya tapi transparansinya di ubah. Kalau mau isi nilai background dengan kode hexa(#kodewarna) pun tidak masalah.
Untuk melihat kode warna yang di inginkan silakan ke google dan search "color picker" sebab tidak mungkin di hafalkan satu per satu.

Itulah cara membuat kotak yang ada dalam sebuah artikel di blog, Semoga bermanfaat.