Membuat kotak informasi menarik di blog

Go : Home > Blogger tutorial > Membuat kotak informasi menarik di blog

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 ..; February 14, 2010 at 1:28 AM
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!; February 14, 2010 at 2:46 AM
Ngeposting ni yee said...: tHanks sCriptnYa sObat..,; February 14, 2010 at 4:54 AM
kerja sambilan said...: wah luar biasa ini, trims atas info ini, aku akn buat kotak; February 14, 2010 at 6:33 AM
Dimas P. Putra said...: mantap nih, klo ada tutorialnya jd gampang d'praktekin....
Lifestyle Inspiration; February 14, 2010 at 8:50 AM
CUTAZA said...: keran nih mas.. lumayan bisa saya pake nih ilmunya; February 14, 2010 at 10:38 AM
Dunia Komputer said...: Mantap infonya sob. Saya praktek dulu. Makasi ya.; February 14, 2010 at 5:11 PM
Review Bisnis Online said...: Nice info sob. Kayanya bakalan lebih keren pake ini di blog. Thanks.; February 14, 2010 at 5:12 PM
nowGoogle.com adalah Multiple Search Engine Popular said...: mantab, boleh dicoba di blogspotku, ma kasih ya; February 14, 2010 at 11:30 PM
switch mode transformer said...: Your tips are remarkable. I regularly read your blog and its very helpful.; February 15, 2010 at 9:00 AM
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; February 15, 2010 at 3:50 PM
Alcohol Abuse Idaho said...: thanks infonya mampir lagi sekalian tukaran link banner and follow yukk !; February 18, 2010 at 10:07 AM
tanya gratisan said...: oke banget triknya sob...; February 19, 2010 at 2:57 AM
Mine Panama said...: Superb ! Your blog is incredible. I am delighted with it. Thanks for sharing with me.; February 26, 2010 at 5:38 PM
nowGoogle.com Adalah Multiple Search Engine Popular said...: maksih banget tipsnya bro; March 10, 2010 at 10:40 PM
Forantum I Blogging is My Life I Tutorial Blog I Tips dan Trik Blog I SEO I Free Template said...: Makasih tutorialnya...; April 29, 2010 at 4:46 PM
Effendi said...: Matur nuwun tipnya.....semoga selallu berkembang; May 28, 2010 at 11:58 PM
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!
-------------------------------------------; June 12, 2010 at 10:54 PM
pay per lead 2010 said...: wahhh patut dicoba nih; June 14, 2010 at 9:25 PM
Pendi AW said...: makasih mas tutorialnya...; July 14, 2010 at 9:13 AM
hosting profesional indonesia yang murah said...: nice tips, ma kasih; July 25, 2010 at 6:47 PM
Irvan said...: Oh gitu toh caranya, di save dulu gan; July 26, 2010 at 10:15 PM
irma JualBonekaAjaib said...: mo coba jg..thx bro..; August 21, 2010 at 7:56 AM
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; September 26, 2010 at 1:23 PM
membuat blog gratis said...: postin yang sangat bermanfaat..
terimakasih..
:-); November 22, 2010 at 5:45 PM
Dunia Download Gratis said...: beljar lagi hal baru kawan , thank buat tutorialnya kawan; December 8, 2010 at 8:12 PM
Cara Beriklan Di Internet said...: ok bnget infonya gan; December 29, 2010 at 12:11 AM
Shio 2011 said...: info yang bagus gan; December 30, 2010 at 11:47 AM
UdaRusdi Cs said...: wah mantap benarnih artikelnya,tak praktekin ya mas...salam sukses; January 28, 2011 at 4:53 AM
PELANGI HOLIDAY said...: salam hormat kunjung balik mas...; January 28, 2011 at 4:57 AM
solusi mengobati kanker darah said...: keep blogging moga jadi ilmu yang berguna,,,; April 18, 2011 at 7:39 PM
pengobatan tradisional demam berdarah said...: mantap infonya,,patut dicoba,,moga berhasil,,makasih dan sukses slalu,,,; April 18, 2011 at 7:41 PM
nemoshare, Download Center Software Full Version. said...: thx gan info nya mantab; July 4, 2011 at 9:09 PM

abdulroqib.blogspot.com