All Latest Earning Stuff: navigation menu

Showing posts with label navigation menu. Show all posts

Mega Menu with Images or Thumbnails for Blogger

Visual content holds a certain appeal that websites integrate images to every page, or even operate solely through photos. Now, with the new AJAX navigation menu widget, images can be added to the drop-down menu as well. The AJAX navigation menu for blogger is a widget designed specifically for the Blogger platform. It is inspired from the Mashable website long before it was given a makeover. Despite the plain and simple inspiration, the drop down menu with images is a huge hit. It works based on the jQuery library and Blogger JSON Feed API. Function-wise, it works just like a normal drop-down menu when JavaScript is disabled. For it to work online, a blog must be for public visitors, so the Blogger JSON Feed API will function as designed. <div class="ssmainhide" style="clear: both; text-align: center;"><img border="0" height="236" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJFu77BOOItovp6iQy816hXf8JRE_LjdZfU0R9kPIlBYW7FZNmYFr5YUuFoCeTEk_5hSyY5JuUhoZc9B8mb0MlI2zUIqgg41LDWc-fDiuaDDvGcXAgabCs_yIlyDSv-SV2aqwrAzAx6jkw/s320/mega-menu-with-images-or-thumbnails.png" width="320" /></div> <h3>Features</h3><h4>Multi-Level Menu Support</h4>The AJAX menu is a multi-level drop-down menu that is based on the standard unordered list of HTML. When a menu contains a sub-menu, it loads on the fly when a user rolls over the main menu. What is great about this is that it saves outgoing traffic, especially on a website that uses a large navigation. <h4>Cross-browser Compatibility</h4>Most AJAX applications will work across different browsers even with other plugins or proprietary technology already installed.  The menu with images works in the same premise, instead of being designed for a specific browser. Because there is no telling which browser you or your blog readers would use, the new AJAX drop-down mega menu with images is the ideal option. Some of the Windows browser supported includes IE5+, Firefox, Google Chrome, Safari Netscape 7+ and Opera 8+. When you're using a Mac, the AJAX menu is supported on Firefox, IE and Safari. If JavaScript is disabled, however, the menu is still accessible, but only as pure CSS menu. <h4>Automatic Sub-Menu Display</h4>With the new AJAX menu, you only need to roll over a menu item and sub-menus will automatically load. No need to click on a menu to get the sub-menu to drop down. This not only saves users' valuable navigation time, but also outgoing traffic. <h4>Menu Styling</h4>AJAX menus can be styled by simply changing the megamenu.js and the CSS style. The former is used when javaScript is turned on, while the latter is when it is turned off. You can adjust the menu parameters manually or you can use ready-to-use templates. There are plenty of other features, but you would not be able to use or experience them if you do not install the new mega menu with images. What do you need to do then to implement it in your blog or website? <div class="separator" style="clear: both; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkFxNNUpF5k88H-xQBFG7IivPCvWKgm8n4i55HuL9-H9z9WQC9idja4AHCwAv7Nw4jms3YgiLqBsGppZMzpht3yHjQnuzuJpwqjaBUJoTe0UXlL_iL9sJjO-17KCaiBgm059wTU1XZ2klM/s1600/mega-menu-with-images-thumbnails-blogger.png" /></div><div style="text-align: center;"><a class="demo-link" href="http://bloggermegamenu.blogspot.com/" rel="nofollow" target="_blank">DEMO </a></div> <h2>Adding Mega Menu with Images/Thumbnails in Blogger </h2>Step 1. Log in to your Blogger account, then go to the Dashboard. Select the blog where you want to install the new mega menu. <h5>CSS</h5> Step 2. Click on Template, then press the Edit HTML button. Press anywhere inside the code area and use the CTRL + F function to make your search quicker and easier. Type the following tag and hit Enter to find it: <blockquote class="tr_bq">]]></b:skin></blockquote>Once you find the tag, add the code below just above/before it: <blockquote class="tr_bq">.megamenu *{margin:0;padding:0;font-family:'PT Sans Narrow'}ul.megamenu{list-style:none;line-height:1;overflow:visible !important}ul.megamenu:after{margin:0;padding:0;content:' ';display:block;height:0px;clear:both}ul.megamenu li{float:left;display:inline;position:relative;text-transform:uppercase}ul.megamenu li a.menu-target:after{content:"";width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:3px solid #fff;font-size:0;line-height:0;bottom:22px;right:5px;position:absolute}ul.megamenu li a{display:block;line-height:50px;padding:0px 20px;text-decoration:none;border-left:1px solid #000;box-shadow:1px 0 0 0 rgba(255, 255, 255, 0.1) inset;color:#d9d9d9;font-size:14px;transition:all 0.3s ease-in-out}ul.megamenu li a:hover{background:#111111;color:#fff}ul.megamenu ul{position:absolute;display:none;top:100%}ul.megamenu li:hover > ul{display:block}ul.megamenu ul li{z-index:72;min-width:149px;float:none;background:#000;text-shadow:none}ul.megamenu ul li a{text-transform:none;font-weight:normal}ul.megamenu ul li a:hover,ul.megamenuid ul li a.hover{background:#E0E0E0;color:#444}ul.megamenu ul ul{display:none;left:100%;top:0}ul.megamenuid li div.megasubmenu{background:#F9F9F9;position:absolute;width:830px;z-index:90;left:0;top:100%;overflow:hidden;min-height:150px;-moz-transform:translate(0,30px);-webkit-transform:translate(0,30px);-o-transform:translate(0,30px);transform:translate(0,30px);transform-origin:50% 0;visibility:hidden;opacity:0;color:#888;box-shadow:0 10px 7px -7px rgba(0,0,0,0.1);transition:all 0.3s ease-in-out}ul.megamenuid li:hover div.megasubmenu{visibility:visible;opacity:1;-moz-transform:translate(0,0);-webkit-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0)}ul.megamenuid ul,ul.megamenuid ul li{display:block !important;border:0 none !important;margin:0 !important;padding:0 !important}ul.megamenuid ul li{background:none !important;float:left !important}ul.megamenuid ul.leftmenulist{position:absolute;width:18%;left:0;top:0;bottom:0;background:#EEEEEE;border-right:1px dashed #e5e5e5 !important}ul.megamenuid ul.leftmenulist a{border-left:none !important;color:#555}ul.megamenuid ul.rightmenulist{position:relative;display:block;width:81%;float:right;margin:0px 0px 0px !important;background:none}ul.megamenuid ul.rightmenulist li{display:block;overflow:hidden;position:relative;min-height:210px;padding:5px 17px 5px 0px !important}ul.megamenuid ul.rightmenulist li .thumb-container{left:0;width:100%;height:100%;position:absolute;overflow:hidden;font-size:0;line-height:0}ul.megamenuid ul.rightmenulist li .thumb-container img{position:relative;top:10px;padding:0;width:100%;height:100%;display:block}ul.megamenuid ul.rightmenulist li a{display:block;border-left:none !important;padding:0px 5px !important;line-height:1.4;color:#777;font-weight:bold;font-size:14px}ul.megamenuid ul.rightmenulist li a:hover{color:#000;background:transparent}ul.megamenuid .loading-icon{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBuOJizTcYOJ9h_ZoAniPe4ZLvB1zOOgnguxBnBCLLAyUwjwmC7qe0dA98cH92qMl0Jj5HBF6X3yO1XxPqU_7wzKcFPo1FmOZ2JJrwVyz-Pn4lZ0_ocsmspEHzxBuI7fojhpHyRT-QYDU/s1600/wait.gif') no-repeat scroll 0 0 transparent;width:22px;height:22px;position:absolute;top:50%;margin-top:-11px;right:5px}ul.megamenuid .menu-icon{border-bottom:4px solid transparent;border-top:4px solid transparent;border-left:4px solid #777;display:block;height:0;margin-top:-4px;position:absolute;right:11px;top:50%;width:0}#megamenuid{background:rgba(0, 0, 0, 0) -moz-linear-gradient(center top , #3d3d3d, #212121) repeat scroll 0 0;background:-webkit-linear-gradient(top,#3d3d3d,#212121);background-color:#3d3d3d;box-shadow:1px 1px 0 0 rgba(255, 255, 255, 0.1) inset;height:50px;width:100%;position:relative;max-width:1000px;margin:0 auto;padding:0px}#megamenuid h5{font-size:16px;margin-top:70px;text-align:center}#megamenuid h5:before{content:"";position:absolute;top:50px;left:50%;width:5px;height:2px;margin-left:-4px;border-left:2px solid black;border-right:2px solid black}#megamenuid h5:after{content:"";position:absolute;top:55px;left:50%;width:10px;height:5px;margin-left:-7px;border-top:2px solid black;border-left:2px solid black;border-right:2px solid black;border-radius:8px 8px 0px 0px}li.search-box{float:right !important;line-height:35px;margin:7px 10px 0 0}li.search-box .search-field{border:none;padding:3px;background:#3F3F3F;color:#fff;width:135px;font-size:13px}li.search-box .search-field:focus{border:none;outline:none;background:#4C4C4C;color:#fff}li.search-box .search-button{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfbkWStnCN1YDUqcr92QdWC55VIwIGodL1YwR4aldEoIpI7sl3k1x_A0SaxCxgXEIRZ2B_KYf-Dhe_isNjRAxHOk7lBWTaKO7wWlr88USdHFJY5m5T0IwoqxoR60fJLhpdb2ZLE2DV2ps/s1600/search.png') no-repeat;border:none;cursor:pointer;padding:5px 10px;transition:all 0.3s ease-in-out}li.search-box .search-button:hover{opacity:0.9}.search-alert{background:#E84C3D url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn9jxrhAdNhc-cpYeRjQH5Xr8lTDbOn4rLnHXm-7aGPXV0k4RfrFHb9gjPxYJHmcK9z5Fo0AoZ4zh2OH-xYkBJBcwf4ieGgeeFo7ErjZoAcDQHQGE-KY-VLwbBUIeRk4ySIX1GAaFLwGE/s1600/search-info.png) no-repeat;background-position:5px;text-transform:capitalize;color:#fff;margin:-5px;padding:0px 15px 0px 40px;display:none;border-radius:5px}</blockquote> <h5>JavaScript</h5> Step 3. Check if your blog has the jQuery plugin already installed. If not, you need to add a few lines of code before the </head> tag (CTRL + F to find it). See the code below: <blockquote class="tr_bq"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ (function(e){var t=function(e,t){this.elem=e;this.settings=t;this.megaMenuHtml();this.ajaxcall=null;this.menulist=this.elem.find(".leftmenulist li a");this.menuHelper(this.elem);this.addEvents()};t.prototype={regex:{islabel:new RegExp("/search/label/","g"),issearch:new RegExp("[?&]q=","g"),labelsearch:new RegExp("(http://[^/]+)/search/label/([^/?&]+).*[?&]q=([^$&]+)(?:[^$]+)?","g"),label:new RegExp("(http://[^/]+)/search/label/([^/?&$]+)","g"),search:new RegExp("(http://[^/]+)/search/?[?&]q=(.*)","g")},addEvents:function(){var t=this;this.menulist.hover(function(){if(e(this).data("menuloaded")!=="true"){t.li=e(this);t.url=t.li.attr("href");t.container=t.li.closest("ul").siblings("ul");t.hoverOver()}},function(){t.hoverOut()})},hoverOver:function(){var t=this;this.getAJAXUrl();if(!this.ajaxUrl)return;this.ajaxcall=e.ajax({type:"GET",url:t.ajaxUrl,dataType:"jsonp",data:t.ajaxData,beforeSend:function(){t.showLoader()},success:function(e){t.hideLoader();t.addArrow();t.showPosts(e)},error:function(e){t.showError(e)}})},hoverOut:function(){this.ajaxcall.abort();this.hideLoader()},getAJAXUrl:function(){if(this.url){var e=this;this.ajaxData={alt:"json","max-results":this.settings.postsNumber};this.url.search(this.regex.islabel)!==-1&&this.url.search(this.regex.issearch)!==-1?this.ajaxUrl=this.url.replace(this.regex.labelsearch,function(t,n,r,i){e.ajaxData.q=i;return[n,"/feeds/posts/default/-/",r,"/"].join("")}):this.url.search(this.regex.islabel)!==-1&&this.url.search(this.regex.issearch)===-1?this.ajaxUrl=this.url.replace(this.regex.label,function(t,n,r){delete e.ajaxData.q;return[n,"/feeds/posts/default/-/",r,"/"].join("")}):this.url.search(this.regex.islabel)===-1&&this.url.search(this.regex.issearch)!==-1?this.ajaxUrl=this.url.replace(this.regex.search,function(t,n,r){e.ajaxData.q=r;return[n,"/feeds/posts/default"].join("")}):this.ajaxUrl=!1}else this.ajaxUrl=!1},showLoader:function(){e("",{"class":"loading-icon"}).appendTo(this.li.closest("li"))},hideLoader:function(){this.li.closest("li").find("span.loading-icon").remove()},showPosts:function(t){var n=this,r=[],i,s,o;t.feed.openSearch$totalResults.$t>0?e.each(t.feed.entry,function(t,u){i=u.title.$t;e.each(u.link,function(e,t){t.rel==="alternate"?s=t.href:s="#"});o=u.media$thumbnail?u.media$thumbnail.url.replace(/\/s72\-c\//,"/s200-c/"):n.settings.noThumbnail;r.push('<li><a title="',i,'" href="',s,'"><img alt="',i,'" src="',o,'"/> ',i,"</a></li>")}):r.push("<h5>","No posts available.","</h5>");this.container.html(r.join(""));this.menulist.removeData("menuloaded");this.li.data("menuloaded","true")},showError:function(e){if(e.statusText==="error"){this.hideLoader();this.addArrow();this.container.html("<h5>Oops... Could not fetch the blog posts.</h5>")}},addArrow:function(){this.menulist.closest("li").find("span").remove();this.menulist.removeClass("hover-menu");this.li.addClass("hover-menu");e("",{"class":"menu-icon"}).appendTo(this.li.closest("li"))},menuHelper:function(t){var n=this;t.find(">li").hover(function(){var t=e(this);t.find("a:first").addClass("hover-menu");var r=e(this).find("ul.leftmenulist li").height()*e(this).find("ul.leftmenulist li").length;t.find("ul.rightmenulist").css({"min-height":r+"px"});n.requestFirstAjax(t)},function(){e(this).find("a:first").removeClass("hover-menu")})},megaMenuHtml:function(){this.elem.find("ul ul").remove();this.elem.addClass("megamenuid").find(">li").find("ul:first").addClass("leftmenulist").wrap(e("<div></div>",{"class":this.settings.divClass}));e("ul.leftmenulist").after(e("<ul></ul>",{"class":"rightmenulist"}))},requestFirstAjax:function(e){e=e.find(".leftmenulist li:first-child a");this.url=e.attr("href");this.container=e.closest("ul").siblings("ul");this.li=e;this.hoverOver()}};e.fn.megaBloggerMenu=function(n){var r={postsNumber:4,divClass:"megasubmenu",postsClass:"rightmenulist",noThumbnail:"/default.png"},i=e.extend({},r,n);return this.each(function(){var n=new t(e(this),i)})}})(jQuery); //]]> </script> <script type='text/javascript'> jQuery(document).ready(function($) {  $(&#39;#megamenuid&#39;).megaBloggerMenu({   postsNumber : 4,   noThumbnail : &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXcdGjbN0d7ZhtUabK3QPLQwtgWTf31n6HcitJhRlcjJ1UQY0QkcQLUBnnaH-aeXTn_z788CcCXFJLKqHbBPDGGSakmMC_ssIh2hgH90i3395zNFwnoAMYMXaAbLym85s-RuFPzjbL54c/s1600/no_image_available.png&#39;  }); }); $(function(){   $(&#39;.search-here&#39;).submit(function(e){     if($(&#39;.search-box .search-field&#39;).val().length==0){        $(&#39;.search-box .search-alert&#39;).fadeIn().css(&#39;display&#39;,&#39;inline-block&#39;);       e.preventDefault();     }   }); }); </script></blockquote> Note - If jQuery plugin already exist, remove the line in red. - To change the number of posts, change the 4 value from: <blockquote class="tr_bq">postsNumber : 4</blockquote>- To add a different thumbnail when a post has no image, replace the url in blue from: <blockquote class="tr_bq">noThumbnail : &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXcdGjbN0d7ZhtUabK3QPLQwtgWTf31n6HcitJhRlcjJ1UQY0QkcQLUBnnaH-aeXTn_z788CcCXFJLKqHbBPDGGSakmMC_ssIh2hgH90i3395zNFwnoAMYMXaAbLym85s-RuFPzjbL54c/s1600/no_image_available.png&#39; </blockquote> <h5>HTML</h5> Step 4. Carefully add the HTML code to ensure that the drop down menu with images will work as designed. There are only three types of URLs that the AJAX Menu accepts and they must be used accordingly. Label URL: http://yourblogurlblogspot.com/search/label/LABELNAME Search Query: http://yourblogurl.blogspot.com/search?q=SEARCHQUERY Label w/ Search Query: http://yourblogurl.blogspot.com/search/label/LABELNAME?q=SEARCHQUERY Among the three URLs, the Search Query has to be URL encoded using a specific tool. Step 5. Search the following line using CTRL + F: <blockquote class="tr_bq"><div class='main-outer'></blockquote>Just above this line, add the following HTML code: <blockquote class="tr_bq"><ul class='megamenu' id='megamenuid'> <li><a href='/'>Home</a></li> <li><a class='menu-target' href='#'>MENU TITLE</a> <ul> <li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li> <li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li> <li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li> </ul> </li> <li><a class='menu-target' href='#'>MENU TITLE</a> <ul> <li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li> <li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li> <li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li> </ul></li> <li><a href='http://ADDURLHERE.com'>Normal Link</a></li> <li class='search-box'> <form action='/search' class='search-here' method='get'> <input class='search-field' name='q' placeholder='Search Here' size='30' type='text'/> <input class='search-button' type='submit' value=' '/> </form> Search form is empty! </li> </ul> <div class='clear'/> <div class='clear'/></blockquote>Note: replace the text in blue with the label url and the text in red with the name of the label. This is the label that you have added to the Labels settings of your post editor: <div class="separator" style="clear: both; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCSEdocg7gmamalkiW1o_y8B1eKzlIrWl0I5EvGpDPv17j22zvaRNfjnNg7SCZulsh6Oi-T_Yu-5Wpnc2cbdsFQve_S72dT7NUL76uvxK4j8veEY6Gl7HZ70UDz6igTOm9FRFWq55qh5ym/s1600/blogger-labels-post-settings.png" /></div> Step 6. Click on Save template for all the changes to take effect. If you can't find the line from step 5, access the Layout tab, click on Add Gadget, and then choose HTML/JavaScript Gadget. Copy the HTML code and paste it inside the box... then press the Save button. That's it! Once that is done, your AJAX menu with images will be implemented and ready for you to use. Make sure to choose photos that are relevant to the menu and sub-menus so your website will have cohesive look and appeal. Research shows, however, that text accompanied by any image, even if completely irrelevant, can grab attention.

