Membuat kotak informasi menarik di blog

Posted by Abdul Roqib | Saturday, February 13, 2010 33 comments
Salah satu cara agar tampilan website/blog lebih menarik dan informatif adalah dengan menambahkan CSS (Cascading Style Sheet). Tetapi kali ini tidak akan dibahas apa itu CSS, tetapi langsung menerapkan dan mencoba untuk membuat kota informasi, peringatan, atau sejenisnya dalam sebuah tulisan di web/blog dengan salah satu fungsi/kode CSS.


Hal ini bisa kita lakukan dengan kode (tag) HTML div. DIV merupakan kode HTML yang akan menghasilkan blok paragraf, biasa saya istilahkan dengan Box. Karena dengan menuliskan paragraf atau kalimat diantara tag <div>....</div>, maka kalimat/paragraf terseut akan tampil dalam box yang bisa kita atur tampilannya. Untuk memudahkannya, berikut berbagai contoh dan penggunaan tag DIV.

color dan background



Kotak ini adalah penggunaan dengan kode HTML berikut :

<div style="color:red;background:yellow;"> ... </div>

Perhatikan bagian setelah style. bagian itulah yang menentukan tampilan box dengan menggunakan DIV. Kode diatas menggunakan 2 atribut, yaitu color dan background. Color akan menentukan warna text dan background menentukan warna latar. Perhatikan pula penulisan tanda titik dua dan titik koma.
Atribut warna bisa diisi dengan tulisan seperti : black, blue,green, yellow, red, white dan lainnya. Bisa juga dengan menggunakan kode Heksadesimal, misalnya #FFFFFF untuk putih #0000FF untuk biru dan lainnya. Untuk mempermudah memilih warna terbaik, bisa menggunakan program gratis ColorPic


border


Pada kotax/box sebelumnya, warna kuning terlihat tanpa garis tepi. Akan lebih menarik jika kita meambahkan garis tepi di sekelilingnya. Hal ini bisa dilakukan dengan menambahkan atribut border. Contohnya sebagai berikut:


Kotak ini adalah penggunaan dengan kode HTML berikut :

<div style="color:blue;background:#EBF3FB;border:1px solid #AACCEE;"> ... </div>


Penjelasan nilai setelah border adalah sebagai berikut : 1px menandakan ketebalan garis ( 1 pixel merupakan satu garis tipis), solid merupakan bentuk atau rupa garis dan #AACCEE merupakan warna garis. Masing-masing dipisahkan dengan tanda spasi.


Untuk bentuk (style) border selain solid, juga bisa bernilai none, hidden, dotted, dashed, double, groove, ridge, inset, outset dan inherit. Contoh masing-masing bisa dilihat tutorial CSS border

padding dan margin


Pada box sebelumnya tulisan dalam kotak terlihat terlalu rapat dengan garis tepi (baik kiri, atas, kanan atau bawah). Agar tampilan lebih indah, maka tulisan bisa dibuat agar mempunyai jarak dengan garis tepi (lebih menjorok kedalam). Hal ini bisa kita lakukan dengan menambahkan atribut padding. Berikut contohnya :

Kotak ini adalah penggunaan dengan kode HTML berikut :

<div style="color:#990099;background:#ADE4AD;border:2px dashed #006600;padding:5px;margin:10px;"> ... </div>


Nilai padding:5px, berarti tulisan dalam box masuk kedalam sepanjang 5 pixel (1 pixel adalah satu garis tipis). Sebenarnya nilainya bisa diisi lebih detail misalnya padding:2px 3px 4px 5px, yang berarti jarak dari garis atas 2 pixel, dari kanan 3 pixel, bawah 4 pixel dan kanan 5pixel. Urutannya dari atas-kanan-bawah-kiri.

Untuk margin hampir sama dengan padding, hanya saja untuk margin menentukan jarak kotak ke area diluarnya (dari garis tepi keluar, mulai atas-kanan-bawah-kiri). Pada contoh tampilan diatas (yang berwarna hijau), tampak box posisinya menjorok kedalam. Karena margin:10px, maka posisi box sejauh 10 pixel dari atas, kanan, bawah dan kiri. Pengisian juga bisa dilakukan seperti padding

width (lebar box)


Dengan kode-kode seperti diatas, maka panjang box akan selebar konten atau area yang tersedia. Untuk membatasi lebar kotak, kita bisa menggunakan atribut width. Berikut contohnya:



Kotak ini adalah penggunaan dengan kode HTML berikut :

<div style="color:#FFFFFF;background:#FFD4AA;border:2px dotted #FF2A00;padding:5px;margin:5px;width:300px;"> ... </div>


properti width akan mengatur dan membatasi ukuran box. pada contoh di atas, nilainya adalah 300 pixel. Sebenarnya masih banyak atribut lain yang bisa disertakan, tetapi sementara 6 atribut diatas sudah cukup untuk membuat tulisan lebih informatif (dengan pemilihan warna yang tepat tentunya).

