Custom Colourful Drapdown Navigation Menu Bar Widget For Blogger In Hindi

Custom Colourful Drapdown Navigation Menu Bar Widget For Blogger In Hindi (Step-to-step-full-guide-in-hindi)

 

Blogger ke liye bahut si templates me navigation menu nhi milti hai.. Simlpe blogger templates me to aapko navigation menu kabhi nhi milegi..

Navigation menu etc. ke jyada acche features premium templates hi provide karwati hain, or jyadater bloggers apne blog me premium templates use na karke free templates hi use karte hain, lekin Blogger me free custom templates use karne par aapko Nevigation menu nhi milti, or jin templates me milti hai wo jyada acchi nhi hoti hai, isliye bloggers sochte hain, ki mein apne blog par custom Nevigation menu add karu, jo dekhne me jyada behtar lage or visitors ko bhi pasand aaye..

Related Post – Blogger par jQuery facebook popup Likebox widget kaise add kare

Isliye agar aap bhi apne blog par free template use karte hain, or apne blog ke liye acchi si custom Nevigation menu add karna chahte hain, to aaj iss post mein me aapko btauga ki ‘Blogger Me Colourful Custom Nevigation Menu Kaise Add Kare’…

👉 To chaliye jante hain :-

Custom Colourful Drapdown Navigation Menu Bar Widget For Blogger In Hindi

Custom Colourful Drapdown Navigation Menu Bar Widget For Blogger In Hindi

 

– Blogger me Colourful Dropdown Navigation Menu Widget add karne ke liye aap yeh steps follow kare –

1 :- Sabse pehle apne blogger Dashboard me jaye or Template par click kare..

Note :- Pehle apni blog template ka backup jarur lein.. Agar Navigation Menu me kuch errors aa jaye ya acche se kaam na kare to backup kaam aayega..

2 :- Ab Edit HTML par click kare.. Edit

HTML par click karne ke baad aapke saamne aapki template ki coding open ho jaegi..

3 :- Ab ctrl+f press karke <head> search kare or uske niche yeh code paste kare ➡

<script src='http://downloads.hindibloggerbuzz.com/jquery-pack-colourful.js' type='text/javascript'></script>

<script src='http://downloads.hindibloggerbuzz.com/jcarousel-colourful.js' type='text/javascript'> </script>

<script src='http://downloads.hindibloggerbuzz.com/files/mt-colourful.js' type='text/javascript'></script>

 

4 :- <body> ke niche yeh poora code paste karne ke baad

body {
----
---
)

 search kare or iske just aage yeh code paste kare –

body {
margin:0px
padding:0px;


}

5 :- Ab <body> ya phir <body expr:class=’&quot;loading&quot; + data:blog.mobileClass’> search kare or uske just niche (down me) ye code paste kare ➡

<!--START OF COLOURFUL TABS BY HINDIBLOGGERBUZZ.COM-->

<style>

/*------- Colourful Tabs Menu by www.HindiBloggerBuzz.com -------*/

.MBT-Nav-container {

border: 1px solid #cfcfcf;

background: url(http://1.bp.blogspot.com/-hQ4r1kqybdw/UEIRnGogqyI/AAAAAAAAHeI/tPZ2FXRUO98/s400/menu-bgd.png) bottom left repeat-x;

position: relative;

margin: 0; padding: 0;

border: 1px solid #cfcfcf;

}

ul#nav {

border-left: 1px solid #cfcfcf;

border-right: 0px solid #cfcfcf;

background: url(http://1.bp.blogspot.com/-hQ4r1kqybdw/UEIRnGogqyI/AAAAAAAAHeI/tPZ2FXRUO98/s400/menu-bgd.png) bottom left repeat-x;

position: relative;

font-size: 12px; font-family: helvetica, arial, sans-serif;

list-style: none; margin: 0 auto; padding: 0;

width: 960px;

}

# nav ul {

margin: 0;

}

:focus {

outline: 0;

}

*html ul#nav { clear: both; height: 1%; }

ul#nav li a {

display: block;

float: left;

text-transform: uppercase;

font-weight: bold;

line-height: 33px;

padding: 0 13px 0 10px;

color: #333;

text-decoration: none;

background: url(http://3.bp.blogspot.com/-GhdMtMAzybA/UEIRnwbrOqI/AAAAAAAAHeU/fShdjYuWetk/s400/menu-rule.png) right 2px no-repeat;

}

*html ul#nav li.top-link { float: left; margin: 0px 0 -13px 0; padding-top: 2px; }

