Blogger में Drop-Down मेनु कैसे सेट करें।

Drop-Down मेनु ब्लोग के मेनु को वर्गीकृत करने के लिए महत्वपूर्ण है। जब आप अपने कन्टेन्ट को ज्यादा केटेगरी मे विभाजित करते है तो आपको मेनु पर दो या उससे ज्यादा पंक्ति दिखाई देती है। Drop-Down मेनु से आप मेनु को केटेगरी मे विभाजित करके Drop-Down के रूप मे सेट कर सकते है। Drop-Down मेनु सेट करने का तरीका नीचे दिया गया है।


1. Blogger के Dashboard->Layout पर क्लिक करें।
2. साईडबार से Add Gadget क्लिक कर HTML/JavaScript सिलेक्ट करें


3. नीचे दिया गया कोड कोपि करें और  HTML/JavaScript विन्डो मे पेस्ट करें। href="#" मे # की जगह मेनु की लिंक और मेनु के नाम जरूरत अनुसार बदलें।
[code]<ul id="icbabdrop">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li>
    Topics
    <ul>
      <li><a href="#">Lifestyle</a></li>
      <li><a href="#">Blogging</a></li>
      <li><a href="#">Art and Design</a></li>
    </ul>
  </li>
<li>
    Topics 2
    <ul>
      <li><a href="#">Lifestyle 2</a></li>
      <li><a href="#">Blogging 2</a></li>
      <li><a href="#">Art and Design 2</a></li>
    </ul>
  </li>
 <li><a href="#">Portfolio</a></li>
  <li><a href="#">Contact</a></li>
</ul>
[/code]

4. Template > Customize पर क्लिक करें। Advanced > Add CSS सिलेक्ट करें और नीचे दिया गया कोड कोपी कर CSS बोक्ष मे पेस्ट करें। Apply to Blog क्लिक करें।

[code]/* DROPDOWN MENU BY icanbuildablog.com */
.tabs-inner .widget ul#icbabdrop {
  text-align: left;
  display: inline;
  margin: 0;
  padding: 15px 4px 17px 0;
  list-style: none;
  border:none;
}
.tabs-inner .widget ul#icbabdrop li {
  font-size: 12px/18px;
  font-family: sans-serif; /* Font for the menu */
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px;
  background: #fff; /* background colour of the main menu */
  float:none;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
.tabs-inner .widget ul#icbabdrop li a {
padding:0;
font-family: sans-serif; /* Font for the menu links */
border:0;
}
.tabs-inner .widget ul#icbabdrop li:hover {
  background: #555; /* background colour when you roll over a menu title */
  color: #fff; /* font colour when you roll over a menu title */
}
.tabs-inner .widget ul#icbabdrop li:hover a {
  background: transparent;
  color: #fff; /* font colour when you roll over a menu title link */
}
.tabs-inner .widget ul#icbabdrop li ul {
  z-index:1000;
  border:none;
  padding: 0;
  position: absolute;
  top: 45px;
  left: 30px;
  float:none;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
.tabs-inner .widget ul#icbabdrop li ul li {
  background: #555; /* background colour of the sub menu items */
  display: block;
  color: #fff; /* font colour of the sub menu items */
  text-shadow: 0 -1px 0 #000;
}
ul#icbabdrop li ul li a{
  color:#fff  /* link colour of the sub menu items */
}
.tabs-inner .widget ul#icbabdrop li ul li:hover {
  background: #666; /* background colour when you roll over sub menu items */
}
.tabs-inner .widget ul#icbabdrop li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}
[/code]

उपरोक्त CSS कोड मे जरूरत अनंसार कलर बदलें।