TUTORIAL BLOGGER

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 kamu 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 template minima baru

1. Sigin di blogger



2. Klik menu Layout



3. Klik menu Edit HTML



4. Klik tulisan Download Full Template, silahkan save dulu untuk berjaga-jaga apabila terjadi kesalahan editting



5. Copy paste kode berikut di antara kode dan kode
   ]]> , atau jika bingung simpan saja persis di atas kode
   ]]>



#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. Copy paste kode berikut di atas kode </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 sobat
   var menu1=new Array()
   menu1[0]='<a href="http://template-unik.blogspot.com/2007/07/white-minima-3-column.html">Minima 3 column (classic)</a>'
   menu1[1]='<a href="http://template-unik.blogspot.com/2007/07/white-minima-3-column-xml.html">Minima 3 column (beta)</a>'
   menu1[2]='<a href="http://template-unik.blogspot.com/2007/07/scribe-3-column-classic.html">Scribe 3 column (classic)</a>'
   menu1[3]='<a href="http://template-unik.blogspot.com/2007/07/scribe-3-column-xml.html">Scribe 3 column (new)</a>'
   menu1[4]='<a href="http://template-unik.blogspot.com/2007/07/1st-template-unik.html">1St Template Unik (new)</a>'
   menu1[5]='<a href="http://template-unik.blogspot.com/2007/07/denim-3-column-xml.html">Denim 3 column (new)</a>'
   menu1[6]='<a href="http://template-unik.blogspot.com/2007/07/denim-3-column-xml.html">Blue Lover (new)</a>'
   
   //isi dari menu 2, silahkan ubah dengan link milik sobat
   var menu2=new Array()
   menu2[0]='<a href="http://rubrik-elektronik.blogspot.com/2007/05/tips-maintenance-of-crt-television.html ">About Television</a>'
   menu2[1]='<a href="http://rubrik-elektronik.blogspot.com/2007/04/baterai.html">About Battery</a>'
   menu2[2]='<a href="http://rubrik-elektronik.blogspot.com/2007/04/progressive.html">About Progressive</a>'
   menu2[3]='<a href="http://rubrik-elektronik.blogspot.com/2007/04/electronic-shopping.html">Electronic Shopping</a>'
   menu2[4]='<a href="http://rubrik-elektronik.blogspot.com/2007/04/cute-bean.html"> About Mp3 Player</a>'
   menu2[5]='<a href="http://rubrik-elektronik.blogspot.com/2007/04/tips-maintenance-of-camera.html">About Handy Cam</a>'
   
   
   
   //isi dari menu 3, silahkan ubah dengan link milik sobat
   var menu3=new Array()
   menu3[0]='<a href="http://www.obralplus.com/?id=rohman" title="menjual berbagai software dengan harga sangat murah">Obral Plus</a>'
   
   //isi dari for menu 4, and so on
   var menu4=new Array()
   menu4[0]='<a href="http://www.resepbisnis.com/?id=rohman" title="cocok bagi anda yang ingin belajar lebih jauh tentang pembuatan website">Resep Bisnis.com</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>
   
7. Copy paste kode berikut persis di bawah kode :
   <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://kolom-tutorial.blogspot.com" title="back to home">Home</a>

<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '200px')" onMouseout="delayhidemenu()" title="free download blogger template">Free Template</a>

<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu2, '200px')" onMouseout="delayhidemenu()">Rubrik Elektronik</a>

<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu3, '200px')" onMouseout="delayhidemenu()" title="menjual berbagai software dengan harga sangat murah">Obral Plus</a>

<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu4, '200px')" onMouseout="delayhidemenu()" title="cocok bagi anda yang ingin belajar lebih jauh tentang pembuatan website">Belajar website</a>

</div>




8. Klik tombol Simpan Template



9. Selesai.