Mega Menu with Images or Thumbnails for Blogger

Visual content holds a certain appeal that websites integrate images to every page, or even operate solely through photos. Now, with the new...

July 23, 2015

How to Add Neat CSS3 Dropdown Menu in Blogger

Here's another simple yet amazing dropdown menu with pure CSS3 made by Andrew from <a href="http://script-tutorials.com/" rel="nofollow" target="_blank">script-tutorials.com</a> with some slight modifications so that it can be easily adapted to our Blogger template. In the upper right side of this menu, we have the contact links and social media icons for Facebook, Twitter, Google Plus and RSS feed. Below these links, there is the drop-down navigation menu and on the left side, the search form. To achieve a better user interface and interaction, the CSS dropdown menu features sub categories that appear with a nice touch of CSS3 box-shadow, text-shadow and a cool transition once the parent link is activated by a hover selector. <div class="separator" style="clear: both; text-align: center;"><img alt="dropdown menu" border="0" height="268" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZcj2nCbyVZSU56iqW3n4Gx-PWvuxFsUScDmuWo1SnqfI3WNfaGZkzaRjLnhb80llmJgtHr3Fml2zb5IbSP3RhJSS6AxcTr2tZFbhPj1vWyh2b7SDHdLq8-MnruZaN1xrH-xVBUrzX5S_J/s1600/create-css3-dropdown-navigation-menu-in-blogger.png" title="add a neat css3 dropdown menu in blogger" width="640" /></div> <div style="text-align: center;"><a class="demo-link" href="http://demohelplogger1.blogspot.com/" rel="nofollow" target="_blank">Demo</a></div> <h3>Adding the CSS dropdown navigation menu in Blogger</h3>Step 1. Access your <a href="http://blogger.com/" rel="nofollow" target="blank">Blogger Dashboard</a> and go to "Template", then click on the "Edit HTML" button <div class="separator" style="clear: both; text-align: center;"><img border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJUOkMHz3vLO0LGj2-EMUDmrqHKYrgqJ9RloAwpiNRj7piFUZ20T73GpIruWthjD-TxF75_8D2Nyqdt3Cl3JhCNEW_tSk4aEk_ASWRQ7IMm21LnSTTnux2VBpsk84FnZQlNGHCWdVrwpog/s1600/blogger_blogspot_template_edit_html_tutorial.png" width="320" /></div> Step 2. Next, click anywhere inside the code area and press the CTRL + F keys to open the search box. Type the tag below inside the search box and hit Enter to find it. <blockquote class="tr_bq"></header></blockquote>Step 3. Just below </header> add the HTML structure of the dropdown menu: <blockquote class="tr_bq"><div id='contact-links'>     <div id='my-links'>         <a href='#'>About</a>         <a href='#'>Contact</a>                 <a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3BOPCmjQ9b-VjZi2j5ZaeFpAHFSn21a6FAKWQn9kWm3peKNGFTLWo-Tdffa3NrhJZZ4Ai7cI5_2D2UP7L_NDKS_PzJ4PhIBZ5jEr-XB8f1vkEW90paF1dwOe9e50s1jy6Wogh2un7zeO7/s1600/facebook-icon.png' title='Facebook' width='18px'/></a> <a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisKEsoJ5pofTpOgeIe_HG0KExFj93GFzTJyMTHrTY1LInSNNp6fRqZYdbiqrDNbQM0KN4JVWntGZxd8Z2MFFwf_JRZR-qqVUEtlEWWU96STR5bcMyOGuAfruHfT7HhyphenhyphenYuwx-RJOJdgW0lJ/s1600/twitter.png' title='Twitter' width='18px' /></a>         <a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBiuVx19ZzqWrs383wC40Lfay046s6wkJ-64s1eCt__RiZBe5Flosb6eQWhKTaFsyra5-0TgpqVJYBaQtcjiS0eunmxwQbYW6MLpk999ZPGDAG-Rn8qV_YaIrReG8uK59pb8svjQjmfI6p/s1600/google-plus-icon.png' title='Google' width='18px'/></a>         <a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN22NIyiLwALFrPbZJJweYvq5sJJD3Sl85P7bkxYMs5SgUSIK54Lj2G02McCCBspTt_7YFQWmIPVRoA2R4MtRXaBW_fksM6s7h-itPSIwy7rmbD8QaK9mfa5bArkE5NqxbMM-anIQf9HZw/s1600/rss-icon.png' title='RSS Feed' width='18px'/></a>     </div>     <div id='menu-container'>         <nav id='neat-menu'>             <ul>               <li class='active'><a href='/'>Home</a></li>                 <li><a href='#'>Dropdown</a>                     <ul>                         <li><a href='#'>Menu element 1</a></li>                         <li><a href='#'>Menu element 2</a></li>                         <li><a href='#'>Menu element 3</a></li>                         <li><a href='#'>Menu element 4</a></li>                         <li><a href='#'>Menu element 5</a></li>                     </ul>                 </li>                 <li><a href='#'>Dropdown</a>                     <ul>                         <li><a href='#'>Menu element 1</a></li>                         <li><a href='#'>Menu element 2</a></li>                         <li><a href='#'>Menu element 3</a></li>                         <li><a href='#'>Menu element 4</a></li>                         <li><a href='#'>Menu element 5</a></li>                     </ul>                 </li>                 <li><a href='#'>Dropdown</a>                     <ul>                         <li><a href='#'>Menu element 1</a></li>                         <li><a href='#'>Menu element 2</a></li>                         <li><a href='#'>Menu element 3</a></li>                         <li><a href='#'>Menu element 4</a></li>                         <li><a href='#'>Menu element 5</a></li>                     </ul>                 </li>                 <li><a href='#'>Single Menu</a></li>                 <li><a href='#'>Single Menu</a></li>                 <li><a href='#'>Dropdown</a>                     <ul>                         <li><a href='#'>Menu element 1</a></li>                         <li><a href='#'>Menu element 2</a></li>                         <li><a href='#'>Menu element 3</a></li>                         <li><a href='#'>Menu element 4</a></li>                         <li><a href='#'>Menu element 5</a></li>                     </ul>                 </li>             </ul>         </nav>                  <div id='menu-search'>           <form method='get' action='/search'>                 <input autocomplete='off' name='q' placeholder='search...' type='text' value=''/>             </form>         </div>     </div> </div></blockquote><h4>How to Set up the Dropdown Menu</h4><ul><li>Replace the # symbols with the URLs of your links and replace the texts in blue with the titles that you want to appear in the menu.</li><li>To change the social media icons, add the links of your icons instead of the ones in blue. For more help, please see this tutorial on <a href="http://helplogger.blogspot.com/2013/09/upload-images-and-get-url-of-image.html">how to upload and get the URL of an image</a>.</li><li>If you want to remove the sub categories, remove the code within the tags highlighted in yellow, including the ul tags. To remove only a menu element, remove the part that starts with <li> and ends with </li></li></ul>Step 4. Now, let's add the CSS styling for the menu. Search for the following tag: <blockquote class="tr_bq">]]></b:skin></blockquote>Step 5. Just above the ]]></b:skin> tag, add this CSS code: <blockquote class="tr_bq">#contact-links{text-shadow:0 -1px 0 rgba(0,0,0,0.3);margin:auto;position:relative;width:100%}#contact-links a{color:#4C9FEB}#contact-links a:hover{color:#3D85C6}#my-links{float:right;font-size:12px;margin:4px 10px;overflow:hidden;text-shadow:0 1px 0 #FFF}#my-links a{margin-left:7px;padding-left:8px;text-decoration:none}#my-links a:first-child{border-width:0}#menu-container{background:-webkit-linear-gradient(#f6f6f6,#e9eaea) repeat scroll 0 0 transparent;background:-moz-linear-gradient(#f6f6f6,#e9eaea) repeat scroll 0 0 transparent;background:linear-gradient(#f6f6f6,#e9eaea) repeat scroll 0 0 transparent;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6',endColorstr='#e9eaea',GradientType=0);border-radius:0 0 4px 4px;border:1px solid rgba(0,0,0,0.1);box-shadow:-1px 1px 0 rgba(255,255,255,0.8) inset;clear:both;height:46px;padding-top:1px}#neat-menu{float:left}#neat-menu a{text-decoration:none}#neat-menu ul{list-style:none;margin:0;padding:0}#neat-menu > ul > li{float:left;padding-bottom:12px}#neat-menu ul li a{box-shadow:-1px 0 0 rgba(255,255,255,0.8) inset,1px 0 0 rgba(255,255,255,0.8) inset;border-color:#D1D1D1;border-image:none;border-style:solid;border-width:0 1px 0 0;color:#333;display:block;font-size:14px;height:25px;line-height:25px;padding:11px 15px 10px;text-shadow:0 1px 0 #FFF}#neat-menu ul li a:hover{background:-webkit-linear-gradient(#efefef,#e9eaea) repeat scroll 0 0 transparent;background:-moz-linear-gradient(#efefef,#e9eaea) repeat scroll 0 0 transparent;background:linear-gradient(#efefef,#e9eaea) repeat scroll 0 0 transparent;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#efefef',endColorstr='#e9eaea',GradientType=0)}#neat-menu > ul > li.active > a{background:-webkit-linear-gradient(#55A6F1,#3F96E5) repeat scroll 0 0 transparent;background:-moz-linear-gradient(#55A6F1,#3F96E5) repeat scroll 0 0 transparent;background:linear-gradient(#55A6F1,#3F96E5) repeat scroll 0 0 transparent;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#55A6F1',endColorstr='#3F96E5',GradientType=0);border-bottom:1px solid #2D81CC;border-top:1px solid #4791D6;box-shadow:-1px 0 0 #55A6F1 inset,1px 0 0 #55A6F1 inset;color:#FFF;margin:-1px 0 -1px -1px;text-shadow:0 -1px 0 rgba(0,0,0,0.3)}#neat-menu > ul > li.active > a:hover{background:-webkit-linear-gradient(#499FEE,#3F96E5) repeat scroll 0 0 transparent;background:-moz-linear-gradient(#499FEE,#3F96E5) repeat scroll 0 0 transparent;background:linear-gradient(#499FEE,#3F96E5) repeat scroll 0 0 transparent;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#499FEE',endColorstr='#3F96E5',GradientType=0)}#neat-menu > ul > li:first-child > a{border-radius:0 0 0 5px}#neat-menu ul ul{background:-webkit-linear-gradient(#F7F7F7,#F4F4F4) repeat scroll 0 0 padding-box transparent;background:-moz-linear-gradient(#F7F7F7,#F4F4F4) repeat scroll 0 0 padding-box transparent;background:linear-gradient(#F7F7F7,#F4F4F4) repeat scroll 0 0 padding-box transparent;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#F7F7F7',endColorstr='#F4F4F4',GradientType=0);border-radius:5px 5px 5px 5px;border:1px solid rgba(0,0,0,0.1);box-shadow:0 1px 0 #FFF inset;height:0;margin-top:1px;opacity:0;overflow:hidden;width:240px;padding:0;position:absolute;visibility:hidden;z-index:1;-webkit-transition:all .5s;-moz-transition:all .5s;-ms-transition:all .5s;-o-transition:all .5s;transition:all .5s}#neat-menu ul li:hover ul{margin-top:0\2;height:auto;opacity:1;visibility:visible}#neat-menu ul ul a{border-right-width:0;border-top:1px solid #D1D1D1;box-shadow:0 1px 0 #FFF inset;color:#444;height:24px;line-height:24px;padding:7px 12px;text-shadow:0 1px 0 #FFF}#neat-menu ul ul a:hover{background:-webkit-linear-gradient(#55A6F1,#3F96E5) repeat scroll 0 0 transparent;background:-moz-linear-gradient(#55A6F1,#3F96E5) repeat scroll 0 0 transparent;background:linear-gradient(#55A6F1,#3F96E5) repeat scroll 0 0 transparent;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#55A6F1',endColorstr='#3F96E5',GradientType=0);border-top:1px solid #4791D6;box-shadow:-1px 0 0 #55A6F1 inset,1px 0 0 #55A6F1 inset;color:#FFF;text-shadow:0 -1px 0 rgba(0,0,0,0.3)}#neat-menu ul ul li:first-child a{border-top-width:0}#menu-search{margin:8px 10px 0 0;float:right}#menu-search form{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzpKKbiVWlIA_D2a3LdLjzilYyaR2xkDR0VH0_BU60E8GeRkZGpa6h8NbumKLNFma29IZseH1-3wWbbMcc0TqTgKrRMMqNecnDiOpfj9xah3KbJ-ljnx61_KJe53yIRR_C03PVEJPqZ3CW/s1600/menu-search.gif) no-repeat scroll 5% 50% transparent;border:1px solid #CCC;border-radius:3px 3px 3px 3px;box-shadow:0 1px 0 rgba(0,0,0,0.05) inset,0 1px 0 #FFF;height:26px;padding:0 25px;position:relative;width:130px}#menu-search form:hover{background-color:#F9F9F9}#menu-search form input{color:#999;font-size:13px;height:26px;text-shadow:0 1px 0 #FFF;background:none repeat scroll 0 0 transparent;border:medium none;float:left;outline:medium none;padding:0;width:100%}#menu-search form input.placeholder,#menu-search form input:-moz-placeholder{color:#C4C4C4}</blockquote>Step 6. Click on the "Save template" button to save the changes and you're done! Hope you like this CSS3 dropdown menu for Blogger and if you enjoyed the tutorial, please share and <a href="https://www.facebook.com/Helplogger-120574614736021/" rel="nofollow" target="_blank">subscribe</a>.

