Cara Membuat Border Untuk Kutipan Kalimat di dalam postingan

Blogger | Scholovers - Membuat border atau garis tepi untuk kutipan sebuah paragraf, demikian topik untuk postingan kali ini yang berjudul "Cara Membuat Border Untuk Kutipan Kalimat di dalam postingan". Dalam artikel yang kita buat seringkali kita memberikan penegasan-penegasan baik itu kata ataupun kalimat yang berisi informasi penting. Bisa dengan menandai dengan warna yang berbeda, bold, garis bawah (Underline), tulisan miring atau kombinasi keempatnya.

Kali ini saya mencoba memberikan tutorial untuk memberikan penegasan pada sebuah paragraf kalimat dengan bentuk Border yang mengelilingi kalimat yang kita tekankan. Fungsi ini akan membantu pembaca melihat mana bagian-bagian yang penting atau hanya sekedar hiasan dan tentunya membuat artikel yang kita posting terlihat lebih rapi dan keren :)

Tanpa panjang lebar, langsung saja melihat beberapa kutipan kalimat di bawah dengan melihat contoh secara langsung.

MODEL 1 : Cara membuat border yang berbentuk dot untuk kutipan kalimat seperti yang terlihat di contoh ini. Bagaimana caranya ? silahkan lihat script di bawah ini. Script di bawah masih bisa di modif sesuai selera masing-masing, silahkan di coba-coba :)

Script Model 1 :

<div style="background-color: #fcf8c0; border: dotted 3px #FF9900; padding: 5px;"> MODEL 1 : Cara membuat border yang berbentuk dot untuk kutipan kalimat seperti yang terlihat di contoh ini. Bagaimana caranya ? silahkan lihat script di bawah ini. Script di bawah masih bisa di modif sesuai selera masing-masing, silahkan di coba-coba :) </div>

MODEL 2 : Cara membuat border dengan style garis untuk kutipan kalimat seperti yang terlihat di contoh ini. Kotak border dengan sebagian ada garis, sebagian tidak seperti contoh di kalimat ini. Bagaimana caranya ? silahkan lihat script di bawah ini. Silahkan di kembangkan kalau ada sobat yg suka utak atik :)

Script Model 2 :

<div style="background-color: #fcf8c0; border: dotted 3px #FF9900; padding: 5px;"> <div style="border-color: orange; border-style: none solid solid none; border-width: 10px; font-style: italic; margin-bottom: -10px; padding: 10px 10px 10px 0px; text-align: justify;"> MODEL 2 : Cara membuat border dengan style garis untuk kutipan kalimat seperti yang terlihat di contoh ini. Kotak border dengan sebagian ada garis, sebagian tidak seperti contoh di kalimat ini. Bagaimana caranya ? silahkan lihat script di bawah ini. Silahkan di kembangkan kalau ada sobat yg suka utak atik :)</div>

MODEL 3 : Nah, ini model terakhir yang bisa saya berikan. Bentuk border dengan gaya sudut yang berbeda dengan sebelumnya, model ini berbentuk bulat atau "Rounded Corners". Saya tidak panjang lebar untuk menjelaskan. Silahkan di utak atik sendiri dengan merubah angka atau sekedar mengganti background dengan melihat scriptnya di bawah. Bagaimana, Keren bukan ?

Script Model 3 :

<span style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background: #fcf8c0; border-radius: 10px; color: #555555; float: left; font-family: Arial; font-size: 13px; line-height: 1em; margin: 9px 9px 0 0; padding: 8px 11px;">MODEL 3 : Nah, ini model terakhir yang bisa saya berikan. Bentuk border dengan gaya sudut yang berbeda dengan sebelumnya, model ini berbentuk bulat atau "Rounded Corners". Saya tidak panjang lebar untuk menjelaskan. Silahkan di utak atik sendiri dengan merubah angka atau sekedar mengganti background dengan melihat scriptnya di bawah. Bagaimana, Keren bukan ? </span>

Keterangan :  

TEXT BIRU :  Bisa di edit sesuai dengan selera dan kebutuhan.
 TEXT MERAH :   Isi kutipan paragraf yang di border.

By : Fauzi Scholovers