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>
<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9oQg8F4MSNFhfPX-4Fd4PeO4jJV3VGQnDmJHPdx5qtyLc3d0mmeg-bwyqzNFehfEeyiN3MiA2XL0bWRM_K6UkxWwPnzUImEJgRURjBKFhAtIwzdimBcF68wNRbV8x7AT05mNM5i7kM3qi/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>
<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>
Lihat:
Berikut hasilnya lihat di Contoh
Perkembangan Beton Bertulang Yang Unik Baik Secara Eksperimental Maupun
Secara Praktek Langsung Dilapangan
-
PERKEMBANGAN BETON BERTULANG YANG UNIK BAIK SECARA EKSPERIMENTAL MAUPUN
SECARA PRAKTEK LANGSUNG DILAPANGAN Pada saat ini desain struktur konstruksi
tahan...
26 komentar :
akan saya soba cara ini sob...terima kasih banyak atas infonya
langsung ane coba praktekin~
save dulu, dipelajari lebih mendalam :)
Wah... dicoba ah.. sepertinya bagus nih...
wah bagus nih buat pengguna blogger tapi sayangnya saya bukan pengguna blogger melainkan wordpress
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.
postingannya bagus...
salam kenal..
minta koment nya yaa
Fajri Alhadi-Funny Blog and Fresh Image for sharing
SELAMAT MENUNAIKAN IBADAH PUASA KAWAN tetap jalin kebersamaan :D
tetap memberikan informasi yang enak tuk dibaca ^_^
jangan lupa sering2 mmpir :D ^_^
ae oba...makasih infonya
hmm trik yang hebat dengan begini akan lebih mudah untuk bahan pembelajaran..
Sukses Slalu!
bagus sekali tutor ini... utk mengingat kembali dasar2 kode html yg mungkin sdh saya lupakan.. thx gan.. :)
wahh...
thanks sob atas ilmunya..
:D
sorry baru komen..
jaringan sibuk terus,,
wah ane bookmark dulu, ntar ane coba deh...thx y sobb
wah perluh di cobah ni thx sobat ane mau bookmark dulu dee
wah pelu dicoba juga ni tx sibat ane mau bookmark dulu bye
saya coba praktekkin di blog curat-coret saya,hehehe
Kira-kira akan mempengaruhi loading blog ga sahabat ?
perlu dicoba nih...
wah,,keren bos tutorialnya nih...
thanks infonya sangat membantu...
Makasih gan atas infonya sangat bermanpaat buat saya ..
kalau sidebarnya di kiri gimana min?:-o:-o:-o
ijin coba
nyoba ahh
ketemu juga akhirnya....thanks
Posting Komentar