5 Cara Membuat Border Untuk Kutipan Kalimat di dalam postingan




Membuat Kotak atau Border pada KalimatBlogger | Coepoe - 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 MERAH : Bisa di edit sesuai dengan selera dan kebutuhan  
TEXT BIRU : Isi kutipan paragraf yang di border


Silahkan di coba untuk di terapkan di blog temen-temen. Semoga informasi atau tip yang saya berikan mengenai "Cara Membuat Border Untuk Kutipan Kalimat di dalam postingan" bermanfaat buat kalian.

Salam,
Blogger Coepoe

5 komentar:

Tas Ulang Tahun mengatakan...

Mantab nih, ternyata caranya sangat mudah yah, keren jadinya. Makasih tutorialnya

fsCo mengatakan...

makasih gan ini yang ane cari :))

Anonim mengatakan...

ko ane ga bisa ya ? malah tu script keliatan di tampilan blog ane

Bima Trisnu mengatakan...

Mantap gan,, triknya sudah saya pakai di postingan yang ini
http://bima-trisnu.blogspot.com/2013/06/cara-download-film-di-ganoolcom.html

Jangan lupa visit blog saya jg ya

Terimakasih :D

niwana sod mengatakan...

makasih artikelnya sangat bermanfaat dan jelas tutorialnya, semoga berkah untuk semunaya.

Posting Komentar

Komentar ini di moderasi, silahkan berkomentar dan jangan beri link di kolom komentar. Cukup di kolom URL yang di berikan saja :) Thx kunjungannya