Membuat-Kolom-Menu-Horizontal-diatas-HEADER

Saya dulu belajar membuat kolom table dengan bersusun kesamping kanan atau ke samping kiri dan table itu seperti ini kira-kira miriplah dengan kolom menu horizontal?dan ini adalah bentuk scripnya seperti yang ada di bawah ini:

<table border="1"><tbody>
<tr><td>isakan judulnuya
dsengan
satu huruf
makannya
tersa enak
siop</td></tr>
</tbody></table>

example: agusaji8-caramembuatblog.blogspot.com

script html diatas merupakan contoh dari table. dan jika anda menuliskan atau mengkopy script html tersebut maka hasilnya akan menjad seperti pada gambar tabel di atas, Lalu apa yang di maksud dengan menu horizontal dan tabel horizontal, waduhh ini cerita soal masa dulu yang saya sendiri dulu tidak paham yang ane pikir menu horizzontal dan kolom atau tabel horizontal itu sama, padahal setelah saya pelajari ternyata berbeda, jika menu horizontal itu dapat di pisahkan lagi menjadi beberapa bagian,dan penempatannya terletak diatas atau di bawah header sedang kolom table horizontal tidak dapat di gunakan sebagai atau sama fungsinya dengan menu horizontal. Script dibawah ini sudah saya coba dan bisa saya praktekkan di dalam blog saya hasilnya bagus, namun jika ternyata ada yang kurang pas maka bisa saja terjadi kegagalan sebab kesalahan dalam pemasangan script tersebut atau juga adanya hal lain yang saya sendiri juga belum paham kenapa kok terjadi kegagalan, namun yang sering terjadi biasanya itu semua karena kurang teliti dalam pemasangan script nya, soalnya saya dulu dan sekarangpun terkadang juga mengalami gagal dalam acara bongkar pasang html, nah semoga dengan sedikit pencerahan ini anda dapat merasakan sedikit lega , bahwa kegagalan bukan hanya anda sendiri, namun kegagalan juga dapat di jadikan sebagai bekal kalau sewaaktu-waktu nanti pasti ada gunanya,? betul khan;? sepeti yang anda lihat pada contoh script dibawah ini merupakan script menu horizontal langsung saja praktekan pada blog praktek anda dan lihat hasilnya.

Taruhlah script dibawah ini di atas code ]]> </b:skin>

/* Menu Horizontal Dropdown ----------------------------------------------- */ #menuwrapperpic{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO7Rkbk4R4ZoUfHalGbLe96o0jw3h-HRRDg-B4Wf-SKhmkub7Fzkz31KhbWocd7_nN37upxL6gOQ3VO7ndi9e8Yio3kzmAvpHNADlRlvd9COE5sot_LZzw1IY5S2H8Yk3XpQTJwVj_pc0/s1600/menubar.png) repeat-x;width:960px;margin:0 auto;padding:0 auto} #menuwrapper{width:960px;height:35px;margin:0 auto} .menusearch{width:300px;float:right;margin:0 auto;padding:0 auto} .clearit{clear:both;height:0;line-height:0.0;font-size:0} #menubar{width:100%} #menubar,#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0} #menubar a{display:block;text-decoration:none;font-size:12px;font-weight:700;text-transform:uppercase;color:#CECECF;border-right:1px solid #191919;padding:12px 10px 8px} #menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRc3Td5_16HMCwViJoBwntX8A4_jxrJQVOyhys1AxEv7f_KRL2llXjV5Y1SQ_aW1V3DyekXjFnTAdb1LlCwD8IUp2iHu3QJMOtjAeU7iWyijnIP_17sopuZXRNkAMdzvIgPKn2fCG4SVg/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:12px 24px 8px 10px} #menubar li{float:left;position:static;width:auto} #menubar li ul,#menubar ul li{width:170px} #menubar ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px} #menubar li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:5px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)} #menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{background-color:#222;color:#E98C0A} #menubar li:hover ul,#menubar li.hvr ul{display:block} #menubar li:hover ul a,#menubar li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none} #menubar li ul li.hr{border-bottom:1px solid #444;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:4px 0} #menubar ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}