*:first-child+html ul#nav li.top-link { float: left; margin: 0px 0 -13px 0; padding-top: 2px; }

ul#nav li a:hover, ul#nav li a.open { color: #fff; }

ul#nav li#mbt a:hover, ul#nav li#mbt a.open { background: #0f1f37; }

ul#nav li#link-entertainment a:hover, ul#nav li#link-entertainment a.open { background: #b70943; }

ul#nav li#link-news a:hover, ul#nav li#link-news a.open { background: #cf3c02; }

ul#nav li#link-life a:hover, ul#nav li#link-life a.open { background: #724375; }

ul#nav li#link-technology a:hover, ul#nav li#link-technology a.open { background: #02b0cf; }

ul#nav li#link-top10 a:hover, ul#nav li#link-top10 a.open { background: #353533; }

ul#nav li#links-1 a:hover, ul#nav li#links-1 a.open { background: #b70943; }

ul#nav li#links-2 a:hover, ul#nav li#links-2 a.open { background: #289728; }

ul#nav li#links-3 a:hover, ul#nav li#links-3 a.open { background: #666666; }

ul#nav li#links-4 a:hover, ul#nav li#links-4 a.open { background: #b70943; }

ul#nav li#link-home a {

padding: 0 33px 0 10px;

text-indent: -9999px;

background: url(http://2.bp.blogspot.com/-IuFcujZl650/UEIRm1ja0uI/AAAAAAAAHd8/g3llMl2_RA8/s400/home-icon.png) right 0px no-repeat;

}

*html ul#nav li#link-home a { padding: 0; width: 43px; }

ul#nav li#link-home a:hover { background: url(http://2.bp.blogspot.com/-IuFcujZl650/UEIRm1ja0uI/AAAAAAAAHd8/g3llMl2_RA8/s400/home-icon.png) right -33px no-repeat; }

/* Sub-Vertical Navigation */

ul.sub-nav {

position: absolute;

top: 33px;

left: -1px;

overflow: hidden;

width: 960px;

display: none;

z-index: 999;

list-style: none;

padding-left:0px;

}

ul#nav li#mbt ul.sub-nav { background: #6f7987 url(http://4.bp.blogspot.com/-gRDfUUsFFvo/UEIRmB-rQHI/AAAAAAAAHdk/PnpJ42Y5ylk/s400/business-subnav-bgd.png) top left repeat-x; }

ul#nav li#link-entertainment ul.sub-nav { background: #d46b8e url(http://4.bp.blogspot.com/-x-W--ENCpB4/UEIRmWbi1WI/AAAAAAAAHdw/VWjPx1M9Fow/s400/entertainment-subnav-bgd.png) top left repeat-x; }

ul#nav li#link-news ul.sub-nav { background: #e28a67 url(http://1.bp.blogspot.com/-mow7_vOvv4Y/UEIRwMycevI/AAAAAAAAHeg/Cc6h-0Hv-7Y/s400/news-subnav-bgd.png) top left repeat-x; }

ul#nav li#link-life ul.sub-nav { background: #aa8eac url(http://2.bp.blogspot.com/-UmuzlpeD1EM/UEISysxvDbI/AAAAAAAAHe4/N78T1ifkhug/s400/life-subnav-bgd.png) top left repeat-x; }

ul#nav li#link-technology ul.sub-nav { background: #67d0e2 url(http://2.bp.blogspot.com/-ZrSwFUKdaJE/UEIRwVZsdKI/AAAAAAAAHes/M8UCU-GrSoI/s400/technology-subnav-bgd.png) top left repeat-x; }

ul#nav li ul.sub-nav li { float: left; }

ul#nav li ul.sub-nav li a {

float: none;

background: none;

font-size: 11px;

text-transform: none;

color: #fff;

line-height: 25px;

}

ul#nav li#mbt ul.sub-nav li a:hover, ul#nav li#mbt ul.sub-nav li a.active-cat{ background: #0f1f37 !important; }

ul#nav li#link-entertainment ul.sub-nav li a:hover, ul#nav li#link-entertainment ul.sub-nav li a.active-cat { background: #b70943 !important; }

ul#nav li#link-news ul.sub-nav li a:hover, ul#nav li#link-news ul.sub-nav li a.active-cat { background: #cf3c02 !important; }

ul#nav li#link-life ul.sub-nav li a:hover, ul#nav li#link-life ul.sub-nav li a.active-cat { background: #724375 !important; }

ul#nav li#link-technology ul.sub-nav li a:hover, ul#nav li#link-technology ul.sub-nav li a.active-cat { background: #02b0cf !important; }