Satu hal yang perlu diperhatikan ketika menuliskan kode tersebut (dalam menulis artikel) adalah harus dalam mode HTML, bukan dalam mode visual.

33 comments: to "Membuat kotak informasi menarik di blog"

putra said...

Nah, ini yang saya cari ,,,
Thanks Om ,,
langsung saya save page ya ..

Tips Blackberry said...

Siip dech atas tutorialnya, jadi kita bisa lebih memberikan fokus pada informasi supaya visitor membaca yang benar-benar ingin kita sampaika. Thanks!

Ngeposting ni yee said...

tHanks sCriptnYa sObat..,

kerja sambilan said...

wah luar biasa ini, trims atas info ini, aku akn buat kotak

Dimas P. Putra said...

mantap nih, klo ada tutorialnya jd gampang d'praktekin....
Lifestyle Inspiration

CUTAZA said...

keran nih mas.. lumayan bisa saya pake nih ilmunya

Dunia Komputer said...

Mantap infonya sob. Saya praktek dulu. Makasi ya.

Review Bisnis Online said...

Nice info sob. Kayanya bakalan lebih keren pake ini di blog. Thanks.

nowGoogle.com adalah Multiple Search Engine Popular said...

mantab, boleh dicoba di blogspotku, ma kasih ya

switch mode transformer said...

Your tips are remarkable. I regularly read your blog and its very helpful.

Tarecha Corp. Blog Award said...

selamat blog anda telah terpilih sebagai pemenang Tarecha Corp. Blog Award silahkan mengambil hadiahnya disini HATI HATI PENIPUAN PROMO INI TIDAK DIPUNGGUT BIAYA SAMA SEKALI

Alcohol Abuse Idaho said...

thanks infonya mampir lagi sekalian tukaran link banner and follow yukk !

tanya gratisan said...

oke banget triknya sob...

Mine Panama said...

Superb ! Your blog is incredible. I am delighted with it. Thanks for sharing with me.

nowGoogle.com Adalah Multiple Search Engine Popular said...

maksih banget tipsnya bro

Forantum I Blogging is My Life I Tutorial Blog I Tips dan Trik Blog I SEO I Free Template said...

Makasih tutorialnya...

Effendi said...

Matur nuwun tipnya.....semoga selallu berkembang

cosmeticdentistryguide.co.uk said...

Thanks for sharing a nice blog.I really like your post. The picture you have posted here is really very nice. Great post!
-------------------------------------------

pay per lead 2010 said...

wahhh patut dicoba nih

Pendi AW said...

makasih mas tutorialnya...

hosting profesional indonesia yang murah said...

nice tips, ma kasih

Irvan said...

Oh gitu toh caranya, di save dulu gan

irma JualBonekaAjaib said...

mo coba jg..thx bro..

Anonymous said...

Mau gak dapatin 1,5 juta dalam sebulan???

Jika anda ingin dapatin 1,5 juta sangat gampang sekali, persiapannya hanya perlu
1. punya akses internet (speedy atau modem internet (GSM / CDMA) atau warnet (tidak maksimal))
2. buka link http://tinyurl.com/2emx8c4 kemudian mendaftar
3. siapkan 10ribu untuk membayar administrasi pendaftaran
4. anda bekerja memberitahukan orang untuk mendapatkan uang 1,5 juta dalam sebulan,
setelah itu kamu akan juga dapatin 1,5 juta dalam sebulan. Pekerjaan ini sangat gampang, saya akan beritahu caranya: beritahukan melalui pasang iklan gratis seperti saya.
5. GampangKan???
6. Pasti gak bakalan rugi

jangan lupa buka link http://tinyurl.com/2emx8c4
kemudian daftarLah menjadi orang terkaya secara mendadak...
PASTI ANDA BISA dan SAYA YAKIN ANDA BISA MENJADI ORANG TERKAYA

membuat blog gratis said...

postin yang sangat bermanfaat..
terimakasih..
:-)

Dunia Download Gratis said...

beljar lagi hal baru kawan , thank buat tutorialnya kawan

Cara Beriklan Di Internet said...

ok bnget infonya gan

Shio 2011 said...

info yang bagus gan

UdaRusdi Cs said...

wah mantap benarnih artikelnya,tak praktekin ya mas...salam sukses

PELANGI HOLIDAY said...

salam hormat kunjung balik mas...

solusi mengobati kanker darah said...

keep blogging moga jadi ilmu yang berguna,,,

pengobatan tradisional demam berdarah said...

mantap infonya,,patut dicoba,,moga berhasil,,makasih dan sukses slalu,,,

nemoshare, Download Center Software Full Version. said...

thx gan info nya mantab

Post a Comment

What's your comment about Membuat kotak informasi menarik di blog, type in the comment form below. Please Don't Spam.!!!