 |
| How to Create Horizontal Navigation Menu in Blog |
To create this horizontal menu you can follow below steps:
=> go to blogger account
=> open HTML Edit
=> check ' Expand Template Widget ' .
=> search code ]]></b:skin>, you copy paste this below code to above the ]]></b:skin>,
ul#menu{margin:0;padding:0;list-style-type:none;width:auto;position:relative;display:block;height:36px;text-transform:uppercase;font-size:12px;font-weight:bold;background:transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW3hftSa4UXEQLB-erkddsOWxD9YDWVXhdWPNg7UYFYP-eRkDHF7XKFDMXvYQGjQ_uw2Jvobl2DKProMoXh8svlCDeXcKAFFGYuWdlHRobF9V3Yri6vziewqBIvb8-KBVVB1vZ1hu_4yYT/s320/OFF.gif") repeat-x top left;font-family:Helvetica,Arial,Verdana,sans-serif;border-bottom:1px solid #74b0c6;border-top:1px solid #74b0c6;}ul#menu li{display:block;float:left;margin:0;pading:0;}ul#menu li a{display:block;float:left;color:#6d7078;text-decoration:none;font-weight:bold;padding:12px 20px 0 20px;height:24px;background:transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibh2jHWONx4IkjL3uqPQjzvWNCJi8wZoe80Cfg_JNS8XCFGMFIAQzPKidumdX21zKAws0dakg2_M7zP-a45wEFRRnN3x3yiO3_TP7BrBplGWUSayZ59_dfMkRckDsAisTDv5BRkCTR8PU7/s320/DIVIDER.gif") no-repeat top right;}ul#menu li a:hover{background:transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGWAk2Lo_vNpUY3tTv0jIqDkeOKeJx6VCgAqSBuppxf2wxPrXbRYguvdvvUTquxSSMI-3UGUiPpU4UJbYLvRxFt_rXMWIywaiZ5RAEakc8dvyaBqO5FnMqF-xIr81q2SDRyi-0tN8oqKhl/s320/HOVER.gif") no-repeat top right;}
=> search this code:
<div id='header-wrapper'><b:section class='header' id='header' maxwidgets='1' showaddelement='no'><b:widget id='Header1' locked='true' title='test (Header)' type='Header'/></b:section></div>
=> Paste this code above the code
<ul id='menu'>
<li><a href='http://www.amalul.info/'>Home</a></li>
<li><a href='http://www.amalul.info/search/label/Blogspot'>Blogspot</a></li>
<li><a href='http://www.amalul.info/search/label/Wordpress'>Wordpress</a></li>
<li><a href='http://www.amalul.info/search/label/Widget%20Blog'>Widget Blog</a></li>
<li><a href='http://www.amalul.info/search/label/Blogger%20Template'>Blogger Template</a></li>
<li><a href='http://www.amalul.info/search/label/Wordpress%20Template'>Wordpress Template</a></li>
<li><a href='http://www.amalul.info/search/label/Tips%20and%20Tricks'>Tips and Tricks</a></li>
<li><a href='http://www.amalul.info/search/label/Other'>Other</a></li>
</ul>
you change the red link to your link, now you can save your template. thank you, because you read article "How to Create Horizontal Navigation Menu in Blog" in this blog.