Here's how to make the dropdown menu (acordion) :1. You must first login at Blogger.com / Blogspot.com
2. You Choose Layout -> Edit HTML
3. Copy the script below continue to paste the code between <head> </head> put them up to you, try deh find the code at the beginning of the script and template code before <body> .
<script src='http://www.hotlinkfiles.com/files/2096147_8gjww/jquery-1.2.6.pack.js]jquery-1.2.6.pack.js' type='text/javascript'/>
<script src='http://www.hotlinkfiles.com/files/2096146_3tpwj/ddaccordion.js]ddaccordion.js' type='text/javascript'/>
<script type='text/javascript'>
ddaccordion.init({
headerclass: "expandable", //Shared CSS class name of headers group that are expandable
contentclass: "categoryitems", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["", "openheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["prefix", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})
</script>
I suggest to save the file into this JavaSript hosting your own, but if ya do not want fuss, copy the above
4. Then copy the code below .... CSS ago paste the code before ]]li></b:skin>
.arrowlistmenu{
width: 320px; /*ukuran lebar dari menu*/
}
.arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
font: bold 14px Arial;
color: white;
background: black url(http://img84.imageshack.us/img84/7623/ocimtitlebarpr5.png) repeat-x center left;
margin-bottom: 10px; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 4px 0 4px 10px; /*header text is indented 10px*/
cursor: hand;
cursor: pointer;
}
.arrowlistmenu .openheader{ /*CSS class to apply to expandable header when it's expanded*/
background-image: url(http://img515.imageshack.us/img515/6545/ocimtitlebaractivekj3.png);
}
.arrowlistmenu ul{ /*CSS for UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}
.arrowlistmenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}
.arrowlistmenu ul li a{
color: #A70303;
background: url(http://img227.imageshack.us/img227/2667/ocimarrowbulletqk9.png) no-repeat center left; /*custom bullet list image*/
display: block;
padding: 2px 0;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 90%;
}
.arrowlistmenu ul li a:visited{
color: #A70303;
}
code printed red width: 300px width to determine the menu, get it customized with your blog template.
Then save your template. not finished ... first patient, there's more that you have to do ...
5. go to pageElement edit and enter the code below :
No comments:
Post a Comment