*ब्लॉग वर Drop-Down menu कसा add करावा*

*ब्लॉग वर Drop-Down menu कसा add करावा*

 पायरी १ - आपल्या ब्लॉग ला लॉग in करा  आणि त्यानंतर  Template ला क्लिक करून - Edit HTML या बटनावर क्लिक करा
पायरी २ - आता तुम्हाला दिसणाऱ्या code मध्ये कोठेही एकदाच click करा व त्यानंतर CTRL + F हि key दाबा म्हणजें त्या  window च्या वरील उज्यव्या कोपर्यामध्ये search box open झालेला दिसेल

पायरी ३ - आता खाली दिलेला code त्या  search box मध्ये type करा किवा copy-paste करा आणि enter दाबा.]]></b:skin>
पायरी- 4  ]]></b:skin> या code च्या पूर्वी खालील CSS copy करून paste करा.#jsddm {
height: 40px;
margin: 0;
overflow: visible;
z-index: 2;
padding: 15px;
position:relative;
}
#jsddm li {
float: left;
list-style: none;
font: 12px Tahoma, Arial;
}
#jsddm li a {
display: block;
white-space: nowrap;
margin:1px 3px;
border: 1px solid #AAAAAA;
background: #cccccc;
background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cccccc));
background: -moz-linear-gradient(top, #ebebeb, #cccccc);
padding: 5px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: #ffffff 0 1px 0;
color: #363636;
font-size: 15px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}
#jsddm li a:hover {
background: #C8C8C8;
}
#jsddm li ul {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white;
}
#jsddm li ul li {
float: none;
display: inline;
}
#jsddm li ul li a {
width: auto;
background: #CAE8FA;
}
#jsddm li ul li a:hover {
background: #A3CEE5;
}

पायरी 5 - आता पुन्हा box मध्ये खालील tag टाकून enter दाबा. (copy करून search box मध्ये paste केला तरी चालेल)
</head>
पायरी ६ - आता खालील script </head> या tag च्या बरोबर उजवीकडे / पूर्वी CSS copy करून paste करा.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'/>
  <script type='text/javascript'>
  //<![CDATA[
var timeout    = 500;
  var closetimer = 0;
  var ddmenuitem = 0;
function jsddm_open()
  {  jsddm_canceltimer();
  jsddm_close();
  ddmenuitem = $(this).find('ul').css('visibility', 'visible');}
function jsddm_close()
  {  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
function jsddm_timer()
  {  closetimer = window.setTimeout(jsddm_close, timeout);}
function jsddm_canceltimer()
  {  if(closetimer)
  {  window.clearTimeout(closetimer);
  closetimer = null;}}
$(document).ready(function()
  {  $('#jsddm > li').bind('mouseover', jsddm_open)
  $('#jsddm > li').bind('mouseout',  jsddm_timer)});
document.onclick = jsddm_close;
  //]]>
  </script>
पायरी ७ -  या window च्या डाव्या कोपर्यात वर असलेले  "Save Template" या बटनावर क्लिक करा म्हणजे आपण केलेले सर्व बदल save होतील.


पायरी ८ - आता आपल्याला मेनू चे HTML structure add करण्यासाठी Layout ला क्लिक करून नंतर निळ्या अक्षरांत असलेल्या "Add a gadget" व क्लिक करायचे आहे.

पायरी 9 - add gadget वर क्लिक केल्यानंतार आपणासमोर पुढील window येईल त्यामध्येHTML/JavaScript हा पर्याय निवडावा.

पायरी १० - आता तुमच्यासमोर एक blank window येईल त्यामध्ये खालील code paste करा .
<ul id="jsddm">  <li><a href="#">Home</a>  <li><a href="#">Link 1</a>  <ul>  <li><a href="#">Drop 1-1</a></li>  <li><a href="#">Drop 1-2</a></li>  <li><a href="#">Drop 1-3</a></li>  <li><a href="#">Drop 1-4</a></li>  </ul>  </li> <li><a href="#">Link 2</a>  <ul>  <li><a href="#">Drop 2-1</a></li>  <li><a href="#">Drop 2-2</a></li>  <li><a href="#">Drop 2-3</a></li>  <li><a href="#">Drop 2-4</a></li>  </ul>  </li> <li><a href="#">Link 3</a>  <ul>  <li><a href="#">Drop 3-1</a></li>  <li><a href="#">Drop 3-2</a></li>  <li><a href="#">Drop 3-3</a></li>  <li><a href="#">Drop 3-4</a></li>  </ul>  </li>  <li><a href="#">Link 4</a>  <ul>  <li><a href="#">Drop 4-1</a></li>  <li><a href="#">Drop 4-2</a></li>  <li><a href="#">Drop 4-3</a></li>  <li><a href="#">Drop 4-4</a></li>  </ul>  </li><li><a href="#">Link 5</a>  <ul>  <li><a href="#">Drop 5-1</a></li>  <li><a href="#">Drop 5-2</a></li>  <li><a href="#">Drop 5-3</a></li>  <li><a href="#">Drop 5-4</a></li>  </ul>  </li>    </li></ul>
महत्वाची सूचना -   Drop 2-1, Link 2 अश्या नावाच्या ऐवजी तुम्हाला हवे असलेले title टाका . # (ह्याश)  या  चीन्हायेवजी तुम्हाला हवा असलेला url टाकापायरी ११ - सर्वात खाली असलेल save या बटनावर क्लिक करा.