O.k sahabat semua....... setelah berhari-hari ga posting, hari ini saya akan memberikan tip's hasil jalan-jalan saya ke dynamicdrive, penyedia layanan javascript yang lumayan komplit dan telah saya uji alias teruji dan bergaransi berhasil 100% oleh saya. Dan kali ini saya akan memberikan trik untuk membuat Dropdown menu sederhana yang menurut saya cukup efektif untuk memasang alamat-alamat link yang ingin anda tambahkan pada blog anda seperti yang terlihat pada halaman ini . Ocree... jika anda tertarik untuk memasangnya silahkan ikuti langkah berikut ini : Masuk account blogger anda==> Dashboard/dasbor==> Layout/tataletak==> Edit HTML dan jangan lupa centang "EXPAND TEMPLATE WIDGET" Lakukan Backup dengan "Download lengkap Template" Lalu copy kode berikut ini : <style type="text/css"> .menutitle{ cursor:pointer; margin-bottom: 5px; background-color:#ff0000; color:#ffffff; width:165px; padding:2px; text-align:center; font-weight:bold; /*/*/border:1px solid #000000;/* */ } .submenu{ margin-bottom: 0.5em; } </style> <script type="text/javascript"> var persistmenu="yes" //"yes" or "no". Make sure each SPAN content contains an incrementing ID starting at 1 (id="sub1", id="sub2", etc) var persisttype="sitewide" //enter "sitewide" for menu to persist across site, "local" for this page only if (document.getElementById){ //DynamicDrive.com change document.write('<style type="text/css">n') document.write('.submenu{display: none;}n') document.write('</style>n') } function SwitchMenu(obj){ if(document.getElementById){ var el = document.getElementById(obj); var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change if(el.style.display != "block"){ //DynamicDrive.com change for (var i=0; i<ar.length; i++){ if (ar[i].className=="submenu") //DynamicDrive.com change ar[i].style.display = "none"; } el.style.display = "block"; }else{ el.style.display = "none"; } } } function get_cookie(Name) { var search = Name + "=" var returnvalue = ""; if (document.cookie.length > 0) { offset = document.cookie.indexOf(search) if (offset != -1) { offset += search.length end = document.cookie.indexOf(";", offset); if (end == -1) end = document.cookie.length; returnvalue=unescape(document.cookie.substring(offset, end)) } } return returnvalue; } function onloadfunction(){ if (persistmenu=="yes"){ var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname var cookievalue=get_cookie(cookiename) if (cookievalue!="") document.getElementById(cookievalue).style.display="block" } } function savemenustate(){ var inc=1, blockid="" while (document.getElementById("sub"+inc)){ if (document.getElementById("sub"+inc).style.display=="block"){ blockid="sub"+inc break } inc++ } var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid document.cookie=cookiename+"="+cookievalue } if (window.addEventListener) window.addEventListener("load", onloadfunction, false) else if (window.attachEvent) window.attachEvent("onload", onloadfunction) else if (document.getElementById) window.onload=onloadfunction if (persistmenu=="yes" && document.getElementById) window.onunload=savemenustate </script> Dan Paste di bawah kode : <head> (Supaya cari kode <head> ga susah, gunakan ctrl+F ya ?) Keterangan : Warna Merah : Silahkan anda ganti background heading-nya sesuai selera anda sendiri Warna biru : Warna font/huruf ,silahkan anda ganti sesuai keinginan anda. Warna kuning : Lebar bidang/object, silahkan anda sesuaikan. Setelah anda paste, jangan lupa untuk klik tombol Save/simpan perubahan!. Jika masih terdapat pesan error, seperti biasa anda harus mem-PARSE kode diatas, dan pernah saya posting cara mem-PARSE lho !! anda bisa membacanya disini atau disini, atau anda bisa langsung menuju website tempat PARSE disini atau disini, lalu copy hasil PARSE tersebut dan paste ditempat yang sama yaitu di bawah kode : <head> Nah, sekarang kayaknya sekarang sudah ga ada lagi error kan ? Nah kalau sudah ga ada masalah, sekarang anda klik tombol Save/simpan perubahan o.k ? Kemudian untuk menampilkan Dropdown menu tersebut ditempat yang anda inginkan, silahkan anda masuk ke Layout/tataletak, dan pilih "Tambah Gadget" kemudian pilih HTML/JAVASCRIPT dan pastekan kode dibawah ini : <!-- Keep all menus within masterdiv--> <div id="masterdiv"> <div class="menutitle" onclick="SwitchMenu('sub1')">CONTENT 1</div> <span class="submenu" id="sub1"> - <a href="http://kawungantenberbagi.blogspot.com"target="_new">..::KAWUNGANTENBERBAGI::..</a><br> - <a href="http://kawungantenberbagi.blogspot.com"target="_new">..::KAWUNGANTENBERBAGI::..</a><br> - <a href="http://kawungantenberbagi.blogspot.com"target="_new">..::KAWUNGANTENBERBAGI::..</a><br> - <a href="http://kawungantenberbagi.blogspot.com"target="_new">..::KAWUNGANTENBERBAGI::..</a><br> </span> <div class="menutitle" onclick="SwitchMenu('sub2')">CONTENT 2</div> <span class="submenu" id="sub2"> - <a href="http://kawungantenberbagi.blogspot.com"target="_new">..::KAWUNGANTENBERBAGI::..</a><br> - <a href="http://kawungantenberbagi.blogspot.com"target="_new">..::KAWUNGANTENBERBAGI::..</a><br> - <a href="http://pojokjeruklegi.blogspot.com"target="_new">..::KAWUNGANTENBERBAGI::..</a><br> </span> <div class="menutitle" onclick="SwitchMenu('sub3')">CONTENT 3</div> <span class="submenu" id="sub3"> - <a href="http://kawungantenberbagi.blogspot.com"target="_new">..::KAWUNGANTENBERBAGI::..</a><br> - <a href="http://kawungantenberbagi.blogspot.com"target="_new">..::KAWUNGANTENBERBAGI::..</a><br> - <a href="http://kawungantenberbagi.blogspot.com"target="_new">..::KAWUNGANTENBERBAGI::..</a><br> - <a href="http://kawungantenberbagi.blogspot.com"target="_new">..::KAWUNGANTENBERBAGI::..</a><br> </span> <div class="menutitle" onclick="SwitchMenu('sub4')">CONTENT 4</div> <span class="submenu" id="sub4"> - <a href="http://kawungantenberbagi.blogspot.com"target="_new">..::KAWUNGANTENBERBAGI::..</a><br> - <a href="http://kawungantenberbagi.blogspot.com"target="_new">..::KAWUNGANTENBERBAGI::..</a><br> - <a href="http://kawungantenberbagi.blogspot.com"target="_new">..::KAWUNGANTENBERBAGI::..</a><br> - <a href="http://kawungantenberbagi.blogspot.com"target="_new">..::KAWUNGANTENBERBAGI::..</a><br> </span> <div class="menutitle" onclick="SwitchMenu('sub5')">CONTENT 5</div> <span class="submenu" id="sub5"> - <a href="http://kawungantenberbagi.blogspot.com"target="_new">..::KAWUNGANTENBERBAGI::..</a><br> - <a href="http://kawungantenberbagi.blogspot.com"target="_new">..::KAWUNGANTENBERBAGI::..</a><br> - <a href="http://kawungantenberbagi.blogspot.com"target="_new">..::KAWUNGANTENBERBAGI::..</a><br> </span> </div> Keterangan : Warna Merah : silahkan anda ganti dengan alamat halaman link yang ditampilkan. Warna Biru : silahkan anda ganti dengan Nama link yang akan di tampilkan. Warna Kuning : Silahkan anda ganti nama menu pada heading masing-masing content. Nah... kalau kode yang ke-2 tersebut sudah di paste dan di ganti sesuai selera kalian, silahkan anda klik Save/simpan perubahan. dan Lihat Hasilny brother.. !! Sekarang kalian sudah memiliki Dropdown menu sederhana yang berfungsi untuk membuat daftar alamat-alamat link agar tidak terlihat acak-acakan pada blog kalian ocre ?
Rabu, 11 Maret 2009
Langganan:
Posting Komentar (Atom)
masya allohh bang andre,,,
BalasHapushebat,,ga nyangka biqin blog,,
lumayan lah,,siip,,
by wawan SO
kemarin nyoba2 scribt serupa dengan tips yang diberikan di artikel ini.kacau sih,tapi akhirnya juga bisa di banggakan.hahaha
BalasHapuswokee mas,thanks ya sob.....