Pilih Warna Baground Yang Anda Suka
Latest

Cara Membuat Border di Postingan Blog

kevinservis 27 Mar 2013

Tutorial | Border biasanya digunakan untuk menandai suatu teks atau tulisan yang dianggap penting di postingan pada blog. Dengan kata lain, pembaca diajak untuk lebih memperhatikan kalimat yang diberi border tersebut. Selain itu, adanya border ini juga dapat mempercantik tampilan postingan. Blogger Tutorial mau berbagi koleksi bordernya diantaranya :
Preview 
 

Untuk membuat border di postingan, diperlukan kode CSS atau Casscading Style Sheets. Border ini mempunyai beberapa macam atau style, diantaranya adalah border style solid dan border style dot. Berikut ini kode CSS untuk kedua macam style border tersebut.

Border Style Solid

<div style="border: 2px solid red; height: 20px; padding: 5px; text-align: left; width: 200px;">
Border Style Solid</div>

Maka hasilnya seperti di bawah ini.

Border Style Solid

  • border: 2px solid red; menunjukkan ketebalan tepi border sebesar 2 piksel dan bergaya solid dengan warna merah (red). Bila ingin lebih tebal lagi, silakan ganti angka 2 dengan angka yang lebih besar lagi. Kalau mau ganti warna, silakan ganti kata red dengan warna yang lain, misalnya blue untuk biru, dan lain sebagainya.
  • height: 20px; menunjukkan tinggi border sebesar 20 piksel. Bila ingin lebih tinggi lagi, silakan ubah angka 20 dengan angka yang lebih tinggi lagi nilainya.
  • padding: 5px; menunjukkan jarak antara tulisan dengan tepi border sebesar 5 piksel. Jika ingin diubah, silakan diganti angkanya. Makin besar angkanya makin renggang jaraknya.
  • text-align: left; menunjukkan perataan tulisan. Left untuk rata kiri, right untuk rata kanan, center untuk rata tengah, justify untuk rata kanan kiri.
  • width: 200px; menunjukkan lebar border sebesar 200 piksel. Jika ingin lebih lebar lagi, silakan diganti angka 200 dengan angka yang lebih tinggi lagi nilainya.

Border Style Dot

<div style="border: 2px dotted green; height: 20px; padding: 5px; text-align: center; width: 200px;">
Border Style Dot</div>

Maka hasilnya seperti di bawah ini.

Border Style Dot


Selain dua jenis border di atas masih ada lagi beberapa tipe border yang lainnya. Berikut ini beberapa style border yang lainnya.


Border Style Dash

<div style="border: 2px dashed blue; height: 20px; padding: 5px; text-align: right; width: 200px;">
Border Style Dash</div>

Maka hasilnya seperti di bawah ini.

Border Style Dash


Border Style Outset

<div style="border: 2px outset yellow; height: 20px; padding: 5px; text-align: left; width: 200px;">
Border Style Outset</div>

Maka hasilnya seperti di bawah ini.

Border Style Outset


Border Style Inset

<div style="border: 2px inset yellow; height: 20px; padding: 5px; text-align: right; width: 200px;">
Border Style Inset</div>

Maka hasilnya seperti di bawah ini.

Border Style Inset


Border Style Double

<div style="border: 5px double green; height: 20px; padding: 5px; text-align: center; width: 200px;">
Border Style Double</div>

Maka hasilnya seperti di bawah ini.

Border Style Double


Border Style Multiple

<div style="border-color: purple; border-style: dotted dashed solid double; border-width: 6px; height: 20px; padding: 5px; text-align: center; width: 200px;">Border Style Multiple</div>

Maka hasilnya seperti di bawah ini.

Border Style Multiple


Border Style Ridge

<div style="border: 10px ridge red; height: 20px; padding: 5px; text-align: left; width: 200px;">
Border Style Ridge</div>
 
Maka hasilnya seperti ini :

Border Style Ridge

Wah lengkap yah, postingan Blogger Tutorial kali ini cukup sampai disini, semoga bermanfaat ya sobat :-)
Share this article :

Ditulis Oleh : kevinservis ~ http://kevinservis.blogspot.com/

Artikel Cara Membuat Border di Postingan Blog ini diposting oleh kevinservis pada hari 27 Mar 2013. Terimakasih atas kunjungan Sobat serta kesediaan Sobat membaca artikel ini, Kritik dan saran dapat Sobat sampaikan melalui kotak komentar , Mohon jangan pasang Link hidup di komentar contoh Link hidup google , yahoo , bing , alexa yang diperbolehkan di kotak komentar contoh Link http://blogspot.com Terimakasih



Artikel terkait:

 

Posting Komentar

 
Copyright © 2013. Cikevin - All Rights Reserved
Powered By Blogger