Bi2t dot Com

Bibit We Es - Berita Terbaru, Kabar Terkini, Hot News, Belajar Blog, Bisnis Online, Personal Web dan Make Money Online

GRATIS Gems COC Terbaru
Home » CSS dan HTML » Membuat Border | Warna Beda Pada Script di Posting

Membuat Border | Warna Beda Pada Script di Posting

Oleh: beat2ws at

Sebenarnya saya ragu untuk menjadikan judul di atas sebagai judul artikel ini. Karena memang saya bingung yang mau saya tulis ini border atau bukan. Semoga saja benar. Border disini saya artikan sebagai kotak unik dengan garis tepi, yang sering saya gunakan untuk menulis script atau kode apapun agar lebih unik. Bisa dikatakan juga highlight script pada posting atau warna beda untuk script/kode/html di posting.

Awalnya saya terinspirasi dari kode-kode dalam pembuatan text area cantik. Dari situlah saya bisa membuat border yang cantik juga.

Border berwarna dan jenis-jenis garis bordernya

» Solid Border
<div style="border: 2px #006400 solid; padding: 10px; background-color: #c3fdb8; text-align: left;"> TULIS SCRIPT/KODENYA DISINI </div>


» Ridge Border
<div style="border: 2px #006400 ridge; padding: 10px; background-color: #c3fdb8; text-align: left;"> TULIS SCRIPT/KODENYA DISINI </div>


» Groove Border
<div style="border: 2px #006400 groove; padding: 10px; background-color: #c3fdb8; text-align: left;"> TULIS SCRIPT/KODENYA DISINI </div>


» Inset Border
<div style="border: 2px #006400 inset; padding: 10px; background-color: #c3fdb8; text-align: left;"> TULIS SCRIPT/KODENYA DISINI </div>


» Outset Border
<div style="border: 2px #006400 outset; padding: 10px; background-color: #c3fdb8; text-align: left;"> TULIS SCRIPT/KODENYA DISINI </div>


» Double Border
<div style="border: 2px #006400 double; padding: 10px; background-color: #c3fdb8; text-align: left;"> TULIS SCRIPT/KODENYA DISINI </div>


» Dotted Border
<div style="border: 2px #006400 dotted; padding: 10px; background-color: #c3fdb8; text-align: left;"> TULIS SCRIPT/KODENYA DISINI </div>


» Dashed Border
<div style="border: 2px #006400 dashed; padding: 10px; background-color: #c3fdb8; text-align: left;"> TULIS SCRIPT/KODENYA DISINI </div>



Border dengan scroll, lebar dan tinggi

<div style="border: 2px #006400 solid; padding: 10px; background-color: #c3fdb8; overflow: auto; height: 50px; width: 300px; text-align: left;"> TULIS SCRIPT/KODENYA DISINI </div>


Keterangan:
Anda dapat mempelajari kode-kode yang saya beri warna berbeda.

Share on Facebook
Share on Twitter
Share on Google+
Tags :

Membuat Border | Warna Beda Pada Script di Posting sudah dibaca? Ini artikel lainnya:

  • Cara Membuat Spoiler dan MemodifikasinyaMasih ingat artikel yang berjudul membuat tombol jika di klik muncul teks/gambar?, ternyata namanya spoiler. Berhubung tadi saya berhasil utak-atik kode spoilernya, maka ...
  • Kode Warna Hexadecimal (HTML)Dalam kegiatan ngeblog, baik menggunakan PC maupun yang ngeblog dengan HP, untuk mempercantik tampilan blog pasti memerlukan kode-kode warna HTML (hexadecimal). Padahal ...
  • Membuat Recent Posts (Artikel Terbaru) Berdasarkan LabelCara menampilkan posting terbaru menurut kategori sama halnya dengan cara membuat recent posts di blog. Hanya saja dalam membuat atau menampilkan recent posts berdasarka ...
  • Membuat Blockquote Cantik Sebelum melanjutkan postingan tentang cara pasang gambar/foto di posting lewat HP yang sampai artikel ini diterbitkan sudah sampai pada cara kedua yang lebih mudah, kin ...
  • Memasang Link Kotak Komentar Lama (Tipe Klasik/Old Form)Ternyata belum cukup Blogger memanjakan penggunanya dengan memberi fasilitas kotak komentar di bawah posting, nyatanya ada seseorang yang bertanya disini tentang cara me ...