BLOGGING

Mudah membuat kotak informasi menarik di web/blog

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.

Sekaligus ini menjelaskan (menjawab) pertanyaan salah satu pengunjung, tentang bagaimana cara menambahkan kotak informasi/peringatan penting, seperti di beberapa artikel ebsoft.

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.

MENAMBAHKAN CHAT ROOM DI BLOG/WEBSITE ANDA

Chatting atau instant messaging, seperti yang kita semua tahu, sangat menyenangkan dan berguna. Kadang-kadang, Anda perlu untuk chatting dengan teman Anda. Skype, Yahoo Messenger, Gtalk, merupakan layanan instant messaging paling populer saat ini. Akan tetapi, Anda memerlukan account pada layanan tsbdan mengetahui ID satu sama lain dalam rangka untuk chatting, tapi bagaimana mengobrol dengan pengunjung website atau blog anda?

Seorang pengunjung website atau blog akan chatting dengan Anda hanya jika, dibuat sangat mudah bagi mereka. Ada banyak alasan mengapa Anda mungkin menempatkan chatroom di blog Anda. Catatan, bahwa ini chatroom kita bicarakan adalah bukan satu pribadi. Ini, seperti ruang Chat Yahoo. Siapa saja dapat bergabung untuk chat percakapan. pertanyaannya adalah, bagaimana Anda menempatkan ruang chatting di website Anda, blog atau profil jaringan sosial?

99Chats memungkinkan Anda untuk mendaftar dan membuat ruang chat sendiri bahwa Anda dapat menempatkan pada setiap situs web atau blog Anda. Layanan ini menciptakan chat room kustom berdasarkan informasi yang Anda masukkan dan kemudian menghasilkan kode yang harus ditempatkan pada website yang disukai agar browser untuk menampilkan chat room di sana. Di sini, bagaimana Anda dapat membuat chat room sendiri di 99Chats gratis dan menanamkan di website Anda atau blog.

Kunjungi 99Chats (http://www.99chats.com/) dan klik Sign Up.

Begitu Anda mendaftar, Anda akan diperkenalkan dengan pembangun Chat room yang terlihat seperti gambar di bawah ini:

Ini akan memungkinkan Anda memilih nama Chat room Anda dan menyesuaikan desain. Seperti yang Anda lihat, ia memiliki pilihan untuk mengatur bahasa, kategori, tag, tema, ukuran dan warna latar belakang. Dengan cara ini Anda dapat membangun sebuah chat room kustom untuk website atau blog Anda.

Pada layar berikutnya, Anda akan diberikan dua jenis kode untuk menanamkan ruang chat Anda yang baru dibangun. Saya pikir, yang kedua (kode Javascript) akan bekerja pada sebagian besar situs, sehingga Anda dapat menyalin sebelum embedding di website Anda.

Sekarang, cukup pergi ke situs web Anda, panel mengedit, membuat halaman baru dan paste kode. Jika Anda menggunakan Wordpress (self-host), Anda dapat membuat halaman baru dan paste kode javascript di mode HTML pos mengedit layar. Sama untuk pengguna Blogger. Tambahkan halaman baru dan paste kode untuk ruang chat akan ditampilkan.