Menu Horizontal

Menu Horizontal Tanpa Edit HTML

Posted by Cik Awi Posted on Rabu, Juni 19, 2013

 

Hallo sobat semuah apa kabar? Jumpa lagi nih dengan saya dan dalam kesempatan kali ini Cik awi akan berbagi Menu Horizontal Tanpa Edit HTML Dan yang pasti nya sobat semuah sudah tidak asing lagi dengan Menu horizontal tersebut, yang bahkan bisa kita jumpai hampir pada semuah blog, dan saya sendiri pun sudah sering pasang copot menu horizontal tersebut. Sengaja saya posting terkait tentang hal ini selain sekedar untuk koleksi juga ingin sekedar berbagi mana tau di antara sobat semuah masih ada yang membutuh kan menu horizontal tanpa edit html tersebut. Adapun Menu horizontal tanpa edit html tersebut akan tampil pas pada bawah header pada blog. Kalau biasanya para blogger menu horizontal di benamkan secara permanen pada template tentu sedikit berbeda dengan menu horizontal tanpa edit html ini. Nah Cara memasangnya pun cukup mudah gak perlu repot edit html pada template cukup :
1. Masuk ke Dashbor,
2. klik rancangan tata letak
3. Tambah Gadget
4. Pilih HTML javascript
5. Selanjutnya pilih salah satu menu horizontal yang kamu suka di bawah lalu Masukkan kode tersebut pada kolom yang tersedia kemudian klik SAVE : 

Kode HTML Menu Horizontal

<style>
 #tabsI { float:left; width:100%; background:#EFF4FA; font: bold 7.5pt
Impact; line-height:normal; border-bottom:1px solid #DD740B; } #tabsI
ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsI li {
display:inline; margin:0; padding:0; } #tabsI a { float:left;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm9WGSQXYaw5A5pWWc7dI9HKiJrdmVlSu-yx7b6fg6VpRWUuejQZgTOimrAtLYyvxO1-z6tDIvPJ3eTde0vPAAjLpJ4ZJykkDkJeUQn7zCtQtfHZxML-1-G8daJDNNcqAWwaWDsNCbTB4/s1600/tableftI.png)
 no-repeat left top; margin:0; padding:0 0 0 5px; text-decoration:none; }
 #tabsI a span { float:left; display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj47E0x2je42HjsunxxsKIRmsjNhLIAWd3PhVCqdzGNRHknm7uJfPS-op_qYgvqTYJDyEAmQ6XHiQ1gisGZOyqv0NS-Z_EJAOJuVj6_xCijA5UV5GIdJhCKDxkJCtroqc7ir1tu16am_kc/s1600/tabrightI.png)
 no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /*
Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsI a span
{float:none;} /* End IE5-Mac hack */ #tabsI a:hover span { color:#FFF; }
 #tabsI a:hover { background-position:0% -42px; } #tabsI a:hover span {
background-position:100% -42px; } </style> <div id="tabsI">
 <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>

SELAMAT MENCOBA PASTI BISA !