शुक्रवार, 9 अक्तूबर 2020

how to create drop down navigation menu with submenu in blogger in Hindi

how to create drop down navigation menu with submenu in blogger in Hindi, how to create drop down menu in blogger, blogger drop down menu generator, simple drop down menu blogger, drop down menu blogger template.

    how to create drop down navigation menu with submenu in blogger in Hindi, how to create drop down menu in blogger, blogger drop down menu generator, simple drop down menu blogger, drop down menu blogger template.


    how to create drop down navigation menu with submenu in blogger in Hindi


    नमस्कार दोस्तों, Crazyblogger Tutorial में आपका स्वागत है, आज मैं हम सीखेंगे  कि ब्लॉगर Blogger में drop-down मेनू कैसे Add करे हिंदी में (how to create drop-down navigation menu with submenu in blogger in Hindi).


    Also Read: How to Create Whatsapp Group Links


    दोस्तों हम ब्लॉगर ब्लॉग में SUB मेनू के साथ drop down  मेनू को सम्मिलित करते हैं, Tab मेनू हमारे ब्लॉगर ब्लॉग पोस्ट को श्रेणीबद्ध कर सकते हैं जैसे कि हमारे पास एचटीएमएल और विंडोज़ ट्रिक पोस्ट हैं फिर हम इन श्रेणियों या टैब को बनाते हैं: -

    " Web Design " has two sub-menu [html] [CSS] and

    " Computer Tricks " have one sub menu [Windows trick]


    Step by Step Blogger में drop-down मेनू कैसे Add करे हिंदी में


    चरण 1: सबसे पहले हम ब्लॉगर layout पर जाते हैं और Add a गैजेट लिंक पर क्लिक करते हैं।

    how to create drop down navigation menu with submenu in blogger in Hindi

    चरण 2: HTML / JavaScript लिंक पर क्लिक करें।

    how to create drop down navigation menu with submenu in blogger in Hindi

    चरण 3: Content area में कोड पेस्ट करें और save बटन पर क्लिक करें।

    how to create drop down navigation menu with submenu in blogger in Hindi

    <ul id="menu_bar">
      <li><a href="#">Home</a></li>
      <li><a href="#">Menu 0</a></li>
      <li>
        Menu 1
        <ul>
          <li><a href="#">Sub-menu 1</a></li>
          <li><a href="#">Sub-menu 2</a></li>
          <li><a href="#">Sub-menu 3</a></li>
        </ul>
      </li>
    <li>
        Menu 2
        <ul>
          <li><a href="#">Sub-menu 1</a></li>
          <li><a href="#">Sub-menu 2</a></li>
          <li><a href="#">Sub-menu 3</a></li>
        </ul>
      </li>
     <li><a href="#">Menu 3</a></li>
      <li><a href="#">Menu 4</a></li>
    </ul>

    चरण 4: अब blogger theme लिंक पर क्लिक करें और customise बटन पर क्लिक करें।

    how to create drop down navigation menu with submenu in blogger in Hindi

    चरण 5: Advanced लिंक पर क्लिक करें और लिंक को नीचे Scroll करें और फिर CSS लिंक पर क्लिक करें। यहां हम CSS कोड पेस्ट करते हैं और अप्लाई टू ब्लॉग बटन पर क्लिक करते हैं।

    how to create drop down navigation menu with submenu in blogger in Hindi

    .tabs-inner .widget ul#menu_bar {
      text-align: left;
      display: inline;
      margin: 0;
      padding: 15px 4px 17px 0;
      list-style: none;
      border:none;
    }
    .tabs-inner .widget ul#menu_bar 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#menu_bar li a {
    padding:0;
    font-family: sans-serif; /* Font for the menu links */
    border:0;
    }
    .tabs-inner .widget ul#menu_bar 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#menu_bar li:hover a {
      background: transparent;
      color: #fff; /* font colour when you roll over a menu title link */
    }
    .tabs-inner .widget ul#menu_bar 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#menu_bar 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#menu_bar li ul li a{
      color:#fff  /* link colour of the sub menu items */
    }
    .tabs-inner .widget ul#menu_bar li ul li:hover {
      background: #666; /* background colour when you roll over sub menu items */
    }
    .tabs-inner .widget ul#menu_bar li:hover ul {
      display: block;
      opacity: 1;
      visibility: visible;
    }

    चरण 6: Blogger ब्लॉग पर जाएं।


    नोट: - यहाँ #Red Code को Blog URL से replace करे | 


    Conclusion:

     तो दोस्तों आशा करते ही की  इस पोस्ट how to create drop down navigation menu with submenu in blogger in Hindi आपको पसंद आएगी। आपको कुछ वि doubt हे तो निचे Comment Box question पूछ सकते हे.

    3 टिप्‍पणियां:

    © Copyright 2020 Crazyblogger