Blogger Tips Cara tulis kode css tag html untuk membuat bingkai border garis menarik dalam postingan Selamat Monday petang, blogger mania! Border atau bingkai garis seringkali dipakai para blogger mempercantik tampilan postingan biar tampak menarik. Selain itu, digunakan untuk menandai sebuah tulisan teks yang dianggap penting di dalam halaman artikel, atau pula untuk memberi peringatan atau pesan menarik kepada para pengunjung agar memperhatikan kalimat yang diberi bingkai garis tersebut. Nah, untuk membuat border di postingan, diperlukan elemen HTML yaitu DIV atau tag <DIV>. yang diberi bermacam atribut style. Contoh bingkai paling simpel, kode htmlnya sebagai berikut
<div style=”border: 2px solid black;” > isi teks dalam bingkai </div>
Atau sobat blogger bisa mengkombinasikan dengan kode CSS (Casscading Style Sheets). Caranya: pada bagian #nama_selector harus sama dengan nama_id didalam tag <div>) disertai properti border-style: atau border: Contoh bingkai paling minim, kode CSS & HTML nya sebagai berikut
<style> #namalabel { “border: 2px solid red;” } </stye>.
<div id=”namalabel” > isi teks dalam bingkai </div>

Nah, lebih jelasnya berikut ini tips cara penulisan kode atribut dan tag HTML yang lengkap untuk membuat bingkai/border menarik ke dalam postingan, yaitu:

  • Teks yang diberi bingkai garis solid

    Untuk menyalin kode HTML klik dibawah ini dan tekan Ctrl X
    &#10Untuk menyalin kode CSS dan HTML bingkai diatas, klik dibawah ini dan tekan Ctrl X

  • Teks yang diberi bingkai garis titik-titik (dot)

    Untuk menyalin kode HTML dibawah ini, klik dibawah ini dan tekan Ctrl X

  • Teks diberi bingkai garis putus-putus

    Untuk membuat bingkai menarik dengan garis putus-putus seperti contoh diatas, maka pada atribut style border: harus ditambah kode dashed.

    Untuk menyalin kode HTML bingkai diatas, klik dibawah ini dan tekan Ctrl X

  • Teks yang diberi bingkai garis outset

    Untuk menyalin kode HTML dibawah ini, klik dibawah ini dan tekan Ctrl X

  • Teks yang diberi bingkai garis inset

    Untuk menyalin kode HTML bingkai diatas, klik dibawah ini dan tekan Ctrl X
    &#10&#10

  • Teks yang diberi bingkai garis dobel (ganda)

    Untuk menyalin kode HTML bingkai diatas, klik dibawah ini dan tekan Ctrl X

  • Untuk menyalin kode HTML bingkai diatas, klik dibawah ini dan tekan Ctrl X

  • Untuk menyalin kode HTML bingkai diatas, klik dibawah ini dan tekan Ctrl X

Keterangan dan fungsi atribut-atribut pada style kode CSS & HTML diatas antara lain:

  1. border-style: atribut style ini memang khusus mengatur bermacam bentuk garis pada bingkai namun bisa secara spesifik, nilainya valuenya bisa satu saja seperti contoh “border-style:solid” (garis solid), atau “border-style:dotted” (garis bingkainya titik-titik), atau juga “border-style:dashed” (garis terputus-putus) dan masih banyak lagi. Jika spesifik bentuknya dengan kombinasi contohnya: “border-style: dotted dashed solid double”. Ada pula nilai valuenya jika sobat ingin bentuk garis bingkainya warnanya berbeda antara batas atas dan bawah garisnya, yaitu “inset” atau “outset”.
    Lebih jelasnya, “inset” membuat warna garis bingkai dibagian atasnya lebih tua daripada dibawahnya sedangkan “outset” warna garis dibagian atas bingkai lebih muda daripada dibawahnya. Umumnya cukup menggunakan atribut style “border:” saja sudah cukup sekaligus warna dan tebal garisnya. Contoh “border: 2px green solid”.
  2. border-color: atribut sytle ini khusus mengganti warna garis pada bingkai saja, nilai valuenya bisa diisi dengan kode hex dan kode warna dalam bahasa inggris. Misalnya: “border-color:blue” (untuk warna biru), “border-color:yellow” (kuning), “border-color:green” (hijau) dan lain-lain. Namun lebih cepat pewarnaan garis pada bingkai, bisa cukup dari atribut style “border:”. Contoh “border: 2px double green”
  3. teaxtalign: atribut style ini khusus untuk mengubah perataan teks misalnya ke tengah, ke kiri atau ke kanan. Contohnya untuk perataan kiri, di atribut style CSS atau HTML tulisannya seperti ini: “textalign:left”. Atau ingin perataan tengah, “textalign: center” atau perataan teks ke kanan, di kode CSS atau HTML ganti saja tulisannya dengan “textalign: rigt”
  4. border-width:, atribut style ini khusus untuk mengubah tebal garis pada bingkai misalnya menjadi 16px, maka tribut style-nya masukin nilainya “border-width: 16px”. Namun lebih simpel lagi cukup menggunakan atribut style “border:” saja bisa mengatur tebal garis bingkai plus bentuk dan warna bingkai. Contoh “border: dotted 16px red”.
  5. width:, atribut style ini untuk mengatur lebar bingkai misalnya “width: 400px” atau bisa dalam persen. Misalnya “width: 100%” akan membuat lebar bingkai sama dengan lebar kolom halaman web.
  6. height:, atribut style ini untuk mengubah tinggi bingkai misalnya “height:50px” untuk mengubah tinggi bingkai menjadi 50px.
  7. padding:, atribut sytle ini fungsinya untuk mangatur spasi/ruang/jarak antara konten didalam bingkai dengan garis bingkai. Contohnya dengan jarak 5 pixel “padding:5px”

Nah, gampang bukan! Itulah sedikit tips cara membuat bingkai/border menarik di postingan blog. Semoga artikel tips ini berguna.

Penulis mempublikasikan postingan ini hari Friday tanggal 31 January 2014 jam 08.48 di kategori Tips Kode HTML, Tips Kode JavaScript, Tips Wordpress/Blogger.
Dimohon setiap pengunjung agar tak melipatgandakan materi website ini ke bentuk apapun tanpa izin penulis. Jika sebagian isi konten/kode HTML/link gambar website ini diedit lalu copy-paste ke blog lain, harap cantumkan alamat link website ini sebagai sumber atau bisa copy kode HTML ini (Ctrl X): .

Ok. Demikianlah postingan Tips: Cara membuat bingkai garis menarik dengan kode CSS dan HTML di postingan BLOG. Semoga artikel ini bisa bermanfaat dan menambah wawasan anda. Sekian terima kasih atas kunjungannya. Silahkan membagi artikel ini ke teman atau kenalanmu dengan mengklik salah satu sharing ikon dibawah!
Facebook Google Twitter Whatsapp
dan Jangan lupa tinggalkan pesan/komentar/saran apapun yang baik & berguna dibawah ini!

2 Komentar di “Tips: Cara membuat bingkai garis menarik dengan kode CSS dan HTML di postingan BLOG”

  1. farmie agusni mengirim komentar:

    kalo buat html bingkai sendiri bisa gak?


  2. siswoyo mengirim komentar:

    sangat bermanfaat gan.. langsung ane terapin :D

    jasa web design murah