How to Add Neat CSS3 Dropdown Menu in Blogger

Here's another simple yet amazing dropdown menu with pure CSS3 made by Andrew from script-tutorials.com with some slight modifications ...

February 27, 2014

How to Add an Admin Control Panel in Blogger

A while ago I posted some tutorials on how you can <a href="http://helplogger.blogspot.com/2012/02/how-to-remove-blogger-navbar.html">remove the Blogger Navbar</a> or <a href="http://helplogger.blogspot.com/2012/03/how-to-removehide-or-add-peek-boo.html">add a Peek A Boo Effect</a> so that it would show only when we mouse over on top of our page. <div class="ssmainhide" style="clear: both; text-align: center;"><img border="0" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv_M5FINv-NGvrLgbxFIVHiX2_fZ_puDipEpdaLsxNQDAV2fpNVgxkzw7PsecM58D0tkpJGhEvpvqYNnW8TDd7QYtw-gzsaC0lecbxwXNxqUqwwJ8dhrzFZzsGDaNef2cciedcBlpaPeUD/s1600/blogger-control-panel-for-admin2.png" width="320" /></div> However, customizing or removing the Blogger Navbar also has its downside because the admin links for "New post", "Customize" and "Log Out" will be no longer visible and navigating through the blog functions could be really frustrating sometimes. When the navbar is visible, blog administrators can easily create a new post or customize their template with just one click; however, when the navbar is hidden, many more clicks are required to access the Blogger dashboard panel again. In this tutorial, we'll see how to add an "Admin Control Panel" menu with many cool additions such as: <ul><li>access to the Blogger's Homepage</li><li>create a New Page or Post</li><li>view all your posts</li><li>read your comments</li><li>access the Blog's layout to add or rearrange gadgets</li><li>edit the HTML of your Template</li><li>refresh current page or post</li><li>open a new tab with your blog's homepage</li><li>access the blog' settings</li><li>view your stats</li><li>log out</li></ul>We will put all these options on the top of your page as a menu and we will make it visible only to the administrator of the blog, so our blog visitors will not be able to see it. The result will look something like this: <div class="separator" style="clear: both; text-align: center;"><img alt="admin control panel for blogger" border="0" height="20" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDjNhj9UVQ8UlLJFQNHyFm9eTt3yckeUhzIN1eF127oXNYL02EPW2iIo5Oy9EggyXJH0_HGZ90oVikP5Maw4zciiZZa4rXFhlBvkq28Xogm3_QD6uDtJxZzlYkd9CscR3HF3OQGZz8sYy5/s1600/how-to-add-admin-control-panel-on-blogger.png" title="add control panel for blog administrator in blogger" width="640" /></div> <h3>Adding Admin Control Panel to Blogger template</h3>The Admin Control Panel will only be visible when the blog author is logged in and will not display to blog readers, same with the Post Edit or widget pencil icons which are only visible to you while you are logged in. To add the admin panel to Blogger, follow the steps below: Step 1. Go to "Template" and click on the "Edit HTML" button: <div class="separator" style="clear: both; text-align: center;"><img border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJUOkMHz3vLO0LGj2-EMUDmrqHKYrgqJ9RloAwpiNRj7piFUZ20T73GpIruWthjD-TxF75_8D2Nyqdt3Cl3JhCNEW_tSk4aEk_ASWRQ7IMm21LnSTTnux2VBpsk84FnZQlNGHCWdVrwpog/s1600/blogger_blogspot_template_edit_html_tutorial.png" width="320" /></div> Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the Blogger' search box <div class="separator" style="clear: both; text-align: center;"><img border="0" height="105" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLfZGUz_ltJYtwZLmfazCzdUex_IySNW6zDN9Lq9CauxFlnf7EoNV3E3I5oJnHsxyn0q2Ksi8p8Tw6jONo64_6L8GMVc8fez7XlLTZtBjT4tozFpgmL5bGa3uM8hUd6MdB8njrwHz77udf/s1600/blogger-template-search-box.png" width="320" /></div> Step 3. Paste this line inside the search box then hit Enter to find it: <blockquote class="tr_bq"><body expr:class='&quot;loading&quot; + data:blog.mobileClass'></blockquote>Note: if you can't find this line, try to find the <body> tag. Step 4. Just below that line or tag, add the following code: <blockquote class="tr_bq"> <style> .control-panel ul{z-index: 20; position: absolute; margin: 0px auto; background-color: #F6F6F6; width: 100%; } .control-panel ul li{display: inline-block; float: left; padding: 7px 0px;} .control-panel ul li a {color:#686868;padding: 7px 15px;border-right: 1px solid #E3E3E3;font-weight: bold;font-size: 13px;} .control-panel a:hover {text-decoration:none; color:#FC8F44;} </style> <div class='control-panel'> <ul> <li><a href='http://www.blogger.com/home'>My Blogs</a></li> <li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#editor/src=sidebar&quot;' rel='nofollow'>New Post</a></li> <li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#editor/target=page&quot;' rel='nofollow'>New Page</a></li> <li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#posts&quot;' rel='nofollow'>All Posts</a></li> <li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#comments&quot;' rel='nofollow'>Comments</a></li> <li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#pageelements&quot;' rel='nofollow'>Layout</a></li> <li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#templatehtml&quot;' rel='nofollow'>Edit HTML</a></li> <li><a href='#' onclick='location.reload(true); return false;'>Refresh</a></li> <li><a href='/' target='_blank'>New Tab</a></li> <li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#basicsettings&quot;' rel='nofollow'>Settings</a></li> <li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#overviewstats&quot;' rel='nofollow'>Stats</a></li> <li><a href='http://www.blogger.com/logout.g'>Logout</a></li> </ul> </div> </blockquote>Step 4. Click on the "Save template" button to save the changes. Now take a look on your blog. While you are logged in to Blogger, you should notice your control panel appear on top of your blog. Enjoy! With this admin control panel for Blogger you can easily access the functions of the blog and you will not have to always open your blog page and the Blogger homepage at the same time.

