Membuat border background script berbeda warna

Cara membuat kotak dengan border pada posting blog atau web. Menggunakan kotak border dengan warna dan bentuk berbeda dapat menambah nilai lebih pada postingan. Selain itu tujuannya untuk memberikan sebuah penekanan terhadap pernyataan yang di anggap penting, unik ataupun peringatan. Mulai dari warna background, model dan warna border dapat diganti-ganti sesuai dengan keinginan. Berikut cara membuat dan menggunakan kotak border di posting blog.

Dalam fitur blog, sebenarnya sudah tersedia untuk membuat kotak berbeda, yaitu blockquate. Akan tetapi jika dalam satu postingan ada beberapa penekanan terhadap pernyataan, kalau memakai blockquote semua jadi akan terlihat membosankan dan kaku. Maka agar lebih menarik sehingga menjadi tampil cantik dengan membuat kode html untuk kotak-kotaknya (istilah pastinya tidak tahu) mungkin kalian ada yang tahu boleh share disini. Langsung saja dipraktikkan cara menggunakan bordernya…

Untuk membuat border pada postingan maka dalam penulisan kodenya harus dalam mode HTML, tanpa mode tersebut, maka akan dianggap sebagai teks biasa. Contoh border pertama kode html sebagai berikut :

<div style="border: 1px #c8c785 solid; background- width: 290px; padding: 10px; text-align: left;">Tulisan atau script HTML letakkan disini</div>

Hasilnya script di atas menjadi seperti di bawah ini

Tulisan atau script HTML letakkan disini

Kita akan mengenal beberapa jenis pola pembentukan border background seperti berikut ini :

SOLID

Tulisan/script HTML atau artikel blog letakkan disini

<div style="border: 1px solid #000000; background-color:#A9F5A9; padding: 5px;width: 330px;">Tulisan/script HTML atau artikel blog letakkan disini</div>

DOTTED

Tulisan/script HTML atau artikel blog letakkan disini

<div style="border: 1px dotted #000000; background-color:#81F7F3; padding: 5px;width: 330px;">Tulisan/script HTML atau artikel blog letakkan disini</div>

DASHED

Tulisan/script HTML atau artikel blog letakkan disini

<div style="border: 1px dashed #000000; background-color:#F4FA58; padding: 5px;width: 330px;">Tulisan/script HTML atau artikel blog letakkan disini</div>

DOUBLE

Tulisan/script HTML atau artikel blog letakkan disini

<div style="border: 4px double #000000; background-color:#BDBDBD; padding: 5px;width: 340px;">Tulisan/script HTML atau artikel blog letakkan disini</div>

GROOVE

Tulisan/script HTML atau artikel blog letakkan disini

<div style="border: 4px groove #000000; background-color:#FFFFFF; padding: 5px;width: 340px;">Tulisan/script HTML atau artikel blog letakkan disini</div>

OUTSET

Tulisan/script HTML atau artikel blog letakkan disini

<div style="border: 4px outset #000000; background-color:#FA5858; padding: 5px;width: 340px;">Tulisan/script HTML atau artikel blog letakkan disini</div>

RIDGE

Tulisan/script HTML atau artikel blog letakkan disini

<div style="border: 4px ridge #000000; background-color:#FAAC58; padding: 5px;width: 340px;">Tulisan/script HTML atau artikel blog letakkan disini</div>

Format lainnya sebagaimana contoh berikut ini

Tulisan/script HTML atau artikel blog letakkan disini

<textarea rows="1" cols="52">Tulisan/script HTML atau artikel blog letakkan disini</textarea>

Sekarang kita membuat kotak atau box quotenya (box text area)
Contoh 1

(Harus klik tombol select all text baru kode script atau tulisan bisa di copy)

TARUH TULISAN ANDA DISINI LALU KLIK SELECT ALL TEXT DAN COPY

<form name="MyTextBoxForm"><br><input onclick="javascript:this.form.MyTextBox.focus();this.form.MyTextBox.select();" name="button" value="Select All Text" type="button"><br><textarea cols="25" name="MyTextBox" rows="5" wrap="off">TARUH TULISAN ANDA DISINI</textarea></form>

Contoh 2
(Klik pada area text anda langsung bisa copy)

TARUH TULISAN ANDA DISINI COBA KLIK

<p align="left"><textarea onclick="this.focus();this.select();" name="code" rows="3" cols="30">TARUH TULISAN ANDA DISINI COBA KLIK</textarea></p><p></p>

Letakkan postingan anda disini (bentuk yang satu ini agak melengkung)

<div style="-moz-background-clip: -moz-initial; -moz-background-inline-policy: -moz-initial; -moz-background-origin: -moz-initial; -moz-border-radius-bottomleft: 50px; -moz-border-radius-topright: 50px; background: #eeeeee none repeat scroll 0% 0%; border: 4px solid #dddddd; overflow: auto;"><blockquote>Letakkan postingan anda disini (bentuk yang satu ini agak melengkung)</blockquote></div>

Teks dibawah terlihat seperti contoh penggunaan script yang telah dijelaskan sebelumnya. Namun sebetulnya berbeda memang tidak mencolok perbedaannya. Ini dinamakan highlights post yaitu membuat tulisan secara otomatis memiliki bentuk background sendiri. Mari lihat cara membuatnya.

Selamat mencoba semua cara diatas mudah-mudahan berhasil dan ada manfaatnya buat kalian

Pergi ke dashboard pilih rancangan kemudian klik edit html dan cari kode ini ]]></b:skin> lalu letakkan script berikut persis diatasnya

.alert { background: #DDE4FF;
text-align: left;
padding: 5px 5px 5px 5px;
border-top: 1px dotted #223344;border-bottom: 1px dotted #223344;border-left: 1px dotted #223344;border-right: 1px dotted #223344;}

Kalau sudah save template kalian. Tiap kali ingin menggunakan cara ini kalian cukup menambahkan kode berikut <p class="alert">Tulis artikel mulai dari sini</p> nanti akan tampak seperti contoh diatas

Dapatkan berbagai informasi menarik dengan mengunjungi link yang ada dalam blog ini mulai dari bisnis online, lowongan kerja, tips blogging dll. Pilih berdasarkan kategori yang anda minati lalu masukkan kata kuncinya dan klik cari informasi sekarang

Masukkan istilah pencarian Anda Kirim formulir pencarian

Kategori --> Web ipanelonlineku.blogspot.com Lowongan kerja Bisnis online

Blog ini tidak memiliki kerja sama dengan pihak manapun semua hasil yang didapatkan berasal dari kerja keras penulis mengoptimalkan blog secara berkala. Anda bisa siapapun juga bisa asal ada usaha

Kekayaan sesungguhnya adalah ilmu yang terus di kembangkan tidak pernah bosan belajar hal baru terlebih ilmu itu bermanfaat bagi orang lain. Percayalah ilmu yang anda bagi kepada mereka sampai kapanpun tidak pernah berkurang justru semakin bertambah.