Tips Yang satu ini ... , memang langka ... walaupun banyak di amang Google..
tapi , tetap aja yang pasangnya bikin ribet amet...  

Nahh Tips kali ini nihh ... , yang Lawan katanya Ribet .. yang pasti Mudah donk ...
haahaha ( sombong amet nih orang ... -_-" )
memang kenyataan kok ... mau tau ...??  Langsung aja ........

ini dafar menu horizintal nya :

1. Style Horizintal Pertama

Code Script :
<style> #navcontainer { /* none needed */ } ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; } ul#navlist li { float: left; font-family: verdana, arial, sans-serif; font-size: 9px; font-weight: bold; margin: 0; padding: 5px 0 4px 0; background-color: #666; border-top: 1px solid #e0ede9; border-bottom: 1px solid #e0ede9; } #navlist a, #navlist a:link { margin: 0; padding: 5px 9px 4px 9px; color: #fff; border-right: 1px solid #d1e3db; text-decoration: none; } ul#navlist li#active { color: #95bbae; background-color: #d1e3db; } #navlist a:hover { color: #fff; background-color: #FE9C54; } </style> <div id="navcontainer"><ul id="navlist"><li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul></div>

2. Style Horizintal Kedua
Code Script :
<br /> <style> #tabsE { float:left; width:100%; background:#000; font: bold 7.5pt Verdana; line-height:normal; } #tabsE ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsE li { display:inline; margin:0; padding:0; } #tabsE a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFcuh0GJPAPZ-bLtq33354WLi4wP-kOXltD8UYf3E_Sw8JupAAADFzpzB_AwQeaDaEOowuwbqf8SgQN8vVv0_pTEa8c2hRkNXDk1GG95DmSAGSYdxBveQnBY9JWDLR_Xrp70LetOn9M24/s1600/tableftE.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsE a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4fVFzwzl9QPp9e_7MmD7xT0yLEmW84uyEJLsf1nejOoFZB40Ckxij3SY5J1ipG-1i5ZfTNbjLPVewZe6nXmSnF3qw0hIcuRXZYSCsFKPBZ6z60gd0T9188fHBh5CJEDAoyX_OMGmy_rE/s1600/tabrightE.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsE a span {float:none;} /* End IE5-Mac hack */ #tabsE a:hover span { color:#FFF; } #tabsE a:hover { background-position:0% -42px; } #tabsE a:hover span { background-position:100% -42px; } </style> <div id="tabsE"><ul><li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul></div>

3. Style Horizintal Ketiga .
Code Script :
<br /> <style> #tabs { float:left; width:100%; background:#BBD9EE; font: bold 7.5pt Verdana; line-height:normal; } #tabs ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs li { display:inline; margin:0; padding:0; } #tabs a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYkezC9E06aBbtF1-pCoqs2Pw9QT9GqcX0HrfiIZ7s16phG7oMKABxTCCO3mHGFLUNRwBR8g_ThE8L6d1Edzi97R0_aM4vRp71IFhdlDxtAIlYiMgjKdY4eLEPz5xNALkRMVuFl-Gu5VU/s1600/tableft.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlxjTeU9mfcBOTqZjR-XEzrT57ZwyLqst6CGgraFaGQ9-AgZqEK5B7cIybFEln1WcZmE0_3SF4Js0qYZ-9Obqlg78VZjtSkpbJ5wK4DFjwYKjxVPg4Qhb5Dde63y2gRl42J2EcFbpsYXg/s1600/tabright.png) no-repeat right top; padding:5px 15px 4px 6px; color:#666; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs a span {float:none;} /* End IE5-Mac hack */ #tabs a:hover span { color:#FF9834; } #tabs a:hover { background-position:0% -42px; } #tabs a:hover span { background-position:100% -42px; } </style> <div id="tabs"><ul><li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul></div>


- Pilih Tambah Gadget bagian atas :

-Pilih satu code script Horizintal di atas dan letakan code nya di Html / javascript 
- Kalo udah simpan dehh ...

*keterangan :
<a href="Link 1"><span>#</span>

    Link 1       : Nama Induk horizintal .
      #             : Adalah nama Link/alamat web yang ingin kamu masukan .