How to Add an Admin Control Panel in Blogger

A while ago I posted some tutorials on how you can remove the Blogger Navbar or add a Peek A Boo Effect so that it would show only when we...

January 16, 2014

Horizontal menu with sub-tabs in two columns for Blogger

This is a very nice horizontal menu in which its sub-tabs are displayed in two columns and is also made with CSS, without any scripts. <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbaShjOO_94Dt3Ogv9KbgUX77CTf7u06zRcgtfEVHTT_YIEDCkq-ehV_nMGWK6Vj1D3rSuLuD97fmgMtPwFliz-knoD1O1ItjOdWf6T9bMY3us-f6t0meCC8cL-NO4oAwZo0I6q3cHXoWL/s1600/add-a-menu-with-sub-tabs-in-two-columns-to-blogger-blogspot.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger navigation menu, css menu, drop-down menu" border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbaShjOO_94Dt3Ogv9KbgUX77CTf7u06zRcgtfEVHTT_YIEDCkq-ehV_nMGWK6Vj1D3rSuLuD97fmgMtPwFliz-knoD1O1ItjOdWf6T9bMY3us-f6t0meCC8cL-NO4oAwZo0I6q3cHXoWL/s1600/add-a-menu-with-sub-tabs-in-two-columns-to-blogger-blogspot.png" title="Navigation Menu with Sub-tabs in Two Columns for Blogger" width="320" /></a></div>The "advantage" so to speak, is that the sub-tabs when arranged in two columns are not very long, so it will be neat and less space along. You can see an example here: <style type="text/css">#menucol { width:700px; height:37px; background-image: -moz-linear-gradient(top, #666666, #000000); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #666666), color-stop(1.0, #000000)); filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#666666,endColorStr=#000000); border-bottom:1px solid #666666; border-top:1px solid #666666; margin:0 auto;padding:0 auto; overflow:hidden; } #topwrapper { width:940px; height:40px; margin:0 auto; padding:0 auto; } .clearit { clear: both; height: 0; line-height: 0.0; font-size: 0; } #top { width:100%; } #top, #top ul { padding: 0; margin: 0; list-style: none; } #top a { border-right:1px solid #333333; text-align:left; display: block; text-decoration: none; padding:10px 12px 11px; font:bold 14px Arial; text-transform:none; color:#eee; } #top a:hover { background:#000000; color:#F6F6F6; } #top a.submenucol { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt7tXdO2ruxm-oM054OtlMtXeT20rhXopK_3D9TUddTI0p1SgcVhhAG1KyRBR3KhwS5ZZO8Zw4q1MkSPaODxUvGnt-7229Eyf58_wfwqhDZEDXiW-qQGjl8jyiHsbUFSmi-JHXuGS7x0I/s1600/arrow_white.gif); background-repeat: no-repeat; padding: 10px 24px 11px 12px; background-position: right center; } #top li { float: left; position: relative; } #top li { position: static !important; width: auto; } #top li ul, #top ul li { width:300px; } #top ul li a { text-align:left; padding: 6px 15px; font-size:13px; font-weight:normal; text-transform:none; font-family:Arial, sans-serif; border:none; } #top li ul { z-index:100; position: absolute; display: none; background-color:#F1F1F1; margin-left:-80px; padding:10px 0; border-radius: 0px 0px 6px 6px; box-shadow:0 2px 2px rgba(0,0,0,0.6); filter:alpha(opacity=87); opacity:.87; } #top li ul li { width:150px; float:left; margin:0; padding:0; } #top li:hover ul, #top li.hvr ul { display: block; } #top li:hover ul a, #top li.hvr ul a { color:#333; background-color:transparent; text-decoration:none; } #top ul a:hover { text-decoration:underline!important; color:#444444 !important; } </style> <div id="menucol"><div id="topwrapper"><ul id="top"><li><a href="http://YOUR URL HERE.com">Tab 1 Title Here</a></li><li><a href="http://YOUR URL HERE.com">Tab 2 Title Here</a></li><li><a class="submenucol" href="https://www.blogger.com/blogger.g?blogID=3126197138969349243#">Tab 3 Title Here</a><ul><li><a href="http://YOUR URL HERE.com">Sub Tab 3.1</a></li><li><a href="http://YOUR URL HERE.com">Sub Tab 3.2</a></li><li><a href="http://YOUR URL HERE.com">Sub Tab 3.3</a></li><li><a href="http://YOUR URL HERE.com">Sub Tab 3.4</a></li><li><a href="http://YOUR URL HERE.com">Sub Tab 3.5</a></li><li><a href="http://YOUR URL HERE.com">Sub Tab 3.6</a></li></ul></li><li><a class="submenucol" href="https://www.blogger.com/blogger.g?blogID=3126197138969349243#">Tab 4 Title Here</a><ul><li><a href="http://YOUR URL HERE.com">Sub Tab 4.1</a></li><li><a href="http://YOUR URL HERE.com">Sub Tab 4.2</a></li><li><a href="http://YOUR URL HERE.com">Sub Tab 4.3</a></li><li><a href="http://YOUR URL HERE.com">Sub Tab 4.4</a></li><li><a href="http://YOUR URL HERE.com">Sub Tab 4.5</a></li><li><a href="http://YOUR URL HERE.com">Sub Tab 4.6</a></li></ul></li><li><a class="submenucol" href="https://www.blogger.com/blogger.g?blogID=3126197138969349243#">Tab 5 Title Here</a><ul><li><a href="http://YOUR URL HERE.com">Sub Tab 5.1</a></li><li><a href="http://YOUR URL HERE.com">Sub Tab 5.2</a></li><li><a href="http://YOUR URL HERE.com">Sub Tab 5.3</a></li><li><a href="http://YOUR URL HERE.com">Sub Tab 5.4</a></li><li><a href="http://YOUR URL HERE.com">Sub Tab 5.5</a></li><li><a href="http://YOUR URL HERE.com">Sub Tab 5.6</a></li><li><a href="http://YOUR URL HERE.com">Sub Tab 5.7</a></li><li><a href="http://YOUR URL HERE.com">Sub Tab 5.8</a></li></ul></li><li><a href="http://YOUR URL HERE.com">Tab 6 Title Here</a></li></ul> </div></div> <h2>Adding A Horizontal Menu With Sub Tabs in Two Columns To Blogger</h2>STEP 1: In Blogger, go to your "Layout" and on the "Page Elements" section. <ul><li>Click on the "Add a Gadget" link just under your header image</li><li>From the Gadget's List, select "HTML/JavaScript" option.</li></ul>STEP 2: Simply copy and paste this ENTIRE code into your widget. Note: Leave the "Title" section of this widget blank. <blockquote class="tr_bq"><div id='menucol'> <div id='topwrapper'> <ul id='top'> <li><a href='http://YOUR URL HERE.com'>Tab 1 Title Here</a></li> <li><a href='http://YOUR URL HERE.com'>Tab 2 Title Here</a></li> <li><a class='submenucol' href='#'>Tab 3 Title Here</a> <ul> <li><a href='http://YOUR URL HERE.com'>Sub Tab 3.1</a></li> <li><a href='http://YOUR URL HERE.com'>Sub Tab 3.2</a></li> <li><a href='http://YOUR URL HERE.com'>Sub Tab 3.3</a></li> <li><a href='http://YOUR URL HERE.com'>Sub Tab 3.4</a></li> <li><a href='http://YOUR URL HERE.com'>Sub Tab 3.5</a></li> <li><a href='http://YOUR URL HERE.com'>Sub Tab 3.6</a></li> </ul> </li> <li><a class='submenucol' href='#'>Tab 4 Title Here</a> <ul> <li><a href='http://YOUR URL HERE.com'>Sub Tab 4.1</a></li> <li><a href='http://YOUR URL HERE.com'>Sub Tab 4.2</a></li> <li><a href='http://YOUR URL HERE.com'>Sub Tab 4.3</a></li> <li><a href='http://YOUR URL HERE.com'>Sub Tab 4.4</a></li> <li><a href='http://YOUR URL HERE.com'>Sub Tab 4.5</a></li> <li><a href='http://YOUR URL HERE.com'>Sub Tab 4.6</a></li> </ul> </li> <li><a class='submenucol' href='#'>Tab 5 Title Here</a> <ul> <li><a href='http://YOUR URL HERE.com'>Sub Tab 5.1</a></li> <li><a href='http://YOUR URL HERE.com'>Sub Tab 5.2</a></li> <li><a href='http://YOUR URL HERE.com'>Sub Tab 5.3</a></li> <li><a href='http://YOUR URL HERE.com'>Sub Tab 5.4</a></li> <li><a href='http://YOUR URL HERE.com'>Sub Tab 5.5</a></li> <li><a href='http://YOUR URL HERE.com'>Sub Tab 5.6</a></li> <li><a href='http://YOUR URL HERE.com'>Sub Tab 5.7</a></li> <li><a href='http://YOUR URL HERE.com'>Sub Tab 5.8</a></li> </ul> </li> <li><a href='http://YOUR URL HERE.com'>Tab 6 Title Here</a></li> </ul> </div> </div> </blockquote>Customize your main tabs by changing the Tab Titles to whatever you want. Include a URL for each one if you want it to be 'clickable'. If not, you can just put a # sign where it says http://YOUR URL HERE.com You can add or delete as many of the main tabs as you need, just make sure to copy the entire code for the main tab for each additional tab you want: <blockquote class="tr_bq"><li><a href='http://YOUR URL HERE.com'>Tab 7 Title Here</a> <ul> <li><a href='http://YOUR URL HERE.com'>Sub Tab 7.1</a></li> <li><a href='http://YOUR URL HERE.com'>Sub Tab 7.2</a></li> <li><a href='http://YOUR URL HERE.com'>Sub Tab 7.3</a></li> </ul> </li> </blockquote>STEP 3: Now let's go a step further and add the CSS style in our Template <ul><li>Go to Template > Edit HTML</li></ul><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJUOkMHz3vLO0LGj2-EMUDmrqHKYrgqJ9RloAwpiNRj7piFUZ20T73GpIruWthjD-TxF75_8D2Nyqdt3Cl3JhCNEW_tSk4aEk_ASWRQ7IMm21LnSTTnux2VBpsk84FnZQlNGHCWdVrwpog/s1600/blogger_blogspot_template_edit_html_tutorial.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJUOkMHz3vLO0LGj2-EMUDmrqHKYrgqJ9RloAwpiNRj7piFUZ20T73GpIruWthjD-TxF75_8D2Nyqdt3Cl3JhCNEW_tSk4aEk_ASWRQ7IMm21LnSTTnux2VBpsk84FnZQlNGHCWdVrwpog/s1600/blogger_blogspot_template_edit_html_tutorial.png" width="320" /></a></div><ul><li>Click on the sideways arrow next to <b:skin>...</b:skin> </li></ul> <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLGAwcBDYUVlZMufnKhKG5eX1EUBKRoTZ-Z3j-Lw-urLw7Jvf9U_xn7g_XajUEl9kRpIuInL7gbd3OkQ58PXO9UqL9Do4DMDyTNFf2dDAv-cujXxciiqzAybYgk5SwaoXkcGNGZFC7W__5/s1600/blogger-template-editor-css-styles.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="45" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLGAwcBDYUVlZMufnKhKG5eX1EUBKRoTZ-Z3j-Lw-urLw7Jvf9U_xn7g_XajUEl9kRpIuInL7gbd3OkQ58PXO9UqL9Do4DMDyTNFf2dDAv-cujXxciiqzAybYgk5SwaoXkcGNGZFC7W__5/s1600/blogger-template-editor-css-styles.png" width="320" /></a></div><ul><li>Then click anywhere inside the code area and search - using CTRL + F keys - for the ]]></b:skin> tag and just above ]]></b:skin> add this code:</li></ul><blockquote class="tr_bq">/* Horizontal menu with 2 columns ----------------------------------------------- */ #menucol { width:940px; height:37px; background-image: -moz-linear-gradient(top, #666666, #000000); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #666666), color-stop(1.0, #000000)); filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#666666,endColorStr=#000000); border-bottom:1px solid #666666; border-top:1px solid #666666; margin:0 auto;padding:0 auto; overflow:hidden; } #topwrapper { width:940px; height:40px; margin:0 auto; padding:0 auto; } .clearit { clear: both; height: 0; line-height: 0.0; font-size: 0; } #top { width:100%; } #top, #top ul { padding: 0; margin: 0; list-style: none; } #top a { border-right:1px solid #333333; text-align:left; display: block; text-decoration: none; padding:10px 12px 11px; font:bold 14px Arial; text-transform:none; color:#eee; } #top a:hover { background:#000000; color:#F6F6F6; } #top a.submenucol { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt7tXdO2ruxm-oM054OtlMtXeT20rhXopK_3D9TUddTI0p1SgcVhhAG1KyRBR3KhwS5ZZO8Zw4q1MkSPaODxUvGnt-7229Eyf58_wfwqhDZEDXiW-qQGjl8jyiHsbUFSmi-JHXuGS7x0I/s1600/arrow_white.gif); background-repeat: no-repeat; padding: 10px 24px 11px 12px; background-position: right center; } #top li { float: left; position: relative; } #top li { position: static !important; width: auto; } #top li ul, #top ul li { width:300px; } #top ul li a { text-align:left; padding: 6px 15px; font-size:13px; font-weight:normal; text-transform:none; font-family:Arial, sans-serif; border:none; } #top li ul { z-index:100; position: absolute; display: none; background-color:#F1F1F1; margin-left:-80px; padding:10px 0; border-radius: 0px 0px 6px 6px; box-shadow:0 2px 2px rgba(0,0,0,0.6); filter:alpha(opacity=87); opacity:.87; } #top li ul li { width:150px; float:left; margin:0; padding:0; } #top li:hover ul, #top li.hvr ul { display: block; } #top li:hover ul a, #top li.hvr ul a { color:#333; background-color:transparent; text-decoration:none; } #top ul a:hover { text-decoration:underline!important; color:#444444 !important; }</blockquote><ul><li>Now find (CTRL + F) this line:</li></ul><blockquote class="tr_bq">/* Tabs</blockquote><ul><li>It will also have some little lines beneath:</li></ul><blockquote class="tr_bq">/* Tabs ----------------------------------------------- */</blockquote><ul><li>And just below these little lines, delete the code below until you reach at:</li></ul><blockquote class="tr_bq">/* Columns ----------------------------------------------- */</blockquote><ul><li>Instead of the code that you have removed, add this one:</li></ul><blockquote class="tr_bq">#crosscol ul {z-index: 200; padding:0 !important;} #crosscol li:hover {position:relative;} #crosscol ul li {padding:0 !important;} .tabs-outer {z-index:1;} .tabs-inner {padding: 0 0px;}</blockquote><div style="text-align: center;">See this screenshot for more info:</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyYZNOnqHI1vV4GiIpJjbBgjHzeHTM2r4i18XdZifRzZQfZwuidKwWxCGmTt_RaHSVVLNV3c2k9y52w76YRVLpWOmHc6guaGiQSwvFc55UJLheCtP1K_UjPvShkdyMz4O4EEFyDxEjCBOD/s1600/menu-with-sub-tabs-in-two-columns-for-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="menu for blogger, blogger gadgets, blogger widgets" border="0" height="166" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyYZNOnqHI1vV4GiIpJjbBgjHzeHTM2r4i18XdZifRzZQfZwuidKwWxCGmTt_RaHSVVLNV3c2k9y52w76YRVLpWOmHc6guaGiQSwvFc55UJLheCtP1K_UjPvShkdyMz4O4EEFyDxEjCBOD/s1600/menu-with-sub-tabs-in-two-columns-for-blogger.png" title="How to Add a Beautiful Horizontal Navigation Menu To Blogger" width="400" /></a></div>STEP 4: The final step is to Save the Template and you are done! Visit your blog to see a beautiful navigation menu just below header. If you have any questions or need help, leave a comment below.

