tag:blogger.com,1999:blog-8193278726666811965.post5048631887380045092..comments2024-03-27T15:37:18.257+05:00Comments on MyBloggerTricks: Add Custom Drop Down Menu To Templates by Josh PetersonMohammad Mustafa Ahmedzaihttp://www.blogger.com/profile/11681339458447132019noreply@blogger.comBlogger52125tag:blogger.com,1999:blog-8193278726666811965.post-39529240572511597492015-11-23T07:09:39.300+05:002015-11-23T07:09:39.300+05:00THANK YOU! I have been trying to get my drop downs...THANK YOU! I have been trying to get my drop downs to work for 3 hours! Your trick worked! I am so beyond grateful. Shannahttps://www.blogger.com/profile/16004464213394683543noreply@blogger.comtag:blogger.com,1999:blog-8193278726666811965.post-82914060489277077512015-10-13T07:01:46.021+05:002015-10-13T07:01:46.021+05:00Is there a way to make this drop down work on a mo...Is there a way to make this drop down work on a mobile phone? If so, what do I need to do. Thank you for any help!Anonymoushttps://www.blogger.com/profile/13829508135365406515noreply@blogger.comtag:blogger.com,1999:blog-8193278726666811965.post-7336065593203213412015-08-23T00:35:56.041+05:002015-08-23T00:35:56.041+05:00I know i am absolutely technologically challenged ...I know i am absolutely technologically challenged but i have done great putting my blog together. <br />I am using the watermark theme and i need the dropdown menu for my blog. I have searched the code and the code given above doesnt work for me. I have been working on this for 3 days and trying to figure it all out but it doesnt work for me. actuallt the code above doesnt exist for me.<br /><br />Please help a desperate me. Thank youKatchie Nzamahttps://www.blogger.com/profile/17102117638764204923noreply@blogger.comtag:blogger.com,1999:blog-8193278726666811965.post-85005992527825202752015-08-10T03:20:49.335+05:002015-08-10T03:20:49.335+05:00I had a similar issue; that really depends on how ...I had a similar issue; that really depends on how long each tab title is and the designated width for your nav bar.Gabrielle Bakerhttps://www.blogger.com/profile/10668485673765722967noreply@blogger.comtag:blogger.com,1999:blog-8193278726666811965.post-14930397949906075002013-10-16T21:49:33.867+05:002013-10-16T21:49:33.867+05:00Please help, I also have the ethereal template and...Please help, I also have the ethereal template and the above mentioned codes are not there. This is the only tab related codes in my template. Is there another code for this thank you so much<br /><br /> <... class='tabs-outer'><br /> Mandy Bhttps://www.blogger.com/profile/17554831329999010562noreply@blogger.comtag:blogger.com,1999:blog-8193278726666811965.post-25939006149704639532013-03-02T12:09:58.754+05:002013-03-02T12:09:58.754+05:00Thanks a lot for this excellent tutorial....
HTML...Thanks a lot for this excellent tutorial....<br /><br />HTML coding is like rocket science for me so I used to experiment to improve my blog's look.<br /><br />Seven months back, I thought to add a menu(with dropdown list) to my blog. so I searched the web and found so many tutorials but I was unable to add them as new menu had conflict with template's codes. Every time I add the codes to CSS or widget, the end result would be a weird menubar in my blog. I finally decided to avoid menubar for my blog.<br /><br />But couple of days back, I came to know about the main reason of menubar failures after reading this tutorial. So again thanks for the same.<br /><br />Now I thoroughly read both tutorial (1. create-drop-down-menu-in-blogger and 2.add-custom-drop-down-menu-to-templates by Josh Peterson)and combined them and created a cool menu bar with smooth fading effects too.<br /><br />But again, I am facing a problem that I am unable to change color of active tab/page. I mean viewers will not get idea about where they are by looking at menu bar. <br /><br />I think you understood my query. I will be very much thankful, if you solve my doubt. And should I post the codes I used?Pritesh Nanalal Patelhttps://www.blogger.com/profile/03012199701840099744noreply@blogger.comtag:blogger.com,1999:blog-8193278726666811965.post-12131699996959057542013-02-22T22:43:37.119+05:002013-02-22T22:43:37.119+05:00This comment has been removed by the author.Brad and Meaganhttps://www.blogger.com/profile/06281007673497766722noreply@blogger.comtag:blogger.com,1999:blog-8193278726666811965.post-20436715739050789302013-01-23T09:08:59.938+05:002013-01-23T09:08:59.938+05:00When I use this edit i have the same issue but no ...When I use this edit i have the same issue but no background to the tabs... http://www.davidsmommy.com/<br />Anonymoushttps://www.blogger.com/profile/03455160024003976164noreply@blogger.comtag:blogger.com,1999:blog-8193278726666811965.post-15426717923991092672012-09-22T20:32:19.575+05:002012-09-22T20:32:19.575+05:00thank you soooooo much. I was really searching for...thank you soooooo much. I was really searching for this.!!alimajafhttps://www.blogger.com/profile/15332434467553098341noreply@blogger.comtag:blogger.com,1999:blog-8193278726666811965.post-70173550347507808832012-07-27T12:52:25.153+05:002012-07-27T12:52:25.153+05:00Hi! This works excellently, thanks so much. i have...Hi! This works excellently, thanks so much. i have 1 little doubt tho: How do i add my search bar to the mbt nav bar? My widget id is #CustomSearch1 and below I've provided the code for my nav bar. I want the search bar to appear at the leftmost part of the nav bar. <br /><br />/*----- MBT Drop Down Menu ----*/<br /><br />#mbtnavbar { <br /> background-color: transparent; <br /> width: 1300px; <br /> color: #ffffff; <br /> margin: 0px; <br /> padding: 0; <br /> position: relative; <br /> border-top:0px solid; <br /> height:40px;<br />}<br /><br />#mbtnav { <br /> margin: 0; <br /> padding: 10; <br />} <br />#mbtnav ul { <br /> float: left; <br /> list-style: none; <br /> margin: 0; <br /> padding: 0; <br />} <br />#mbtnav li { <br /> list-style: none; <br /> margin: 0; <br /> padding: 0; <br /> border-left: .9em transparent; <br /> border-right: .9em transparent; <br /> height:40px; <br />} <br />#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited { <br /> color:#ffffff; <br /> display: block; <br /> font:normal 14px Georgia, sans-serif; margin: 0; <br /> padding: 9px 12px 10px 12px; <br /> text-decoration: none; <br /> <br />} <br />#mbtnav li a:hover, #mbtnav li a:active { <br /> background-color: transparent; <br /> color: #ffffff; <br /> display: block; <br /> text-decoration: none; <br /> margin: 0; <br /> padding: 9px 12px 10px 12px; <br /> <br /> <br /> <br />}<br />#mbtnav li { <br /> float: left; <br /> padding: 0; <br />} <br />#mbtnav li ul { <br /> z-index: 9999; <br /> position: absolute; <br /> left: -999em; <br /> height: auto; <br /> width: 170px; <br /> margin: 0; <br /> padding: 0; <br />} <br />#mbtnav li ul a { <br /> width: 170px; <br />} <br />#mbtnav li ul ul { <br /> margin: -25px 0 0 165px; <br />} <br />#mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul { <br /> left: -999em; <br />} <br />#mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul { <br /> left: auto; <br />} <br />#mbtnav li:hover, #mbtnav li.sfhover { <br /> position: static; <br />}<br />#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited { <br /> background: transparent; <br /> width: 160px; <br /> color: #ffffff; <br /> display: block; <br /> font:normal 14px Georgia, sans-serif; <br /> margin: 0; <br /> padding: 9px 12px 10px 12px; <br /> text-decoration: none; <br />z-index:9999; <br />border-bottom:1px dotted #333;<br /> <br />} <br />#mbtnav li li a:hover, #mbtnavli li a:active { <br /> background-color: transparent; <br /> color: #ffffff; <br /> display: block; margin: 0; <br /> padding: 9px 12px 10px 12px; <br /> text-decoration: none; <br />}<br />/*---------------End MBT Nav-----------*/ARhttps://www.blogger.com/profile/09252839933332602626noreply@blogger.comtag:blogger.com,1999:blog-8193278726666811965.post-6048149504101259882012-06-25T20:00:02.105+05:002012-06-25T20:00:02.105+05:00Good but some feeling coming that its hard while e...Good but some feeling coming that its hard while editing and entering each links.<br />I choose the blogger inbuilt option.<br />Pages and its just works me without any hassle in 5 minutes.<br />Check out here <br />www.iosstuffs.blogspot.comiOS Stuffshttps://www.blogger.com/profile/08412769201697202409noreply@blogger.comtag:blogger.com,1999:blog-8193278726666811965.post-72703398168905709972012-05-25T13:58:49.930+05:002012-05-25T13:58:49.930+05:00Thanks you very much. Give me suggestion to make m...Thanks you very much. Give me suggestion to make my blog more attractive.<br /><br />www.easyhosting24.blogspot.comAnonymoushttps://www.blogger.com/profile/16240418167974453245noreply@blogger.comtag:blogger.com,1999:blog-8193278726666811965.post-25010802985826787092012-05-23T19:50:16.569+05:002012-05-23T19:50:16.569+05:00sir good eve can you teach us how to create a sepa...sir good eve can you teach us how to create a separate pages in blogger just like the one in the top of your myblogger tricksinformezonehttps://www.blogger.com/profile/01269047030651893006noreply@blogger.comtag:blogger.com,1999:blog-8193278726666811965.post-47185058470153455002012-05-16T23:54:28.227+05:002012-05-16T23:54:28.227+05:00Thank you so much for figuring this out! I've ...Thank you so much for figuring this out! I've been trying for days to figure out why my top level portion of the navbar had a white background on the "tabs". I used your trick to comment out the tabs part in the layout, and now its awesome!<br /><br />http://www.exstressyourself.comAnonymoushttps://www.blogger.com/profile/06474138163346357833noreply@blogger.comtag:blogger.com,1999:blog-8193278726666811965.post-84893880138444708162012-05-16T00:01:56.393+05:002012-05-16T00:01:56.393+05:00Hi, I followed your drop down menu instructions an...Hi, I followed your drop down menu instructions and was able to create exactly what I wanted for a menu. It works great using Safari with my Mac, but when I access the blog using Internet Explorer with my PC the drop down doesn't work. It shows up, behind my main blog and disappears as soon as I hover the mouse over it. Any idea why it would be doing this? Any suggestions would be much appreciated...the blog is arikandme.blogspot.com Thanks!Laurahttps://www.blogger.com/profile/09534289353387058214noreply@blogger.comtag:blogger.com,1999:blog-8193278726666811965.post-1589744610131353252012-05-05T11:28:25.178+05:002012-05-05T11:28:25.178+05:00Dear Mohammed,
I did earlier creat a drop down me...Dear Mohammed,<br /><br />I did earlier creat a drop down menu from your post, but when i tried for the new drop down menu from this post i not able to get it. and moreover i don't have the /* Tab in my HTML, so i added it but still nothing happens as in your picture. please suggest. and give me solutions. my blog is http://www.blogs-in-blog.blogspot.com.उदयन पी.के. तुळजापूरकर<br>एक भारतीय <br>Udayan P.K. Tuljapurkar<br>Indianhttps://www.blogger.com/profile/04799959080257261642noreply@blogger.comtag:blogger.com,1999:blog-8193278726666811965.post-12758768794513474332012-04-26T09:56:37.654+05:002012-04-26T09:56:37.654+05:00I want to add breadcrumb in this template.
How sho...I want to add breadcrumb in this template.<br />How should I do??Anonymoushttps://www.blogger.com/profile/04622309714472733908noreply@blogger.comtag:blogger.com,1999:blog-8193278726666811965.post-44656886010982971452012-04-11T14:16:40.964+05:002012-04-11T14:16:40.964+05:00Dear Mohammad.
Thank's for sharing this knowle...Dear Mohammad.<br />Thank's for sharing this knowledge. I am really grateful.<br />I have followed your instruction, and it works.<br />Then I enlarge the font on the "MAIN MENU", and the "SUB-MENU" as well, then I got a problem. <br />Everytime I hoover the cursor on the "MAIN MENU" of the drop down menu, the "DROP DOWN MENU" shows up, but theres a gap between the "MAIN MENU" and "SUB-MENU". <br />When I head the cursor to "SUB-MENU", the "SUB-MENU" disappear, due it has to "CROSSING" the gap.<br />How can I fix this ?Mr Gatothttps://www.blogger.com/profile/09733333427396097456noreply@blogger.comtag:blogger.com,1999:blog-8193278726666811965.post-67251396128782656772012-04-08T17:44:00.412+05:002012-04-08T17:44:00.412+05:00hello my name is muzammal
mere blog me har cheaz ...hello my name is muzammal <br />mere blog me har cheaz dubble ho gai ha pleaz help me<br />http://artistic4u.blogspot.com/<br />this my blog link<br />pleaz help me ok baytechshoplyhttps://www.blogger.com/profile/16336023067348786396noreply@blogger.comtag:blogger.com,1999:blog-8193278726666811965.post-26768416154438604442012-03-13T07:15:55.532+05:002012-03-13T07:15:55.532+05:00I found where the problem comes from. However I do...I found where the problem comes from. However I do not know how to fix it. When I change the font to a larger size (from 12px to 20px) the drop down disappears when you move down the list.<br /><br />http://addressmthl.blogspot.com/M. Murphyhttps://www.blogger.com/profile/00606957895138038851noreply@blogger.comtag:blogger.com,1999:blog-8193278726666811965.post-71157067457869428932012-03-13T06:47:42.184+05:002012-03-13T06:47:42.184+05:00I am still having the the same problem with the dr...I am still having the the same problem with the drop down. When I hover over the top tab they all show, But when I move my courser down to select a page the drop down disappears. If you could please help my link is:<br /><br />http://addressmthl.blogspot.com/<br /><br />I also cannot get rid of the red dotted lines, by deleting border-bottom:1px dotted #333;<br /><br />Please HelpM. Murphyhttps://www.blogger.com/profile/00606957895138038851noreply@blogger.comtag:blogger.com,1999:blog-8193278726666811965.post-81989779526450365292012-03-06T09:06:51.331+05:002012-03-06T09:06:51.331+05:00hey Mohammad,
i ve been reading your posts and tha...hey Mohammad,<br />i ve been reading your posts and thanks to you, i ve been able to add so many things to my blog. However, i have one question. I want to add this drop down menu to the left hand side of my header. Can you help??Anushahttps://www.blogger.com/profile/00468828542096373171noreply@blogger.comtag:blogger.com,1999:blog-8193278726666811965.post-23687863993515656632012-02-28T15:17:41.989+05:002012-02-28T15:17:41.989+05:00Hello Mohammad.
would this method also work for th...Hello Mohammad.<br />would this method also work for the 'Awesome' blogger templates by Tina Chen? <br />The notes above do not translate exactly, so I wanted to check before calving up my template beyond repair.<br />For example, where to place the */ is not the same, and it is not clear where in the code I should add your CSS code for the drop down menu. Does it go directly under the /* Tabs section?<br /><br />p.s. the blog im trying to build is http://securenetconsulting.blogspot.com/<br /><br />many thanksDocuhttps://www.blogger.com/profile/09842214619143815846noreply@blogger.comtag:blogger.com,1999:blog-8193278726666811965.post-684506393834761852012-02-04T09:30:15.910+05:002012-02-04T09:30:15.910+05:00Thanks for the great menu! I have implemented it, ...Thanks for the great menu! I have implemented it, but it's not working correctly in IE. http://extremecouponprofessors.blogspot.com/<br /><br />The dropdown is there, but it's behind the page elements even with Z-index 9999. It works fine in Firefox.<br /><br />Also, it still has the dashed line in the dropdown and as the top border of the navbar even though I changed the css to have solid borders.<br /><br />Thanks for your help!Anonymoushttps://www.blogger.com/profile/15618137481890552532noreply@blogger.comtag:blogger.com,1999:blog-8193278726666811965.post-683434956477814302012-01-08T21:39:55.181+05:002012-01-08T21:39:55.181+05:00Hi Mohammed!
Thank you so much for this tutorial....Hi Mohammed!<br /><br />Thank you so much for this tutorial. The dropdown menu works so well on my blog about ADHD www.JuliannaNWilson.com<br /><br />My problem is that when accessing my blog through Safari, the dropdown menu doesn't work. Do you know a trick that can help me solve this? It doesn't seem to recognize the page headers as links. In addition to this, the dropdown menu doesn't work.<br /><br />Thank you again for your help!<br /><br />JulieJulie Wilsonhttps://www.blogger.com/profile/11829715815563992817noreply@blogger.com