dan tempel script yang berikutdi bawah ini di atas <header> atau di bawah </header>

<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj38gmRiamMbPesqeJiReqcOJRBsv3ZxZccT0ZCDL17mIXPtqzu1db6UMcUr2A_tlM0NgqmzWx1RuaJ_VYXSqpvQwH1uFZ9K5MXXo69A6PoAUzYyNfqstkh0gXRB4Ibaz7mkn20W2gQGIc/s1600/home_white.png' style='padding:0px;'/>Home</a></li>
<li><a href='http://www.blogger.com/profile/06961337061354681028' target='new'>Tentang Admin</a></li>
<li><a class='trigger'>Contact Us</a>
<ul>
<li><a href='https://plus.google.com/u/0/106997202037581570725' target='new'>Goggle +</a></li>
<li class='hr'/>
<li><a href='http://twitter.com/den_zuaz' target='new'>Contact on Twitter</a></li>
<li><a href='http://www.myspace.com/denzuaz' target='new'>Contact on Myspace</a></li>
<li><a href='http://www.facebook.com/zuazTama' target='new'>Zuaz'Z on Facebook</a></li>
</ul>
</li>
<li><a href='http://zuazz.blogspot.com' target='new'>Zuaz'Z Creator</a></li>
<li><a class='trigger'>Tips dan Trik</a>
<ul>
<li><a href='http://zuazz.blogspot.com/search/label/tips%20dan%20trik%20komputer'>Komputer</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/tips%20dan%20trik%20blog'>Blogspot</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/facebook'>Facebook</a></li>
<li class='hr'/>
</ul>
</li>
<li><a class='trigger'>Kategori</a>
<ul>
<li><a href='http://zuazz.blogspot.com/2012/01/tv-online.html'>TV Online</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/computer'>Komputer</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/desain%20grafis'>Desain Grafis</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/game'>Game</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/microsoft'>Microsoft</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/software%20aplikasi'>Software APP</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/software%20program'>Software Program</a></li>
</ul>
</li>
</ul> <div class='menusearch'>
<div style='float:right;padding:8px 8px 0 0;'>
<form action='http://zuazz.blogspot.com/search' method='get' target=''>
<input name='sitesearch' style='display:none;' value='http://zuazz.blogspot.com'/>
<input id='search-box' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value='';' style='width:170px;border:none;padding:4px 10px; font:italic 12px Georgia;color:#666; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinJTReFbL19TmL8xJRAEe1rYQOmcgCj6Kw1nOB4HNeHaQNrVMwzfxwufWZnHSc4rcv7y9cpP2O4c5In20MGUhA6RgUUn52hfUDi3wG4LXu0VnnDeuMBN-xDTE68WYWIuRFP_lHuGzIlZ4/s1600/field-bg.gif) no-repeat;' type='text' value='Cari disini ya sob...'/><input align='top' id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpQglSnb-0Pgu2FZaskmRns5YZznPd6v7Bj_8aCkZNTHjcKagaNaiq1VVsSq6zqCy07FHRf63p0EjkLR2ksc7x_Pam5RHHwo3uaQbCVPUchENJ20-8LiqyGmsAjG5XD2MVoh6VGdfPPWI/s1600/bg_search.gif' type='image' value='Search'/>
</form></div></div><br class='clearit'/></div><div style='clear:both;'/></div>
Catatan:!! terahir yaitu perhatikan semua link yang tertuju atau contoh
<a href="http://yuas.blogspot.com/search/sampai.......pada tag penutup</a></li> yang tercetak tebal diganti dengan nama atau url blog anda,jika perlu di rubah nama menunya anda juga dapat mengganti dengan apa yang menjadi tujuan menu anda.
agusaji8-caramembuatblog.blogspot sebagai admin mengucapkan banyak terimakasih atas kunjungannya dan juga pada : zuazz.blogspot yang memberikan kode scriptnya.
SELAMAT mencoba dan semoga berhasil.

CARA MEMBUAT BLOG

Menu Horizontal

Selasa, 02 Oktober 2012