Horizontal menu with sub-tabs in two columns for Blogger

This is a very nice horizontal menu in which its sub-tabs are displayed in two columns and is also made with CSS, without any scripts. The ...

June 02, 2013

Create Horizontal Navigation Menu With Drop Down Submenus Using CSS

This drop down menu made with CSS only is a horizontal menu with sub-tabs and a rounded search bar on the right side. A menu like this can be handy for users who don't need complex menus or prefer not to use one that requires scripts and/or too many images. Also, the installation and customization is quite easy and, to top it off, it is quite functional. To see this CSS drop down menu in action, please visit this <a href="http://helploggermenu.blogspot.com/" rel="nofollow" taget="_blank">demo blog</a> <div class="separator" style="clear: both; text-align: center;"><img alt="blogger menu, drop down menu, css menu" border="0" height="166" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9w3SgLWy_PMjBpGU5UKizeuGgCYuxR-rBEvx11IgaA-RRA7z1GIKJyUC0kV9wcwW2z7LESw0ZNN3QMhDAU4oeoy8M9fNjDPb9MV4VEOV_8W8sqVLjUQBzn2DczCbXehhl6EouW_NdfxJg/s1600/horizontal-drop-down-menu-with-search-bar-for-blogger-blogspot.png" title="Horizontal drop down menu for Blogger" width="640" /></div> Before changing anything, if you are using a template available in Blogger Template Designer, then you should consider doing these changes in the template, otherwise the menu might not be displayed correctly: From the <a href="https://www.blogger.com/home" rel="nofollow" taget="_blank">Blogger Dashboard</a>, go to Template and press the "Edit HTML" button: <div class="separator" style="clear: both; text-align: center;"><img border="0" height="137" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkg98s3iJp7UuhdpFe1FmlHigG5PSJuZXWlk1vs8tdfOh5rHb2Y_4xzgLUeJiC7vlysP6OiCAi8ZjoWbBbuD9JqPJHI3pDoG5ppKEkQfMPGT2lYyekBKUBR45OmU4MAVJcLyNGeuEatLNl/s1600/blogger-template-edit-html.png" width="320" /></div> Search using CTRL + F for the following line: <blockquote class="tr_bq"><b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'></blockquote> <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><img border="0" height="152" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNsytjakx0cR1u06v0hkwAfCruQrvh_jkElPBigEoSp60KW7O7Q0OLZ5izb1uLUQPY9O8XM9NaRXPa_ShCgmm4V8Rsm7yGoPqk06c45cEm3tJXZnKI6BQYdBDDjcKjLzJS0-tIMZ7L-hf_/s1600/horizontal-drop-down-menu-for-blogger.png" width="400" /></td></tr><tr><td class="tr-caption" style="text-align: center;">Screenshot</td></tr></tbody></table> Remove the code in red. You may have many parts as the one in red, delete all you find. ....then find a similar annotation in your template: <blockquote class="tr_bq">/* Tabs ----------------------------------------------- */</blockquote> Remove all the code you find after this annotation until you see the Headings part. <blockquote class="tr_bq">/* Tabs ----------------------------------------------- */ .tabs-outer { overflow: hidden; position: relative; background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll 0 0; } #layout .tabs-outer { overflow: visible; } .tabs-cap-top, .tabs-cap-bottom { position: absolute; width: 100%; border-top: 1px solid $(tabs.border.color); } .tabs-cap-bottom { bottom: 0; } .tabs-inner .widget li a { display: inline-block; margin: 0; padding: .6em 1.5em; font: $(tabs.font); color: $(tabs.text.color); border-top: 1px solid $(tabs.border.color); border-bottom: 1px solid $(tabs.border.color); border-$startSide: 1px solid $(tabs.border.color); } .tabs-inner .widget li:last-child a { border-$endSide: 1px solid $(tabs.border.color); } .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover { background: $(tabs.selected.background.color) $(tabs.background.gradient) repeat-x scroll 0 -100px; color: $(tabs.selected.text.color); } /* Headings ----------------------------------------------- */ </blockquote> Then add this to where the code has been removed (instead of the code in green): <blockquote class="tr_bq">#crosscol ul {z-index: 200; padding:0 !important;} #crosscol li:hover {position:relative;} #crosscol ul li {padding:0 !important;} .tabs-outer {z-index:1;} .tabs .widget ul, .tabs .widget ul {overflow: visible;}</blockquote>After doing this, we can finally add our menu. <h2>How To Add CSS Horizontal Drop Down Menu to Blogger</h2>To add the CSS horizontal menu with submenus in your blog, follow the next steps: Step 1. From "Template", go to "Edit HTML" and just above ]]></b:skin> paste the following CSS code: <blockquote class="tr_bq">/* Horizontal drop down menu ----------------------------------------------- */ #menuWrapper { width:100%; /* Menu width */ height:35px; padding-left:14px; background:#333; /* Background color */ border-radius: 10px;  } .menu { padding:0; margin:0; list-style:none; height:35px; position:relative; z-index:5; font-family:arial, verdana, sans-serif; } .menu li:hover li a { background:none; } .menu li.top {display:block; float:left;} .menu li a.top_link { display:block; float:left; height:35px; line-height:34px; color:#ccc; text-decoration:none; font-family:"Verdana", sans-serif; font-size:12px; /* Font size */ font-weight:bold; padding:0 0 0 12px; cursor:pointer; } .menu li a.top_link span { float:left; display:block; padding:0 24px 0 12px; height:35px; } .menu li a.top_link span.down { float:left; display:block; padding:0 24px 0 12px; height:35px; } .menu li a.top_link:hover, .menu li:hover > a.top_link {color:#fff; } .menu li:hover {position:relative; z-index:2;} .menu ul, .menu li:hover ul ul, .menu li:hover ul li:hover ul ul, .menu li:hover ul li:hover ul li:hover ul ul, .menu li:hover ul li:hover ul li:hover ul li:hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;} .menu li:hover ul.sub { left:0; top:35px; background:#333; /* Submenu background color */ padding:3px; white-space:nowrap; width:200px; height:auto; z-index:3; } .menu li:hover ul.sub li { display:block; height:30px; position:relative; float:left; width:200px; font-weight:normal; } .menu li:hover ul.sub li a{ display:block; height:30px; width:200px; line-height:30px; text-indent:5px; color:#ccc; text-decoration:none; } .menu li ul.sub li a.fly { /* Submenu Background Color */ background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjptQFVQYl_7aYZ1FXlxq76wh8mdpfqA9RWm9mhRuB6WlWSj-z_VhqPYpCyy1uX0i2ure52FuQqoT6Ev82LUdEmsbijiSearL9Iv0mEBFfls-5AgEsm63k2ZeAXEL2VZqO4EnJs7mpuxSQ/s1600/arrow_over.gif) 185px 10px no-repeat;} .menu li:hover ul.sub li a:hover { background:#515151; /* Background Color on mouseover */ color:#fff; } .menu li:hover ul.sub li a.fly:hover, .menu li:hover ul li:hover > a.fly { /* Background on Mouseover */ background:#646464 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjptQFVQYl_7aYZ1FXlxq76wh8mdpfqA9RWm9mhRuB6WlWSj-z_VhqPYpCyy1uX0i2ure52FuQqoT6Ev82LUdEmsbijiSearL9Iv0mEBFfls-5AgEsm63k2ZeAXEL2VZqO4EnJs7mpuxSQ/s1600/arrow_over.gif) 185px 10px no-repeat; color:#fff;} .menu li:hover ul li:hover ul, .menu li:hover ul li:hover ul li:hover ul, .menu li:hover ul li:hover ul li:hover ul li:hover ul, .menu li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul { left:200px; top:-4px; background: #333; /* Background Color of the Submenu */ padding:3px; white-space:nowrap; width:200px; z-index:4; height:auto; } #search { width: 228px; /* Width of the Search Box */ height: 50px; float: right; z-index: 2; text-align: center; margin-top: 5px; margin-right: 6px; /* Background of the Search Box */ background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj3PcDvSM0yJPqPsFXA5OkqUCD5D_gPP9yyuHVgTBEDCLH5PeXp-dTe-OyyIQsVyggmoEVDL3LsJxvxhraP2aj7q3IDST3dZv8NrAiEmLsWzy1tfORTXKDJAkPndtDzYsJqZzeibOIg14/s1600/searchBar1.png) no-repeat; } #search-box { margin-top: 3px; border:0px; background: transparent; text-align:center; }</blockquote> <div class="separator" style="clear: both; text-align: center;"><img border="0" height="64" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfrF7jyrIUv7Al_8PZInGre6G3CBq3isdlMSKiODrKHBXfItid334vcXtaMxuxKkOugAp9obeMjv6h5YreWdHW10PnazdRcMVmej_5P20fd0koghgo4QTqX23qsavm2zAfG_cbzKqmvvU7/s1600/blogger-b-skin-template-edit-html.png" width="320" /></div><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><img border="0" height="178" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinf9elvexdEJOUcB8X-9SOe4EFKM1KhcesGHzbZe__bbM6ZzQFZQd66oQu2-gmJJ0ypvAPzXod-XdbAN_RweF2wIUl1QIHt9d8vactRUp390J4VodxxG3fvlxfH0gJxQ71xxN0HbYP6JB7/s1600/add-horizontal-drop-down-menu-to-blogger.png" width="320" /></td></tr><tr><td class="tr-caption" style="text-align: center;">Screenshot</td></tr></tbody></table>Step 2. After adding the code, click the "Save Template" button. Step 3. Go to Layout > click on Add a Gadget link <div class="separator" style="clear: both; text-align: center;"><img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq6J_lkZZrmUn0Gh_Ro0hbJFlwUroNyRQasv0_iNYYJxx4CCBFKvWpabsS-JtLcKb1wD_B1KqqJ9jrGDFeShD9F_LFSHXSeiSD-N9y6s-bWCj8SDzCiQ6CZFdkhab2h_4xmhFJcjcADgkN/s1600/blogger-layout-add+a+gadget-how-to.png" width="640" /></div> Step 4. Choose "HTML/JavaScript" and paste the following HTML code inside the empty box: <blockquote class="tr_bq"><div id='menuWrapper'> <ul class='menu'> <li class='top'><a class='top_link' href='Link URL'>Title 1</a></li> <li class='top'><a class='top_link' href='Link URL'>Title 2</a><ul class='sub'><li><a class='fly' href='Link URL'>Submenu 2.1</a><ul> <li><a href='Link URL'>Submenu 2.1.1</a></li> <li><a href='Link URL'>Submenu 2.1.2</a></li> <li><a href='Link URL'>Submenu 2.1.3</a></li> </ul> </li> <li class='mid'><a class='fly' href='Link URL'>Submenu 2.2</a> <ul> <li><a href='Link URL'>Submenu 2.2.1</a></li> <li><a href='Link URL'>Submenu 2.2.2</a></li> <li><a href='Link URL'>Submenu 2.2.3</a></li> <li><a class='fly' href='Link URL'>Submenu 2.2.4</a> <ul> <li><a href='Link URL'>Submenu 2.2.4.1</a></li> <li><a href='Link URL'>Submenu 2.2.4.2</a></li> <li><a href='Link URL'>Submenu 2.2.4.3</a></li> </ul> </li> <li><a href='Link URL'>Submenu 2.2.5</a></li> <li><a class='fly' href='Link URL'>Submenu 2.2.6</a> <ul> <li><a href='Link URL'>Submenu 2.2.6.1</a></li> <li><a href='Link URL'>Submenu 2.2.6.2</a></li> </ul> </li> </ul> </li> <li><a href='Link URL'>Submenu 2.3</a></li> <li><a href='Link URL'>Submenu 2.4</a></li> <li><a href='Link URL'>Submenu 2.5</a></li> </ul> </li> <li class='top'><a class='top_link' href='Link URL'>Title 3</a> <ul class='sub'> <li><a href='Link URL'>Submenu 3.1</a></li> <li><a href='Link URL'>Submenu 3.2</a></li> <li><a href='Link URL'>Submenu 3.3</a></li> <li><a href='Link URL'>Submenu 3.4</a></li> </ul> </li> <li class='top'><a class='top_link' href='Link URL'>Title 4</a> <ul class='sub'> <li><a href='Link URL'>Submenu 4.1</a></li> <li><a class='fly' href='Link URL'>Submenu 4.2</a> <ul> <li><a href='Link URL'>Submenu 4.2.1</a></li> <li><a href='Link URL'>Submenu 4.2.2</a></li> <li><a href='Link URL'>Submenu 4.2.3</a></li> <li><a href='Link URL'>Submenu 4.2.4</a></li> <li><a href='Link URL'>Submenu 4.2.5</a></li> <li><a href='Link URL'>Submenu 4.2.6</a></li> </ul> </li> <li><a href='Link URL'>Submenu 4.3</a></li> <li><a href='Link URL'>Submenu 4.4</a></li> <li><a href='Link URL'>Submenu 4.5</a></li> <li><a href='Link URL'>Submenu 4.6</a></li> </ul> </li> <li class='top'><a class='top_link' href='Link URL'>Title 5</a> <ul class='sub'> <li><a href='Link URL'>Submenu 5.1</a></li> <li><a href='Link URL'>Submenu 5.2</a></li> <li><a href='Link URL'>Submenu 5.3</a></li> </ul> </li>  <li> <form action='/search' id='search' method='get' name='searchForm' style='display:inline;'> <input id='search-box' name='q' onblur='if (this.value == &quot;&quot;) this.value = &quot;Search here...&quot;;' onfocus='if (this.value == &quot;Search here...&quot;) this.value = &quot;&quot;;' size='28' type='text' value='Search here...'/></form> </li> </ul> </div></blockquote> <h3>How to Customize the Navigation Menu</h3>- replace the text in blue and red with your links and titles. - if you need more tabs, then add a line like this just above  <blockquote class="tr_bq"><li class="top"><a href="Link URL" class="top_link">Title</a></li></blockquote> - if you want to add a tab with sub-tabs, then add this code: <blockquote class="tr_bq"><li class="top"><a href="Link URL" class="top_link">Title</a> <ul class="sub"> <li><a href="Link URL">Submenu Title</a></li> <li><a href="Link URL">Submenu Title</a></li> <li><a href="Link URL">Submenu Title</a></li> </ul> </li></blockquote> - and if you want one of the other sub-tabs have sub-tabs then remove a line like the one in orange and change it to a code like this: <blockquote class="tr_bq"><li><a href="Link URL" class="fly">Submenu Title</a> <ul> <li><a href="Link URL">Other Submenu</a></li> <li><a href="Link URL">Other Submenu</a></li> <li><a href="Link URL">Other Submenu</a></li> </ul> </li></blockquote> And that's it... Now "Save" your Widget and enjoy this new CSS drop down menu!

Create Horizontal Navigation Menu With Drop Down Submenus Using CSS

This drop down menu made with CSS only is a horizontal menu with sub-tabs and a rounded search bar on the right side. A menu like this can b...

April 13, 2013