javascript:void(0)
Selasa, 24 November 2009
Kamis, 19 November 2009
Jaringan LAN
16.52
Nelson, S.Pd
Untuk penjelasan variasi lebih lanjut jika saya sedang mood akan saya tulis nanti. Karena jika anda menguasai penggunaannya anda bisa membuat banyak model dan tentu saja agar "berbeda". Langsung saja ke inti kode, dan Anda silahkan membuka halaman ini karena saya hanya akan menyebutkan modelnya saja.
Pertama anda harus menambahkan pada deretan CSS anda agar kode yang saya buat bekerja baik sesuai tampilan model yang saya buat. Silahkan letakkan kode dibawah ini diatas kode ]]> untuk blogspot jika untuk wordpress silahkan masukkan pada file style anda.
.kotakdalam {border: 1px solid #EFF0F1;padding: 5px; background: #ffffff;-moz-border-radius:5px;}
.kotakdalam a {background:none;}
img.float-right {margin: 5px 0px 0 10px;}
img.float-left {margin: 5px 10px 0 0px;}
Sekarang tinggal memasukkan kode-kode dibawah ini, silahkan dicoba saja kemudian kalau sudah kelihatan hasilnya anda bisa menggantinya dengan kode iklan anda sendiri. Saya tidak akan menjelaskan detil karena banyak variasi, jadi silahkan dicoba-coba dan perhatikan hasilnya, kalau salah ya edit lagi 'kan begitu :)
Rabu, 18 November 2009
Minggu, 15 November 2009
Membuat Navigasi Bercabang
18.15
Nelson, S.Pd
Membuat menu navigasi (horizontal)
Membuat menu navigasi (horizontal) bercabang Menu horizontal bercabang (nested) ini adalah kelanjutan dari bahasan tentang membuat menu navigasi horizontal sederhana. Dalam bahasan kali ini kita akan mencoba membuat menu navigasi yang ada cabangnya (dropdown). Script menu ini saya peroleh dari blog teman namanya anni (scriptnya sedikit saya ubah agar sesuai dengan template saya), sedikit penjelasan tentang teman saya ini, anni masih sekolah di sma (kalo tidak salah di tasikmalaya) , sekalipun masih sma tetapi dia sudah mahir utak-atik script html/javascript, pasti banyak mahasiswa yang kalah yaaa. Contoh menu navigasi horizontal bercabang tersebut bisa anda lihat di bawah ini:
Menu horizontal di atas dibuat dengan menggunakan html script dan css.
Untuk membuatnya bisa lakukan langkah berikut:
1. Login ke account blogger anda
Pilih Dashboard -> Tataletak -> Edit HTML
cari kode berikut:
]]>
2. Di bagian atas kode tersebut masukkan kode berikut
/* Navbar */
#menu{margin:0 auto; padding:0; height:30px; width:100%; display:block; background:url(http://xj9.site50.net/anni3access/image/new-itheme/topMenuImages.png) repeat-x;
opacity: 0.95; filter: alpha(opacity: 85);}
#menu-cari{float:right; display:inline; padding:3px 5px 0 0;}
#menu ul{padding:0; margin:0;}
#menu ul li{padding:0; margin:0; list-style:none; display:block; float:left;}
#menu ul li a{float:left; padding-left:15px; display:block; color:#ffffff; text-decoration:none; font:12px Verdana, Arial, Helvetica, sans-serif; background:url(http://xj9.site50.net/anni3access/image/new-itheme/topMenuImages.png) 0px -30px no-repeat; line-height:30px; padding-right:15px;}
#menu ul li a:hover{background-position:0px -60px; color:#ffffff;}
#menu ul li a.active, .menu li a.active:hover{background-position:0px -90px; color:#ffffff;}
#menu ul li ul {display:none;}
#menu ul li:hover ul, #menu ul li.hover ul {position: absolute; max-width:175px;
display: block; background:#000000; margin:2px; clear:left; margin-top:30px;}
#menu ul li:hover ul li, #menu ul li.hover ul li {width:175px; float: left; background: display: block;}
#menu ul li:hover ul li a, #menu ul li.hover ul li a{border-top:1px dotted #fff; background:black; width:175px;}
#menu ul li:hover ul li a:hover, #menu ul li.hover ul li a:hover{background:#7C01A4;}
4. Klik tombol "Simpan Template"
5. Buka halaman "Tata Letak -> Elemen Halaman"
6. Pada Elemen header , klik " Tambah Gadget"
Catatan: Jika anda menggunakan template default (bawaan) blogger maka tombol "Tambah gadget" tidak muncul pada bagian header, untuk menampilkannya bisa lihat postingan saya tentang cara menampilkan "tambah gadget" di header
7. setelah mengklik tombol "tambah gadget" pilih HTML/Javascript
8. pada kotak dialog html/javascrpit masukkan kode html berikut:
catatan:
Pada bagian : href="#" , tanda # anda ganti dengan url tujuan anda
teks setelah tanda # seperti Home, Menu 1, dst bisa anda ganti dengan teks sesuai dengan keinginan anda.
misalnya:
http://kalongkalong.blogspot.comatauhttp://artikelkomputerku.blogspot.com/2008/12/tips-untuk-meningkatkan-kecepatan.htmlhttp://artikelkomputerku.blogspot.com/2009/02/tips-dan-trik-windows.html9. Simpan perubahan yang anda buat, jika tidak ada masalah maka akan tampil menu navigasinya bisa anda lihat disini
) bercabang
Menu horizontal bercabang (nested) ini adalah kelanjutan dari bahasan tentang membuat menu navigasi horizontal sederhana. Dalam bahasan kali ini kita akan mencoba membuat menu navigasi yang ada cabangnya (dropdown). Script menu ini saya peroleh dari blog teman namanya anni (scriptnya sedikit saya ubah agar sesuai dengan template saya), sedikit penjelasan tentang teman saya ini, anni masih sekolah di sma (kalo tidak salah di tasikmalaya) , sekalipun masih sma tetapi dia sudah mahir utak-atik script html/javascript, pasti banyak mahasiswa yang kalah yaaa. Contoh menu navigasi horizontal bercabang tersebut bisa anda lihat di bawah ini:
Menu horizontal di atas dibuat dengan menggunakan html script dan css.
Untuk membuatnya bisa lakukan langkah berikut:
1. Login ke account blogger anda
Pilih Dashboard -> Tataletak -> Edit HTML
cari kode berikut:
]]>
2. Di bagian atas kode tersebut masukkan kode berikut
/* Navbar */
#menu{margin:0 auto; padding:0; height:30px; width:100%; display:block; background:url(http://xj9.site50.net/anni3access/image/new-itheme/topMenuImages.png) repeat-x;
opacity: 0.95; filter: alpha(opacity: 85);}
#menu-cari{float:right; display:inline; padding:3px 5px 0 0;}
#menu ul{padding:0; margin:0;}
#menu ul li{padding:0; margin:0; list-style:none; display:block; float:left;}
#menu ul li a{float:left; padding-left:15px; display:block; color:#ffffff; text-decoration:none; font:12px Verdana, Arial, Helvetica, sans-serif; background:url(http://xj9.site50.net/anni3access/image/new-itheme/topMenuImages.png) 0px -30px no-repeat; line-height:30px; padding-right:15px;}
#menu ul li a:hover{background-position:0px -60px; color:#ffffff;}
#menu ul li a.active, .menu li a.active:hover{background-position:0px -90px; color:#ffffff;}
#menu ul li ul {display:none;}
#menu ul li:hover ul, #menu ul li.hover ul {position: absolute; max-width:175px;
display: block; background:#000000; margin:2px; clear:left; margin-top:30px;}
#menu ul li:hover ul li, #menu ul li.hover ul li {width:175px; float: left; background: display: block;}
#menu ul li:hover ul li a, #menu ul li.hover ul li a{border-top:1px dotted #fff; background:black; width:175px;}
#menu ul li:hover ul li a:hover, #menu ul li.hover ul li a:hover{background:#7C01A4;}
4. Klik tombol "Simpan Template"
5. Buka halaman "Tata Letak -> Elemen Halaman"
6. Pada Elemen header , klik " Tambah Gadget"
Catatan: Jika anda menggunakan template default (bawaan) blogger maka tombol "Tambah gadget" tidak muncul pada bagian header, untuk menampilkannya bisa lihat postingan saya tentang cara menampilkan "tambah gadget" di header
7. setelah mengklik tombol "tambah gadget" pilih HTML/Javascript
8. pada kotak dialog html/javascrpit masukkan kode html berikut:
catatan:
Pada bagian : href="#" , tanda # anda ganti dengan url tujuan anda
teks setelah tanda # seperti Home, Menu 1, dst bisa anda ganti dengan teks sesuai dengan keinginan anda.
misalnya:
http://cektidakrugi.blogspot.com atau http://nelsonlely.blogspot.com/2008/12/tips-untuk-meningkatkan-kecepatan.htmlhttp://artikelkomputerku.blogspot.com/2009/02/tips-dan-trik-windows.html9. Simpan perubahan yang anda buat, jika tidak ada masalah maka akan tampil menu navigasinya bisa anda lihat disini.
» readmore/bacaselanjutnya
Membuat menu navigasi (horizontal) bercabang Menu horizontal bercabang (nested) ini adalah kelanjutan dari bahasan tentang membuat menu navigasi horizontal sederhana. Dalam bahasan kali ini kita akan mencoba membuat menu navigasi yang ada cabangnya (dropdown). Script menu ini saya peroleh dari blog teman namanya anni (scriptnya sedikit saya ubah agar sesuai dengan template saya), sedikit penjelasan tentang teman saya ini, anni masih sekolah di sma (kalo tidak salah di tasikmalaya) , sekalipun masih sma tetapi dia sudah mahir utak-atik script html/javascript, pasti banyak mahasiswa yang kalah yaaa. Contoh menu navigasi horizontal bercabang tersebut bisa anda lihat di bawah ini:
Menu horizontal di atas dibuat dengan menggunakan html script dan css.
Untuk membuatnya bisa lakukan langkah berikut:
1. Login ke account blogger anda
Pilih Dashboard -> Tataletak -> Edit HTML
cari kode berikut:
]]>
2. Di bagian atas kode tersebut masukkan kode berikut
/* Navbar */
#menu{margin:0 auto; padding:0; height:30px; width:100%; display:block; background:url(http://xj9.site50.net/anni3access/image/new-itheme/topMenuImages.png) repeat-x;
opacity: 0.95; filter: alpha(opacity: 85);}
#menu-cari{float:right; display:inline; padding:3px 5px 0 0;}
#menu ul{padding:0; margin:0;}
#menu ul li{padding:0; margin:0; list-style:none; display:block; float:left;}
#menu ul li a{float:left; padding-left:15px; display:block; color:#ffffff; text-decoration:none; font:12px Verdana, Arial, Helvetica, sans-serif; background:url(http://xj9.site50.net/anni3access/image/new-itheme/topMenuImages.png) 0px -30px no-repeat; line-height:30px; padding-right:15px;}
#menu ul li a:hover{background-position:0px -60px; color:#ffffff;}
#menu ul li a.active, .menu li a.active:hover{background-position:0px -90px; color:#ffffff;}
#menu ul li ul {display:none;}
#menu ul li:hover ul, #menu ul li.hover ul {position: absolute; max-width:175px;
display: block; background:#000000; margin:2px; clear:left; margin-top:30px;}
#menu ul li:hover ul li, #menu ul li.hover ul li {width:175px; float: left; background: display: block;}
#menu ul li:hover ul li a, #menu ul li.hover ul li a{border-top:1px dotted #fff; background:black; width:175px;}
#menu ul li:hover ul li a:hover, #menu ul li.hover ul li a:hover{background:#7C01A4;}
4. Klik tombol "Simpan Template"
5. Buka halaman "Tata Letak -> Elemen Halaman"
6. Pada Elemen header , klik " Tambah Gadget"
Catatan: Jika anda menggunakan template default (bawaan) blogger maka tombol "Tambah gadget" tidak muncul pada bagian header, untuk menampilkannya bisa lihat postingan saya tentang cara menampilkan "tambah gadget" di header
7. setelah mengklik tombol "tambah gadget" pilih HTML/Javascript
8. pada kotak dialog html/javascrpit masukkan kode html berikut:
catatan:
Pada bagian : href="#" , tanda # anda ganti dengan url tujuan anda
teks setelah tanda # seperti Home, Menu 1, dst bisa anda ganti dengan teks sesuai dengan keinginan anda.
misalnya:
http://kalongkalong.blogspot.comatauhttp://artikelkomputerku.blogspot.com/2008/12/tips-untuk-meningkatkan-kecepatan.htmlhttp://artikelkomputerku.blogspot.com/2009/02/tips-dan-trik-windows.html9. Simpan perubahan yang anda buat, jika tidak ada masalah maka akan tampil menu navigasinya bisa anda lihat disini
) bercabang
Menu horizontal bercabang (nested) ini adalah kelanjutan dari bahasan tentang membuat menu navigasi horizontal sederhana. Dalam bahasan kali ini kita akan mencoba membuat menu navigasi yang ada cabangnya (dropdown). Script menu ini saya peroleh dari blog teman namanya anni (scriptnya sedikit saya ubah agar sesuai dengan template saya), sedikit penjelasan tentang teman saya ini, anni masih sekolah di sma (kalo tidak salah di tasikmalaya) , sekalipun masih sma tetapi dia sudah mahir utak-atik script html/javascript, pasti banyak mahasiswa yang kalah yaaa. Contoh menu navigasi horizontal bercabang tersebut bisa anda lihat di bawah ini:
Menu horizontal di atas dibuat dengan menggunakan html script dan css.
Untuk membuatnya bisa lakukan langkah berikut:
1. Login ke account blogger anda
Pilih Dashboard -> Tataletak -> Edit HTML
cari kode berikut:
]]>
2. Di bagian atas kode tersebut masukkan kode berikut
/* Navbar */
#menu{margin:0 auto; padding:0; height:30px; width:100%; display:block; background:url(http://xj9.site50.net/anni3access/image/new-itheme/topMenuImages.png) repeat-x;
opacity: 0.95; filter: alpha(opacity: 85);}
#menu-cari{float:right; display:inline; padding:3px 5px 0 0;}
#menu ul{padding:0; margin:0;}
#menu ul li{padding:0; margin:0; list-style:none; display:block; float:left;}
#menu ul li a{float:left; padding-left:15px; display:block; color:#ffffff; text-decoration:none; font:12px Verdana, Arial, Helvetica, sans-serif; background:url(http://xj9.site50.net/anni3access/image/new-itheme/topMenuImages.png) 0px -30px no-repeat; line-height:30px; padding-right:15px;}
#menu ul li a:hover{background-position:0px -60px; color:#ffffff;}
#menu ul li a.active, .menu li a.active:hover{background-position:0px -90px; color:#ffffff;}
#menu ul li ul {display:none;}
#menu ul li:hover ul, #menu ul li.hover ul {position: absolute; max-width:175px;
display: block; background:#000000; margin:2px; clear:left; margin-top:30px;}
#menu ul li:hover ul li, #menu ul li.hover ul li {width:175px; float: left; background: display: block;}
#menu ul li:hover ul li a, #menu ul li.hover ul li a{border-top:1px dotted #fff; background:black; width:175px;}
#menu ul li:hover ul li a:hover, #menu ul li.hover ul li a:hover{background:#7C01A4;}
4. Klik tombol "Simpan Template"
5. Buka halaman "Tata Letak -> Elemen Halaman"
6. Pada Elemen header , klik " Tambah Gadget"
Catatan: Jika anda menggunakan template default (bawaan) blogger maka tombol "Tambah gadget" tidak muncul pada bagian header, untuk menampilkannya bisa lihat postingan saya tentang cara menampilkan "tambah gadget" di header
7. setelah mengklik tombol "tambah gadget" pilih HTML/Javascript
8. pada kotak dialog html/javascrpit masukkan kode html berikut:
catatan:
Pada bagian : href="#" , tanda # anda ganti dengan url tujuan anda
teks setelah tanda # seperti Home, Menu 1, dst bisa anda ganti dengan teks sesuai dengan keinginan anda.
misalnya:
http://cektidakrugi.blogspot.com atau http://nelsonlely.blogspot.com/2008/12/tips-untuk-meningkatkan-kecepatan.htmlhttp://artikelkomputerku.blogspot.com/2009/02/tips-dan-trik-windows.html9. Simpan perubahan yang anda buat, jika tidak ada masalah maka akan tampil menu navigasinya bisa anda lihat disini.
» readmore/bacaselanjutnya
