Minggu, 08 Agustus 2010

Cara membuat sidebar pada dokumen html

| Minggu, 08 Agustus 2010 | 27 komentar
Selamat membaca artikel diblog ini semoga bermanfaat :)

Selamat datang di k-blogger. sekarang kita akan belajar tentang "Cara membuat sidebar pada dokumen html". Post ini adalah sambungan Dasar dasar html 1-4:
Dasar dasar html 1
Dasar dasar html 2
Dasar dasar html 3
Dasar dasar html 4 (Cara menambah kode css pada dokumen html)
Bagaimana Cara membuat sidebar pada dokumen html?
Berikut:
1. Buka notepad
2. Ketikkan kode berikut:


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Nama dokumen</title>
</head>
<body>
</body>
</html>
3. Dibawah kode </head> pastekan kode berikut:

<style>
#sidebar-top {
border-left: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
background:#F5F5F5;
width:362px;
float:right;
padding:10px;
}
#sidebar-wrapper {
background:transparent

url(http://2.bp.blogspot.com/_rLYhkzmU7RY/TDvfgoOK5uI/AAAAAAAAAAU/kOXGkdBkMT4/s1600/sidebg.gif) repeat-y scroll left

top;
float:right;
overflow:hidden;
padding-left:8px;
margin-right:13px;
width:362px;
word-wrap:break-word;
}
</style>
4. Dibawah kode <body> pastekan kode berikut

<div id="sidebar-top">
<div id="sidebar" class="sidebar section">
Label
<hr /></hr>
[<a dir="ltr" href="#Link">Berita online</a>][<a dir="ltr" href="#Link">Download</a>][<a dir="ltr" href="#Link">Humor</a>]
</div>
</div>
5. Lalu save dengan file name: namadokumen.html dan save type: All Files
Lihat:
Cara mensave



















Berikut hasilnya lihat di Contoh

27 komentar :

AZ COMSOFT mengatakan...

akan saya soba cara ini sob...terima kasih banyak atas infonya

vos©ot mengatakan...

langsung ane coba praktekin~

Coretan Felix mengatakan...

save dulu, dipelajari lebih mendalam :)

GudangBlog mengatakan...

Wah... dicoba ah.. sepertinya bagus nih...

Boy Malik mengatakan...

wah bagus nih buat pengguna blogger tapi sayangnya saya bukan pengguna blogger melainkan wordpress

akhatam mengatakan...

Wahh hebat mass.. Keren buat tutornya..!!! kalo mau, submitkan artikel mas ke blog ane, biar artikelnya supaya lebih dikenal. klo mau hubungi ane yaw.. hehehe.

fajri mengatakan...

postingannya bagus...
salam kenal..
minta koment nya yaa

Fajri Alhadi-Funny Blog and Fresh Image for sharing

Ka Damar mengatakan...

SELAMAT MENUNAIKAN IBADAH PUASA KAWAN tetap jalin kebersamaan :D

tetap memberikan informasi yang enak tuk dibaca ^_^

jangan lupa sering2 mmpir :D ^_^

cak nun mengatakan...

ae oba...makasih infonya

Bunglon Blog Indonesia mengatakan...

hmm trik yang hebat dengan begini akan lebih mudah untuk bahan pembelajaran..
Sukses Slalu!

ANDI WONG mengatakan...

bagus sekali tutor ini... utk mengingat kembali dasar2 kode html yg mungkin sdh saya lupakan.. thx gan.. :)

Serba Serbi mengatakan...

wahh...
thanks sob atas ilmunya..
:D
sorry baru komen..
jaringan sibuk terus,,

mascipul mengatakan...

wah ane bookmark dulu, ntar ane coba deh...thx y sobb

Akbar mengatakan...

wah perluh di cobah ni thx sobat ane mau bookmark dulu dee

om canel mengatakan...

selamat menunaikan ibadah puasa


jangan lupa mampir ke om canel ya???

noval mengatakan...

wah pelu dicoba juga ni tx sibat ane mau bookmark dulu bye

Ibnu(dunia-klue) mengatakan...

saya coba praktekkin di blog curat-coret saya,hehehe

PIK Remaja Al-Hikmah mengatakan...

Kira-kira akan mempengaruhi loading blog ga sahabat ?

akhyar.info mengatakan...

perlu dicoba nih...

sofilmendo mengatakan...

wah,,keren bos tutorialnya nih...

poles marmer mengatakan...

thanks infonya sangat membantu...

Reza moch hanif mengatakan...
Komentar ini telah dihapus oleh pengarang.
Reza moch hanif mengatakan...

Makasih gan atas infonya sangat bermanpaat buat saya ..

Belajar Internet mengatakan...

kalau sidebarnya di kiri gimana min?:-o:-o:-o

viloza mengatakan...

ijin coba

mevid mengatakan...

nyoba ahh

poles marmer mengatakan...

ketemu juga akhirnya....thanks

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Posting Komentar

 

Blogroll

Flagcounter

free counters
© Copyright 2010. K-blogger . All rights reserved | K-blogger is proudly powered by Blogger.com | Template by o-om.com - zoomtemplate.com
Pasang Iklan Gratis Sebagai Awal Mulai Bisnis Online