HomeХобби и стильRelated VideosMore From: RandomJuvament

How to Create a Drop Down Menu in Blogger

409 ratings | 103318 views
This video demonstrates how to create a drop down menu in Blogger. The code used in the video is available here: http://randomjuvament.blogspot.com/2012/08/how-to-create-drop-down-menu-in-blogger.html Music: Dreams by longzijun
Html code for embedding videos on your blog
Text Comments (149)
Pankaj Solanki (4 months ago)
Thanks for Sharing your idea. It really helps me to make a drop down menu.
Alberture (5 months ago)
#worldcuprussia2018 #MundialdeRusia2018 #WorldCup2018Russia https://recetassmagic.blogspot.com/ #Rusia2018 #Russia2018 #BuenDomingo #17Junio https://www.youtube.com/watch?v=Jasx1p7_f_E … … #RecetasMagicas #Magia https://twitter.com/MagicasRecetas #Qatar2022 #GraciasPetro #DuquePresidente
sushanth thurpu (6 months ago)
thnk's bro for giving me code
Benjamin (7 months ago)
the problem is how to get the code fast for beginners.
mohammad habibullah (8 months ago)
thanx for sharing valuable lessons, and it wll better to share a voice for beginner welcome: https://collegeeducation247.blogspot.com
MMO TIP (8 months ago)
How to make the text show at the bottom of video with the animation like your own?
BLOGGER MAHESHWER (10 months ago)
WITHOUT CODING CREATE DROPDOWN MENU ? IT IS POSSIBLE USING WITH LINK LIST GADGET.
Salisa W. (1 year ago)
Ok. Out of the 11 sub menu's I put. I can only see ONE. Why? I checked. There are all of it. The links are there even. I did everything shown.
Marwa Issam (1 year ago)
great video but my drop down menu dose not appear
Inder Aujla (1 year ago)
Nice Video dude really helped me thanks a lot
thanks a lot
VIPUL VERMA (1 year ago)
hello dear where is this code
VIPUL VERMA (1 year ago)
bhai code to bata khan se milenge
Divyesh Gupta (1 year ago)
go this link to see ausem wiki info>>wikidg.blogspot.in<<
Jerzy Gozdek (1 year ago)
Great tutorial. With my zero programming literacy I managed to develop the two-tier meny. However a quick question: How could the menu be expanded to three tiers" that I actually need: Tier 1 - Continent (works perfect); tier 2 - country (works great) and now I need tier 3 to connect individual posts on that country to the tier two (there may be up to 20 posts on 1 country) How could I( do it? Can you help? Thanks in advance
George Choo (1 year ago)
Its works!!! but can i make the menu words bigger???
ashwini Sharma (1 year ago)
Hi, I could create pages and Sub-pages as you suggested using html codes, but how do i link posts to Sub-pages? Please help. thanks.
Explore World (1 year ago)
Thanks, its really helpful :)
Reeshman Balkis (1 year ago)
I somehow made it to the first step but adding the second code didn't make any changes. my sub menu are still awkwardly shown separate .i tried the second code it is not working.someone help :(
Emma _ (1 year ago)
Great tutorial but my dropdown isn't working. Help!😬
BuzzYes (2 years ago)
bakwas hai
perception loop (2 years ago)
You got a cool blog. I've to revisit later. Hard to believe that you are so young. Thanks. I enjoyed my visit and try something later. I subscribed. I really need help with my blog. Please sub me too. All the best from California. ed
thank you, but i cant post under menu what can i do?
Alamin Mollah (2 years ago)
Thanks a lot!
Shah Sultan (2 years ago)
i cant find ]]></b:skin> this code. now what do i do?
nexxdm (2 years ago)
Yes, it works, if you need more professional menu try Swimbi (Swift Menu Builder)
Mahbub Mollah (2 years ago)
NOt so needed
Laura Cora (2 years ago)
thanks! this worked! but now how do you make each button to take you somwhere?
sherl vamps (2 years ago)
it dont work. the submenu doesnt appear fully
(3 years ago)
It works! Thank you so much!!=)))
Irfan Arif (3 years ago)
thanks bro
cable wire (3 years ago)
this video is so grainy I could make beer out of it
Hazmat Crew (3 years ago)
too scripted and complicated,i suggest using weebly dot com. it has complete feature setting with dragging ability and fluid costumization. you can choose between free version for basic domain or pro upgrade for creating your own domain address and monetization.good start for novice blogger.
Anny Chopard (3 years ago)
Hi, thank you for this tutorial. Do you know how to add a third level ?
Tushar Verma (3 years ago)
]]></b:skin> this code is not there
Harisankar L (1 month ago)
Dont worry add the same code :in the html widget: <style> /*-------- Begin Drop Down Menu -------*/ #menubar { background: #8E8E8E; width: 840px; color: #FFF; margin: 0px; padding: 0; position: relative; border-top:1px solid #B2FFFF; height:35px; } #menus { margin: 0; padding: 0; } #menus ul { float: left; list-style: none; margin: 0; padding: 0; } #menus li { list-style: none; margin: 0; padding: 0; border-left:1px solid #1A6680; border-right:1px solid #1A6680; height:35px; } #menus li a, #menus li a:link, #menus li a:visited { color: #FFF; display: block; font:normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif; margin: 0; padding: 9px 12px 10px 12px; text-decoration: none; } #menus li a:hover, #menus li a:active { background: #130000; /* Menu hover */ color: #FFF; display: block; text-decoration: none; margin: 0; padding: 9px 12px 10px 12px; } #menus li { float: left; padding: 0; } #menus li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 160px; margin: 0; padding: 0; } #menus li ul a { width: 140px; } #menus li ul ul { margin: -25px 0 0 160px; } #menus li:hover ul ul, #menus li:hover ul ul ul, #menus li.sfhover ul ul, #menus li.sfhover ul ul ul { left: -999em; } #menus li:hover ul, #menus li li:hover ul, #menus li li li:hover ul, #menus li.sfhover ul, #menus li li.sfhover ul, #menus li li li.sfhover ul { left: auto; } #menus li:hover, #menus li.sfhover { position: static; } #menus li li a, #menus li li a:link, #menus li li a:visited { background: #B3B3B3; /* drop down background color */ width: 120px; color: #FFF; display: block; font:normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif; margin: 0; padding: 9px 12px 10px 12px; text-decoration: none; z-index:9999; border-bottom:1px solid #1A6680; } #menus li li a:hover, #menusli li a:active { background: #130000; /* Drop down hover */ color: #FFF; display: block; margin: 0; padding: 9px 12px 10px 12px; text-decoration: none; } /*-------- End Drop Down Menu -------*/ </style> <div id='menubar'> <ul id='menus'> <li> <a href='#'>MenuItem</a> </li> <li> <a href='#'>MenuItem</a> </li> <li> <a href='#'>MenuItem</a> </li> <li> <a href='#'>MenuItem</a> <ul> <li><a href='#'>SubMenuItem</a></li> <li><a href='#'>SubMenuItem</a></li> <li><a href='#'>SubMenuItem</a></li> </ul> </li> </ul> </div>
Quang Ru (3 years ago)
Yesterday I made it! Today I did the same, the error message '' More than one widget was found with id: HTML3. Widget IDs nên unique ''. I do not know what is the cause? Who can help me?
Quang Ru (3 years ago)
Good code! thank you
Shyam Kumar KC (3 years ago)
not found ]]></b:skin> as well as <b:skin>….</b:skin>
Jaeiouscel Dulay (3 years ago)
its not helpful!!
Raja vikrant Sharma (3 years ago)
+Jaeiouscel Dulay http://helplogger.blogspot.in/ go to this website u will be able to do it
Florence St. John (3 years ago)
I need a little help. I successfully finished the first step, but the menu of categories listed (on the right side) on the homepage of my blog. All links are valid. However, after completing the second step, I had hoped it would move up to the bar, but it didn't. 
Kat Nikao (3 years ago)
Thank you!! Super helpful
rony software Hardware (3 years ago)
googd this youe video
Paola Sanchez (3 years ago)
Thanks so much. It worked very well for me. The only thnig, I would like to change the color of the font of the menu bar.When the cursor is on the Menu bar everything is perfect. But when it s not, I can't read what is written in there. Any clues???
Marina ☼ (3 years ago)
it works, but when the menu drops down and you move your cursor to a link the drop downmenu disappears its really hard to actually click the links?
Satyendra pratap singh (3 years ago)
where is the codes which needs to be pasted 
Acash lama (3 years ago)
only 3 menu item appear on menu bar and rest under the menubar...plz anybody have solution for this...
Nito fonacier (4 years ago)
thanks a lot, it worked for me 
Janette Mata (4 years ago)
If you cant find ]]></b:skin> SEARCH FOR <b:skin>….</b:skin>  click the dots and something will expand like a lot of codes then to the very bottom you will find ]]></b:skin> yay it worked for me beautyjanette (youtube and blog)
Albert Cruzer (2 years ago)
da real MVP ..xoxo
Frendz Rock (4 years ago)
Thanks brother ,i searched a lot for this content ,thank u for giving excellent demonstration,now i am well cleared .
Marina Požgaj (4 years ago)
I can't find that ]]></b:skin> in my HTML code.
Marina Požgaj (4 years ago)
I find. But thank you :D
Janette Mata (4 years ago)
If you cant find ]]></b:skin> SEARCH FOR <b:skin>….</b:skin>  click the dots and something will expand like a lot of codes then to the very bottom you will find ]]></b:skin>
Shilpy Jain (4 years ago)
Thanks a lot, it was very well explained. Thanks again for the help.
ELVIN rp (4 years ago)
not   working for me
Janette Mata (4 years ago)
If you cant find ]]></b:skin> SEARCH FOR <b:skin>….</b:skin>  click the dots and something will expand like a lot of codes then to the very bottom you will find ]]></b:skin>
Kyra Lyn Moss (4 years ago)
Can't find the ]]></b:skin> code anywhere. Maybe because my blog is more updated...?
Ankur Sharma (4 years ago)
where to get the codes?
Narendra Reddy (4 years ago)
How to get the second code
Landy Lindon (4 years ago)
Hi, How do i do this with my blogger pages ?
Jean-Yves Chouteau (4 years ago)
you know what my problem is, once you create these menus you cant change the tab or font colours, fonts styles etc, any news on that?
Jae (4 years ago)
Thank you very much~ Now I know where to put the css code :D
Freddy Dennis (4 years ago)
I can't find the "]]></b:skin>" line! Where should I paste the second part of text?
syarif amhar (4 years ago)
I think you can go to Templates, customize, advance, add CSS and then copy paste the code for "]]></b:skin>" replacement. because it works for me
JellyBellyMystic (4 years ago)
This isn't a drop-down menu for me, it's just a list of menu links. If you could help with drop down menu, please. Thank you.
Ricky Liu (4 years ago)
Thanks. It works. But I found the menu bar can't display correctly in mobile device like android phone. It seems Blogger can't convert the code automatically.
Sara Almeida (4 years ago)
this worked wonders!! Thank you ! I need to figure out how to change the colours though. 
Sara Almeida (4 years ago)
got the colours part! But i can't figure out how to align it to the left with all the other blog elements. It's about 10px too much to the right. Any advice?
idemac Official (4 years ago)
THANKS DUDE
Olalekan Saheed Akanmu (4 years ago)
@RandomJuvament: Thanks Buddy, but it would be nice if you could answer the simple question of how to put contents in those pages.
LiveBarbieslife (1 year ago)
The whole reason why i watched the dang video. ugh, did you ever figure it out?
Janette Mata (4 years ago)
Okay so it worked for me. I have pages on my blog then I use those links to add instead of the # and there
Jean-Yves Chouteau (4 years ago)
+Georgia Mertz you can create a blog and use the link as content or links to other blogs and pages you created with the same template
Georgia Yanez (4 years ago)
I haven't done it yet, but here's how I'm assuming you do it. The url you add to the code has to link to an existing page. So you do all the editing and adding content to those pages as if you were going to use blogger's pages tabs, and you link to the url in the first code from the video. Then you go to layout and edit the Pages widget so that those tabs aren't visible (Simply uncheck the box by each page name). One issue I can think of from this method is there might be some spacing issues in the look of the blog (I'm not sure) because of where your pages widget is located. It might make a space for something to be there even though you've hidden those page tabs. My solution to this would be to move the pages widget to somewhere on your blog where the space wouldn't change the look of things. Anyway, this is how I plan to do it. Hope it helps.
Mimmi Johansson (4 years ago)
Thats a good question I was just wondering the same thing ....
Rahul Barve (4 years ago)
hey i made the navigation bar by using ur vedio but i hv doubt how i post my data inside dat pages or categories dat i hv made can u help me plzzz give me reply asap...........
ICTO ARMM (4 years ago)
huge help.... how do i adjust the drop down width? @those who are having trouble... try remove the <div> and </div>. might work
Jasmine Dixon (4 years ago)
/*-------- Begin Drop Down Menu **-------*/ #menubar {     background: #8E8E8E;     width: 840px;     color: #FFF;         margin: 0px;         padding: 0;         position: relative;         border-top:1px solid #B2FFFF;         height:35px; } #menus {     margin: 0;     padding: 0; } #menus ul {     float: left;     list-style: none;     margin: 0;     padding: 0; } #menus li {     list-style: none;     margin: 0;     padding: 0;         border-left:1px solid #1A6680;         border-right:1px solid #1A6680;         height:35px; } #menus li a, #menus li a:link, #menus li a:visited {     color: #FFF;     display: block;    font:normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif;    margin: 0;     padding: 9px 12px 10px 12px;         text-decoration: none; } #menus li a:hover, #menus li a:active {     background: #130000; /* Menu hover */     color: #FFF;     display: block;     text-decoration: none;         margin: 0;     padding: 9px 12px 10px 12px;        } #menus li {     float: left;     padding: 0; } #menus li ul {     z-index: 9999;     position: absolute;     left: -999em;     height: auto;     width: 160px;     margin: 0;     padding: 0; } #menus li ul a {     width: 140px; } #menus li ul ul {     margin: -25px 0 0 160px; } #menus li:hover ul ul, #menus li:hover ul ul ul, #menus li.sfhover ul ul, #menus li.sfhover ul ul ul {     left: -999em; } #menus li:hover ul, #menus li li:hover ul, #menus li li li:hover ul, #menus li.sfhover ul, #menus li li.sfhover ul, #menus li li li.sfhover ul {     left: auto; } #menus li:hover, #menus li.sfhover {     position: static; } #menus li li a, #menus li li a:link, #menus li li a:visited {     background: #B3B3B3; /* drop down background color */     width: 120px;     color: #FFF;     display: block;     font:normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif;     margin: 0;     padding: 9px 12px 10px 12px;         text-decoration: none; z-index:9999; border-bottom:1px solid #1A6680; } #menus li li a:hover, #menusli li a:active {     background: #130000; /* Drop down hover */     color: #FFF;     display: block;     margin: 0;     padding: 9px 12px 10px 12px;         text-decoration: none; } /*-------- End Drop Down Menu **-------*/
Majid Ghaffari (4 years ago)
Hi , I can't find COD , there is no Video description , can anybody help plz ? 
how do I make the other drop down?
Amitabh Ghosh (4 years ago)
code not visible
rachna sharma (4 years ago)
great sounds easy let me try this!
Macca Adipurwa (5 years ago)
it works,.. should i do this before or after i have PAGES?
Sara Almeida (4 years ago)
after :) :) and use the same links as the already created pages
Hermawan firdiansyah (5 years ago)
Thanks for your tutorial Permit to download this video
Mohd Ilham (5 years ago)
how to do it for new blogspot's template....
Sara Almeida (4 years ago)
works the same way
Anil Neupane (5 years ago)
thanks 
Bro Photog (5 years ago)
why my categories menu only drop a single bar
Strix Kisler (5 years ago)
nice track...and thanks for the info....
YOGA P. TROP (5 years ago)
where is the link ?
Sophal Lonn (5 years ago)
I want to put categories as you showed in the video but I don't know how to write the code. Can you give me the code that you copy from the notepad?
My menus are overlapped one on another. Can u pls give a suggestion.
Muhammad Zulfikri (5 years ago)
SORI, no need to answer my question. I've got to do it. Thank you so much. ^_^
Muhammad Zulfikri (5 years ago)
thank for your video. its good for me and i i have 1 question. how to add more title menu? only can add 4 title. please help me okey. ^_^
divakar singh (5 years ago)
i won't be able to search > /b:skin >. please help..
Mohamed Zubair (5 years ago)
@traci ,underneath Published you'll see a option show more click on that,then you can see a link, click on that,from there you'll get the code cheers
Rosa Pena (5 years ago)
How would I add my current pages to these tabs?
Rosa Pena (5 years ago)
In about, click show more and it will show the video description :)
Traci Little (5 years ago)
where do I find the video description ?
Andrew Freeman (5 years ago)
I have done it wooo wooo Didn't refresh the Bl**dy page.. I thank you
Andrew Freeman (5 years ago)
Gave up!
Andrew Freeman (5 years ago)
IS this some sort of test? what piece of code are you not telling me about Heeeeeeeeeeeeelp!!
Andrew Freeman (5 years ago)
Failed........again MenuItem MenuItem MenuItem MenuItem SubMenuItem SubMenuItem SubMenuItem pattayainvideo.blogspot.com
Andrew Freeman (5 years ago)
Still at it.......... why doesn't this work?
Andrew Freeman (5 years ago)
Still at it... still cant get it to work grrrrrrrrrrrr
Andrew Freeman (5 years ago)
Gave up... All I get is a static menu no drop downs
weiming leow (5 years ago)
hi randomjuvament, just a question.. the submenu works but it will disappear when my mouse is trying to hover over it. Is there any way we can solve it?
Ruben Nunez (5 years ago)
Great tutorial. Thanks.
Christy Lollar (5 years ago)
Is there a way to center the text? Thanks!
Noveri Mandey (5 years ago)
How to create sub sub menu? Means I have 3 levels of menu. Thank you for the video, I managed to create the sub menus successfully. Great tutorial
Dipesh Nepal (5 years ago)
Instead of vertical drop--down, categories came horizontally ? help.
Dipesh Nepal (5 years ago)
code line no. 581, thank you !

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.