Blog Website Me Drop Down Menu Bar Add Kaise Kare (HTML/CSS Code)

Blog Website Me HTML va CSS Code Use karke Drop Down Menu Bar Add Kaise Kare

Hello friends. friends aaj ham seekhe ge ki apne Blog Me Darop Down Menu Bar Add Kaise karte hai. Blog me drop down menu bar create kaise karte hai. Dosto jaise ki aap sabhi ko pata hai Menu Bar hamre blog ke liye bhout jyada jaruri hai. vase to lagabhag sabhi Blogger Template me Menu Bar phale se hi hota hai. lekin kai Blogger Template asi bhi hoti hai jinme Menu Bar nahi hota. ya fir aap ko ek Drop Down Menu Bar ki jarurat hai lekin aap ki Blogger Template me keval Simple Menu Bar hai. to aap is post ko read karke apne blog me ek acha sa Drop Down Menu Bar add kar sakte ho. vase ek post me maine aap ko Menu bar add karne ke bare me bataya hai  ki  Bina HTML/CSS ko edit kiye HTML/JAVA SCRIPT KE davara apne blog me menu bar add kaise karte hai.

Ab agar aap ko HTML/CSS ki kam jaankari hai to aap us post ko read karke asani se apne Blog me Menu bar laga sakte ho. lekin vha tips sabhi blogger template me work nahi karti. ab agar aap ko HTML/CSS  ki thodi bhout knowledge  hai to aap is post ke read karke asani se apne blog me ek acha sa menu bar add kar sakte ho. yani apne blog template me Drop Down Menu Bar Create kaise karte hai.

HTML/CSS ka use karke apni Blog Website me Menu Bar add kaise karte hai

Dosto  HTML/CSS ke Dvara apne blog me menu bar add karne ke liye aap ko apni blog website me kuch HTML va CSS Code add karne pade ge. In Code ko add karne ke liye aap ko koi jyada HTML/CSS ki Knowledge ki jarurat nahi, agar aap ko HTML/CSS ki Thodi si bhi Knowledge hai to bhi aap asani se Apni Blog Website me Menu Bar add kar sakte ho.

To chaliye dosto dekhte hai ki apni Blog Template me HTML/CSS add karke blog me menu bar add kaise karte hai.

 Step1.   Apni Blog Website me Menu Bar add karne ke liye sabse phale apne  blog Dashboard me Login karo.

 Step2.   Ab Template (Theme) par click karo

 Step3.   Ab edit HTML par Click karo.

 Step4.   Ab jump to Widget par click karo

 Step5.   Ab Header1 par click karo
Ab agar aap apne Menu Bar ko top me header image va blog title se phale lgana chahate hai to aap  </head> code ko search karke uske niche diye gaye HTML code ko past kar do.

 Step6.   Agar aap apne Menu Bar ko header image va blog website title ke niche lagana chahate ho to aap ko vha par aap ke blog ke header image website Blog title  ki coding milegi. header    image va title ki coding 5-10 line me hoti hai. Ab aap niche diye gaye code ko header coding ke niche past karna hai. ab aap soch rhe hoge ki hame kaise pata chalega ki header image va title coding end kab hoti hai. ab aap ko niche 1-2 bar  </div> </div> dikhe uske niche diye gaye Menu bar HTMLcode ko past kar do. jaisa ki photo me diya gaya hai.

Blog Website Drop Down Menu Bar HTML Code

  

<div id='topnav-outside'> <div id='topnav-intside'> <div class='bofollowbutton-nav'> <a href='https://www.facebook.com/blogornate' target='_blank'> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-lDpdC7u5UBTZDytD7swM1WFyC93fwk5VevgUHZ25-JsTMnI5RL-rJE0jmGwr-umr8gfMBlHz85R_7LTzed6ijVO-yfR79is-mlHYos9xk8eAVsUzzlS-5nq1_7oPp6o0hTPJpZx1NBto/s1600/facebook_bo.png'/> </a>        <a href='https://twitter.com/Blog_Ornate' target='_blank'> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR2oarS0RA8ccATyRtny5MYKCrWzUot9xWqJKrU_EnHc8gfBh36guhKqTzMRiq513X0MnIyIUHHRP7kH_552kLizvHztXkzniYyHFQSlZ0oYwZ2YunKK3xX-5lOsKV0VPFlHZw833VP1om/s1600/twitter_bo.png'/> </a>        <a href='https://plus.google.com/+Blogornatepage' target='_blank'> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIvWVBdokauCgV_1FUY_-4b8taFhyphenhyphenRQ-oXvjXfl-l3cH3SfbMmD8VBP7yejyq2eDuhm7HdBC_imTSLGfUw08vGXy5gdWzNnCMhayIIyzQ9b6t4Ul9UWRiaOV7Si51m5B7w5KCkTYIJfwaT/s1600/gplus_bo.png'/> </a> </div> <div id='bonav' role='navigation'> <a href='#bonav' title='Show navigation'> ☰ Show Menu </a> <a href='#' title='Hide navigation'> ☰ Hide Menu </a> <ul> <li class='home-icon'> <a href='/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4aQZu4yxAv5vPadJ_yVoR8DFhpMuXxzw_ZteLNO_nmC1AN0Ix3AKSaeDrhtMUVJKmnMUNpcy6okZU2z0rAnIRUrCGhzFO0Xyj65XHeDZYhHJBxguwgYbx5KMpeDLLXeYJDynx9dr2pol1/s1600/blog-ornate-home-icon.png' style='height:20px;width:20px;margin:14px 0 0 0;'/></a> </li> <li class='has-child'><a aria-haspopup='true' href='#'>Menu Item 1</a> <ul> <li><a href='#'>Sub Menu Item 1</a></li> <li><a href='#'>Sub Menu Item 1.1</a></li> </ul> </li> <li class='has-child'><a aria-haspopup='true' href='#'>Menu Item 2</a> <ul> <li><a href='#'>Sub Menu Item 2</a></li> <li><a href='#'>Sub Menu Item 2.2</a></li> <li><a href='#'>Sub Menu Item 2.3</a></li> </ul> </li> <li class='has-child'><a aria-haspopup='true' href='#'>Menu Item 3</a> <ul> <li><a href='#'>Sub Menu Item 3</a></li> </ul> </li> <li><a href='#'>Menu Item 4</a></li> <li><a href='#'>Menu Item 5</a></li> </ul> </div> </div> </div>

 Step7.   Ab Apni blog website me ]]></b:skin> code ko search karo or niche diye gae codes ko ]]></b:skin> se just phale past kar do.

 Note.   Jyada tar blogger template me  ]]></b:skin> code search box me search karne par show nahi hota hai. isi liye sabse phale aap ssearch box me type karo <b:skin> Ab aap ko <b:skin>--<b:skin> code show hoga ab aap ko is kode ke bich me jo dot hai uspe click karna hai. ispe click karne ke baad me aap ko bhout sare blue colour ke code show hoge. ab aap search box me type karo  ]]></b:skin> aap ko code asani se mil jayega.