</style>

<div class='HBB-Nav-container'>

<ul id='nav'>

<li class='non-vertical-link top-link' id='link-home'><a class='open' href='#'>Home</a></li>

<li class='top-link' id='mbt'><a href='#'>TAB 1</a>

<ul class='sub-nav'>

<li><a href='#'>SUB TAB 1.1</a></li>

<li><a href='#'>SUB TAB 1.2</a></li>

<li><a href='#'>SUB TAB 1.3</a></li>

<li><a href='#'>SUB TAB 1.4</a></li>

</ul>

</li>

<li class='top-link' id='link-entertainment'><a href='#'>TAB 2</a>

<ul class='sub-nav' style='display: none;'>

<li><a href='#'>SUB TAB 2.1</a></li>

<li><a href='#'>SUB TAB 2.2</a></li>

<li><a href='#'>SUB TAB 2.3</a></li>

<li><a href='#'>SUB TAB 2.4</a></li>

<li><a href='#'>SUB TAB 2.5</a></li>

</ul>

</li>

<li class='top-link' id='link-news'><a href='#'>TAB 3</a>

<ul class='sub-nav' style='display: none;'>

<li><a href='#'>SUB TAB 3.1</a></li>

<li><a href='#'>SUB TAB 3.2</a></li>

<li><a href='#'>SUB TAB 3.3</a></li>

<li><a href='#'>SUB TAB 3.4</a></li>

</ul>

</li>

<li class='top-link' id='link-life'><a href='#'>TAB 4</a>

<ul class='sub-nav' style='display: none;'>

<li><a href='#'>SUB TAB 4.1</a></li>

<li><a href='#'>SUB TAB 4.2</a></li>

<li><a href='#'>SUB TAB 4.3</a></li>

<li><a href='#'>SUB TAB 4.4</a></li>

<li><a href='#'>SUB TAB 4.5</a></li>

<li><a href='#'>SUB TAB 4.6</a></li>

<li><a href='#'>SUB TAB 4.7</a></li>

</ul>

</li>

<li class='top-link' id='link-technology'><a href='#'>TAB 5</a>

<ul class='sub-nav' style='display: none;'>

<li><a href='#'>SUB TAB 5.1</a></li>

<li><a href='#'>SUB TAB 5.2</a></li>

<li><a href='#'>SUB TAB 5.3</a></li>

<li><a href='#'>SUB TAB 5.4</a></li>

<li><a href='#'>SUB TAB 5.5</a></li>

</ul>

</li>

<li class='non-vertical-link top-link' id='link-top10'><a href='#'>TAB 6</a></li>

<!--

<li class='non-vertical-link top-link' id='links-1'><a href='#'>TAB 7</a></li>

-->

<!--

<li class='non-vertical-link top-link' id='links-2'><a href='#'>TAB 8</a></li>

-->

<!--

<li class='non-vertical-link top-link' id='links-3'><a href='#'>TAB 9</a></li>

-->

<!--

<li class='non-vertical-link top-link' id='links-4'><a href='#'>TAB 10</a></li>

-->

<li style='clear: both;'/>

</ul>

</div>

<!--END OF COLOURFUL TABS BY HINDIBLOGGERBUZZ.COM-->

 

Yeh code paste karne ke baad iss code me yeh changes kare

* Iss code me likhe sabhi # ki jagah aap jo page ye menu add karna chahte ho, uska full URL likhe or TAB ki jagah apne Page ya Menu ka Title likhe..

* Agar aap menu ki Width ko change karna chahte hain to width: 960px me change kar sakte hain..

* Agar aap kisi bhi SUB MENU me koi new Tab create karna chahte hain, to </ul> ke aage yeh code paste kar dein ➡

<li><a href=’#’>SUB TAB</a></li>

6 :- Ab aapki pasand ke saare changes, jaise URL, Menu, Submenu etc jodne ke baad Template ko Save kar dein..

Congratulations…..

ab aapke blog par new Colourful Custom Navigation Menu Jud chuki hai.. Aap isko apne blog ko open karke dekh sakte hain…

iss code me aapko kuch bhi or customisation ki jarurat ho, ya aapko ise add karne me koi bhi dikkat aa rahi ho, to apna sawal mujhse comment box me kare..

Also Read – 2017 ki best Android Apps, jo aapko jarur download karni chahiye

Blogger post editor ki poori jankari

1 COMMENT

LEAVE A REPLY

Please enter your comment!
Please enter your name here