S ebelumnya saya ucapkan selamat Tahun baru Islam 1432 H. Okey, menanggapi pertanyaan salah satu rekan kita yang telah berkunjung, pertanyaannya kurang lebih seperti ini "eh aq mintol y nie aq mau tau cara membuat.tombol.HOME.DAFTAR ISI.KODE WARNA.PARS KODE.KONTAK KAMI.skalian lh ma kode htmmlnya.ok.th's b4." Namun disini mungkin tidak sesuai keinginan bliau karena tutorial ini tanpa menggunakan tombol tapi rada2 miriplah (heheh), sebenarnya saya ingin berkunjung balik ke blog bliau tapi yang bersangkutan tidak menyertakan URLnya.
Apa itu Horisontal Dropdown Menu (HDM)??? HDM banyak sekali kita jumpai diberbagai website/blog terutama sering digunakan pada web2 bisnis atau iklan seperti HOME, DAFTAR PRODUK, CARA TERANSAKSI, KONTAK dst...dan dari hasil kunjungan saya dibeberapa web misalnya bisnis pulsa hampir semuanya menggunakan HDM persis dibawah Headernya.
Sebenarnya saya ingin memberi contoh gambar tapi karena internetnya lagi lemot (maklum cuma pake CDMA flexi ) jadi maaf banget tidak memberi contoh gambar tapi sebagai contoh bisa anda lihat pada facebook anda( udah punya facebook belum??klo belum segera buat mumpun masih gratis )saya asumsikan kalian sudah punya FB sekaran lihat disana ada tulisan Wall Info Fhotos nah, kurang lebih bentuknya mirip menu tersebut.
Kita mulai saja langkah pembuatannya:
1. Sigin di blogger
2. Klik menu Layout
3. Klik menu Edit HTML
4. Download Full Template (penting tuk jaga2)
5. Letakkan code berikut persis diatas code ]]></b:skin>
#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;
}
#dropmenudiv a:hover{ /*hover background color*/
background-color: #e7f4fd;
color:#000000;
}
/* 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;
}
6. Lalu letakkan code berikut diatas code </head>
<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
***********************************************/
//isi dari menu 1, silahkan ubah dengan link milik kalian
var menu1=new Array()
menu1[0]='<a href="http://mutakbir.blogspot.com/2010/07/cara-membuat-foto-animasi.html">1.Tutorial HTML</a>'
menu1[1]='<a href="http://mutakbir.blogspot.com/2010/07/cara-membuat-foto-animasi.html"> 2.Cara membuat foto animasi</a>'
menu1[2]='<a href="http://mutakbir.blogspot.com/2010/07/membuat-paper-style-drop-caps-berita.html"> 3.Membuat paper style drop caps berita</a>'
//isi dari menu 2, silahkan ubah dengan link milik kalian
var menu2=new Array()
menu2[0]='<a href="http://mutakbir.blogspot.com/2010/01/cara-membuat-tulisan-terbalik.html "> Cara membuat tulisan terbalik</a>'
menu2[1]='<a href="http://mutakbir.blogspot.com/2010/01/mempercepat-koneksi-internet-mozilla.html">Mempercepat koneksi internet</a>'
//isi dari menu 3, silahkan ubah dengan link milik kalian
var menu3=new Array()
menu3[0]='<a href="http://avail.rumahkerja.info/drjocf/ "> Rahasia Wanita;/a>'
//isi dari for menu 4, and so on
var menu4=new Array()
menu4[0]='<a href="http://avail.rumahkerja.info/drjocf/ "> Bisnis Wanita;/a>'
var menuwidth='200px' //default menu width
var menubgcolor='#4B4D52' //menu bgcolor
var disappeardelay=250 //menu disappear speed onMouseout (in miliseconds)
var hidemenu_onclick="yes" //hide menu when user clicks within menu?
/////No further editting needed
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 getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}
function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top="-500px"
if (menuwidth!=""){
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
}
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
obj.visibility=visible
else if (e.type=="click")
obj.visibility=hidden
}
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function clearbrowseredge(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
}
}
return edgeoffset
}
function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}
function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)
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>
Penjelasan untuk code diatas:
tulisan yang berwarna kuning kalian ganti dengan link milik kalian,itu merupakan isi dari menu pertama. Jika ingin menambahkan isi dari menu tersebut,kalian cukup tambahkan persis dibawahnya.Begitu juga halnya dengan menu selanjutnya kalian ganti URLnya dangan URL milik kalian.(pokoknya semua yang ada tulisan yang dimulai dengan http
7. Selanjutnya letakkan code berikut dibawah code berikut:
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</div>
</b:if>
</b:includable>
</b:widget>
</b:section>
<div id="menu">
<a href="http://mutakbir.blogspot.com/" title="back to home">Home</a>
<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '200px')" onMouseout="delayhidemenu()" title="tips blog">tips blog</a>
<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu2, '200px')" onMouseout="delayhidemenu()">Tips Facebook</a>
<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu3, '200px')" onMouseout="delayhidemenu()" title="kesehatan wanita">Rahasia Wanita</a>
<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu4, '200px')" onMouseout="delayhidemenu()" title="cocok untuk wanita">Bisnisnya Para Gadis</a>
</div>
Penjelasan:
Tulisan yang warna biru kalian ganti dengan halaman pertama yang ingin ditampilkan ketika seseorang mengklik tombol Home.
Tulisan yang berwarna pink merupakan tulisan yang ada pada menu-menu tersebut silahkan kalian ganti dengan yang kalian inginkan.
8. Setelah kalian mengedit code diatas silahkan klik Pratinjau untuk melihat hasilnya sebelum disimpan atau bisa langsung klik Simpan Template.
9. Selesai.
Capek juga ngetiknya, ya udah semoga ini bisa membantu rekan blogger.Kalo masih mengalami kesulitan silahkan komentar dibawah...TETAP SEMANGAT!!!
0 komentar:
Posting Komentar