Академический Документы
Профессиональный Документы
Культура Документы
Yo'i sobat tadi adalah hanya sekilas info saja, yang akan saya bahas sekarang adalah
menyoal tentang pernak-pernik blog, ada satu lagi nih yang bisa sobat pasang. kali ini
tentang cara pembuatan menu dropdown dengan javascript dalam bentuk horizontal
alias mendatar. Sekilas tentang menu dropdown ini yaitu menu navigasi yang apabila di
sorot oleh mouse akan secara otomatis mengeluarakan sub menu yang terkandung di
dalamnya. Contoh gampang yaitu silahkan sobat sorot menu-menu yang ada pada bagian
atas blog ini, tentunya nanti akan keluar berupa sub-sub menu. Ingin tahu cara
membuatnya? silahkan baca tutorialnya sampai selesai !
Untuk membuat menu dropdown seperti di atas, bisa menggunakan bantuan image
ataupun cukup hanya warna background biasa. Untuk saat ini saya mau menerangkan
menu dropdown tanpa bantuan image, dan untuk yang menggunakan latar belakang
image, akan di bahas pada pembahasan selanjutnya.
Script yang saya pakai kali ini adalah di ambil dari http://www.dynamicdrive.com akan
tetapi saya modifikasi pada bagian css agar tampil lebih menarik. Ada beberapa tahapan
yang harus di persiapkan yaitu yang pertama adalah menentukan menu utama apakah
yang akan di tampilkan. Contoh pada blog saya adalah Home, Free Blog Tamplate,
Rubrik Elektronik, Obral lus, How to make a Website, serta Contuct Us. Yang kedua
adalah mempersiapkan sub menu dari menu utama yang di tampilkan. Contoh blog saya
yaitu Link-link postingan yang ada pada blog tersebut, untuk template unik dan rubrik
elektronik yaitu menampilkan judul-judul dari postingan semisal About Battery
Electronic shopping, Minima 3 column, dan lain sebagainya. Nah sudah barang tentu
dari judul-judul yang saya sebutkan tadi itu mempunyai alamat URL masing-masing,
langkah selanjutnya adalah mencatat alamat URL setiap judul yang di pasang.
Setiap template tentunya akan berbeda kodenya, untuk memberi gambaran saja maka
yang saya terangkan adalah template minima dengan pemasangan menu dropdown di
bagian header
1. Sig in di blogger
2. Klik menu Template
4. Copy seluruh kode template yang ada lalu paste pada notepad kemudian save. ini
untuk backup data bila terjadi kesalahan editting
5. Copy kode berikut lalu paste pada style sheet css sobat, atau bila bingung simpan
saja di atas kode </style>
#dropmenudiv{
position:absolute;
border:1px solid black;
border-bottom-width: 0;
font:normal 12px verdana;
line-height:18px;
z-index:100;
#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
color:#ffffff;
/* menu dropdown
----------------------------------------------- */
#menu{
text-align: center;
background:#c4e1ff;
height:20px;
}
#menu a{
margin:0;
font-size:1em;
font-weight:normal;
padding-left:20px;
padding-right:20px;
letter-spacing:-1px;
color: #000000;
font-family:georgia,verdana,arial;
text-decoration:none;
#menu a:hover{
color: #ffffff;
background: #140E7E;
}
<script type='text/javascript'>
//<![CDATA[
/***********************************************
* AnyLink Drop Down Menu- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
var ie4=document.all
var ns6=document.getElementById&&!document.all
if (ie4||ns6)
document.write('<div id="dropmenudiv"
style="visibility:hidden;width:'+menuwidth+';background-
color:'+menubgcolor+'" onMouseover="clearhidemenu()"
onMouseout="dynamichide(event)"></div>')
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")?
document.documentElement : document.body
}
function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}
if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj,
"bottomedge")+obj.offsetHeight+"px"
}
return clickreturnvalue()
}
function clickreturnvalue(){
if (ie4||ns6) return false
else return true
}
function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}
function dynamichide(e){
if (ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !
contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}
function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
}
}
function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}
function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}
if (hidemenu_onclick=="yes")
document.onclick=hidemenu
//]]>
</script>
</h1>
<p id="description"><$BlogDescription$></p>
<div id="menu">
</div>
9. Selesai.
Yang di atas tadi merupakan pemasangan untuk template minima klasik, untuk template
minima baru, silahkan ikuti langkah berikut !
1. Sigin di blogger
4. Klik tulisan Download Full Template, silahkan save dulu untuk berjaga-jaga
apabila terjadi kesalahan editting
#dropmenudiv{
position:absolute;
border:1px solid black;
border-bottom-width: 0;
font:normal 12px verdana;
line-height:18px;
z-index:100;
#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
color:#ffffff;
/* menu dropdown
----------------------------------------------- */
#menu{
text-align: center;
background:#c4e1ff;
height:20px;
}
#menu a{
margin:0;
font-size:1em;
font-weight:normal;
padding-left:20px;
padding-right:20px;
letter-spacing:-1px;
color: #000000;
font-family:georgia,verdana,arial;
text-decoration:none;
#menu a:hover{
color: #ffffff;
background: #140E7E;
}
<script type='text/javascript'>
//<![CDATA[
/***********************************************
* AnyLink Drop Down Menu- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
var ie4=document.all
var ns6=document.getElementById&&!document.all
if (ie4||ns6)
document.write('<div id="dropmenudiv"
style="visibility:hidden;width:'+menuwidth+';background-
color:'+menubgcolor+'" onMouseover="clearhidemenu()"
onMouseout="dynamichide(event)"></div>')
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")?
document.documentElement : document.body
}
function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}
if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj,
"bottomedge")+obj.offsetHeight+"px"
}
return clickreturnvalue()
}
function clickreturnvalue(){
if (ie4||ns6) return false
else return true
}
function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}
function dynamichide(e){
if (ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !
contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}
function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
}
}
function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}
function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}
if (hidemenu_onclick=="yes")
document.onclick=hidemenu
//]]>
</script>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</div>
</b:if>
</b:includable>
</b:widget>
</b:section>
<div id="menu">
</div>
9. Selesai.
Untuk melihat seperti apa hasilnya kode-kode yang barusan di terangkan, coba sobat klik
di sini !, silahkan sorot pada menu navigasi yang ada pada header.
Panjang banget yah, pasti cape deh baca nya, ya udah sekarang ketik P spasi D jadi
Cappe Dehhhh.....
Selamat mencoba !