તમારા બ્લોગમાં ડ્રોપ ડાઉન મેનુ કેવી રીતે બનાવશો ?

તમારા બ્લોગમાં ડ્રોપ ડાઉન મેનુ કેવી રીતે બનાવશો ?

અહી ડ્રોપ ડાઉન મેનુ બનાવવા ની રીત આપેલી છે :

  1. સૌ પ્રથમ ડેશ ર્બોડ માં ખોલી લે આઉટ માં જાવ :

  2.  લે આઉટમાં જઇ એક ગેજેટ ઉમેરો :

  3.  તેમા પસંદ કરો  HTML/JavaScript :

  4. નીચે આપેલા કોડ કોપી કરી તેમા પેસ્ટ કરો :

<div id='menubar'>
<ul id='menus'>
<li>
<a href='#'>MenuItem</a>
</li>
<li>
<a href='#'>MenuItem</a>
</li>
<li>
<a href='#'>MenuItem</a>
</li>
<li>
<a href='#'>MenuItem</a>
<ul>
<li><a href='#'>SubMenuItem</a></li>
<li><a href='#'>SubMenuItem</a></li>
<li><a href='#'>SubMenuItem</a></li>
</ul>
</li>
</ul>
</div>

  5.  યોગ્ય મેનુ લેબલ સાથે MenuItem બદલો
  6.  યોગ્ય પેટા મેનુ લેબલ સાથે SubMenuItem બદલો
  7.  યોગ્ય URL સાથે # બદલો
  8.  Click Save
  9.   તમારે મેનુ જે જગ્યાએ લઇ જાવુ હોય ત્યાં ગેજેટ ને મુકો
  10.  Click ગોઠવણ સાચવો

  11.  Click on Template

  12.  Click Edit HTML

  13.  Click Proceed

  14.  નીચે નો કોડ તેમા શોધો :

       
    ]]></b:skin>
 

15.  
નીચે આપેલા કોડ કોપી કરી ઉપર આપેલા કોડ ની ઉપર પેસ્ટ કરી દ્યો :

---

/*-------- Begin Drop Down Menu -------*/

#menubar {
    background: #8E8E8E;
    width: 840px;
    color: #FFF;
        margin: 0px;
        padding: 0;
        position: relative;
        border-top:1px solid #B2FFFF;
        height:35px;
}

#menus {
    margin: 0;
    padding: 0;
}

#menus ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}

#menus li {
    list-style: none;
    margin: 0;
    padding: 0;
        border-left:1px solid #1A6680;
        border-right:1px solid #1A6680;
        height:35px;
}
#menus li a, #menus li a:link, #menus li a:visited {
    color: #FFF;
    display: block;
   font:normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif;    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}

#menus li a:hover, #menus li a:active {
    background: #130000; /* Menu hover */
    color: #FFF;
    display: block;
    text-decoration: none;
        margin: 0;
    padding: 9px 12px 10px 12px;      
}

#menus li {
    float: left;
    padding: 0;
}

#menus li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 160px;
    margin: 0;
    padding: 0;
}

#menus li ul a {
    width: 140px;
}

#menus li ul ul {
    margin: -25px 0 0 160px;
}

#menus li:hover ul ul, #menus li:hover ul ul ul, #menus li.sfhover ul ul, #menus li.sfhover ul ul ul {
    left: -999em;
}

#menus li:hover ul, #menus li li:hover ul, #menus li li li:hover ul, #menus li.sfhover ul, #menus li li.sfhover ul, #menus li li li.sfhover ul {
    left: auto;
}

#menus li:hover, #menus li.sfhover {
    position: static;
}

#menus li li a, #menus li li a:link, #menus li li a:visited {
    background: #B3B3B3; /* drop down background color */
    width: 120px;
    color: #FFF;
    display: block;
    font:normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
z-index:9999;
border-bottom:1px solid #1A6680;
}

#menus li li a:hover, #menusli li a:active {
    background: #130000; /* Drop down hover */
    color: #FFF;
    display: block;     margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}

/*-------- End Drop Down Menu -------*/

---

  16.  Click Save Template, then Close