Blog Website Drop Down Menu Bar CSS Code

/***************************************** Main Menu CSS ******************************************/ /*-----Responsive Drop Down Menu by MBT ----*/ #menu{ background: #004489 url() repeat-x;; color: #FFF; height: 40px; border-bottom: 2px solid #DDD; border-top: 1px solid #369; } #menu ul,#menu li{margin:0 auto;padding:0 0;list-style:none} #menu ul{height:45px;width:100%} #menu li{float:left;display:inline;position:relative;font:bold 0.9em Arial;} #menu a{display: block; line-height: 40px; padding: 0 14px; text-decoration: none; color: #FFF; } #menu li a:hover{ color: #E4E4E4; -webkit-transition: all .1s ease-in-out; -moz-transition: all .1s ease-in-out; -ms-transition: all .1s ease-in-out; -o-transition: all .1s ease-in-out; transition: all .1s ease-in-out; background: #191919; } #menu input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer} #menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center} #menu label span{font-size:16px;position:absolute;left:35px} #menu ul.menus{ height: auto; overflow: hidden; width: 170px; background: #191919; position: absolute; z-index: 99; display: none; } #menu ul.menus li{ display: block; width: 100%; font:normal 0.8em Arial; text-transform: none; text-shadow: none; border-bottom: 1px dashed #31AFDB; } #menu ul.menus a{ color: #FFF; line-height: 35px; } #menu li:hover ul.menus{display:block} #menu ul.menus a:hover{ background: #414141; color: #FFF; -webkit-transition: all .1s ease-in-out; -moz-transition: all .1s ease-in-out; -ms-transition: all .1s ease-in-out; -o-transition: all .1s ease-in-out; transition: all .1s ease-in-out; } @media screen and (max-width: 800px){ #menu{position:relative} #menu ul{background:#111;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none} #menu ul.menus{width:100%;position:static;padding-left:20px} #menu li{display:block;float:none;width:auto; font:normal 0.8em Arial;} #menu input,#menu label{position:absolute;top:0;left:0;display:block} #menu input{z-index:4} #menu input:checked + label{color:white} #menu input:checked ~ ul{display:block} } /*****************************************

To Dosto aaj hamne dekha ki blog website me Drop Down Menu Bar add kaise karte hai. ab aap asani se apni Blog Website me menu bar create kar sakte ho. Bas aap ko Apne HTML code Ko ache se set karna hai. aap jaha par bhi Menu bar ke HTML Code ko past karoge vahi par aap ka Drop Down Menu Bar show hoga. Is Post ke dvara aap apne blog footer, header ke niche, header ke upar kahi bhi apna menu bar laga sakte ho. agr HTML Code Past Karke jab aap save karte ho to kai bar error show hota hai. error show hone par aap HTML code Ko Thoda Niche ya upar past karke dekho aap ka error sole ho jaye ga. agar fir bhi koi problem aaye to aap mujhe comment kar sakte ho.

 Searching Tag:  responsive navigation menu css , dropdown menu bar responsive menu css,  responsive drop down menu with submenu, free css menu templates, vertical menu bar in html and css free download, responsive css dropdown menu, how to make a drop down menu in blogger, how to make a horizontal menu bar in blogger, how to add menu in blogger template, how to add menu tabs in blogger, blogger navigation bar code, how to make a custom navigation bar in blogger, how to make menu bar in blog, how to create drop down navigation menu with submenu in blogger, , blog website me menu bar add kaise kare, blog me dropdown menu bar kaise lagaye, drop down menu bar HTML and CSS code for blogger, HTML va CSS ka use karke blog me menu bar create kaise karte hai, responsive dropdown menu bar css and html.