• Home
  • Contact
  • Link Exchange
  • Donate Us
  • About Me

Saturday, August 18, 2012

Pin It

Create Accordion Menu

1:54:00 PM  Anonymous   No comments


Hey What's Up :)
let me Introduce the most popular Widget for menu, i thought it was popular huh, alright, here is the Accordion menu, See The Demo Below :



not bad for beginner like me . but, Let's think what's The Effect if We Use this Widget, i Thought it'll Bring more traffic for you and as a writter i suggest to write and Series Post and  put to this widget. Since every Reader like Series post like me. How to Add this???


  1.  Go To Blogger.com Then Choose Lay Out
  2. Add New HTML/ Java Script and Paste This Code Below
<script type="text/javascript" src="http://zulkhamsyah.webs.com/AccordionMenuBloggerIndo.js"></script>
<link href="http://zulkhamsyah.webs.com/AccordionMenuBloggerIndo.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
<body onLoad="MM_preloadImages('../Downloads/bitch-cute-jelena-justin-selena-Favim.com-256462.jpeg')"><div id="Accordion1" class="Accordion" tabindex="0">
  <div class="AccordionPanel">
    <div class="AccordionPanelTab"><img src="http://2.bp.blogspot.com/-MJDbtNcz-qc/UC8xQFYIMvI/AAAAAAAAAak/qTgJaO6lwx4/s1600/arrow-down.png" height="23" width="26">Title_Series</div>
    <div class="AccordionPanelContent">
      <ol>
         <li><a href=" Your_Link "> Your_Title </a></li>
         <li><a href="Your_Link"> Your_Title </a></li>
         <li><a href=" Your_Link "> Your_Title </a></li>
         <li><a href=" Your_Link "> Your_Title</a></li>
        <li><a href=" Your_Link "> Your_Title</a></li>
      </ol>
    </div>
  </div>
  <div class="AccordionPanel">
    <div class="AccordionPanelTab"><img src="http://2.bp.blogspot.com/-MJDbtNcz-qc/UC8xQFYIMvI/AAAAAAAAAak/qTgJaO6lwx4/s1600/arrow-down.png" height="23" width="26">  Title_Series </div>
    <div class="AccordionPanelContent"><ol>
         <li><a href=" Your_Link"> Your_Title </a></li>
         <li><a href=" Your_Link"> Your_Title </a></li>
         <li><a href=" Your_Link"> Your_Title </a></li>
         <li><a href=" Your_Link"> Your_Title </a></li>
        <li><a href=" Your_Link"> Your_Title </a></li>
      </ol></div>
  </div>
  <div class="AccordionPanel">
    <div class="AccordionPanelTab"><img src="http://2.bp.blogspot.com/-MJDbtNcz-qc/UC8xQFYIMvI/AAAAAAAAAak/qTgJaO6lwx4/s1600/arrow-down.png" height="23" width="26"> Title_Series </div>
    <div class="AccordionPanelContent"><ol>
         <li><a href=" Your_Link "> Your_Title </a></li>
         <li><a href=" Your_Link "> Your_Title </a></li>
         <li><a href=" Your_Link "> Your_Title </a></li>
         <li><a href=" Your_Link "> Your_Title </a></li>
        <li><a href=" Your_Link "> Your_Title </a></li>
      </ol></div>
  </div>
  <div class="AccordionPanel">
    <div class="AccordionPanelTab"><img src="http://2.bp.blogspot.com/-MJDbtNcz-qc/UC8xQFYIMvI/AAAAAAAAAak/qTgJaO6lwx4/s1600/arrow-down.png" height="23" width="26"> Title_Series </div>
    <div class="AccordionPanelContent"><ol>
         <li><a href=" Your_Link "> Your_Title </a></li>
         <li><a href=" Your_Link "> Your_Title </a></li>
         <li><a href=" Your_Link "> Your_Title </a></li>
         <li><a href=" Your_Link "> Your_Title </a></li>
        <li><a href=" Your_Link "> Your_Title </a></li>       </ol></div>
  </div>
  <div class="AccordionPanel">
    <div class="AccordionPanelTab"><!-- Don't Remove or Edit the code below, due credits to the author
    Blogger Indonesia : zulkhamsyahmh.blogspot.com-->
    <a href="http://zulkhamsyahmh.blogspot.com/2012/08/create-accordion-menu.html" target="_blank" ><img src="http://2.bp.blogspot.com/-MJDbtNcz-qc/UC8xQFYIMvI/AAAAAAAAAak/qTgJaO6lwx4/s1600/arrow-down.png" height="23" width="26"  ></a> Title_Series </div>
    <div class="AccordionPanelContent"><ol>
         <li><a href=" Your_Link "> Your_Title </a></li>
         <li><a href=" Your_Link "> Your_Title </a></li>
         <li><a href=" Your_Link "> Your_Title </a></li>
        <li><a href=" Your_Link "> Your_Title </a></li>
        <li><a href="Your_Link">Your_Title</a></li>
    </ol></div>
  </div>
</div>
<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
</script>



How to Edit the Code

Find Any :

Title_Series

Yout_link
Your_Title

And Replace With Your Own Setting, If You Get Any Confuse, Please Comment below and if you want to change any color, use this Color Code Generator to Generate the code

Like the Post? Do share with your Friends.

Posted in: , , ,

0 komentar:

Post a Comment