Membuat Menu Mendatar di Template Blogger

Nah kali ini aku pengen Berbagi buat temen yang udah menanyakan tentang cara bikin Menu Horizontal di Blog. Sebelumnya makasih ya Betley Udah   Kasih aku semangat buat nulis lagi, Nah ini dia ceritanya...
Sebelumnya ini dia Maksudku Menu Horizontal miliku...

Nah Kurang Lebih ini dia cara bikinya......

• Pertama kali kamu harus punya gambar seperti ini...

 

[Hanya Sbuah Contoh....]

• Terus sekarang Silahkan Login di draft.blogger.com 
• Pilih Layout --> Edit HTML Selanjutnya jangan lupa Chek List "Expand Widget Templates" 
• Cari Scrip seperti ini ]]></b:skin>
• Trus Copy scrip dibawah ini trus letakan diatasnya...

    

/*credits : http://m34lh.blogspot.com */ #tabshori { float:left; width:100%; font-size:13px; border-bottom:1px solid #2763A5; /* Garis Bawah*/ line-height:normal; } #tabshori ul { margin:0; padding:10px 10px 0 50px; /*Posisi Menu*/ list-style:none; } #tabshori li { display:inline; margin:0; padding:0; } #tabshori a { float:left; background: url("http://i447.photobucket.com/albums/qq196/hadie_alone/blueleft.gif") no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabshori a span { float:left; display:block; background: url("http://i447.photobucket.com/albums/qq196/hadie_alone/blueright.gif") no-repeat right top; padding:5px 14px 4px 4px; color:#fff; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabshori a span {float:none;} /* End IE5-Mac hack */ #tabshori a:hover { background-position:0% -42px; } #tabshori a:hover span { background-position:100% -42px; }

Teks yang berwarna merah dapat diganti dengan gambar yang kamu punya... (jika ga ada pake aja yang itu...)

• Selanjutnya lagi, Copy Script berikut ini lalu tempelkan diatas <div id='content'>





<div id='tabshori'> <ul> <li><a href='http://m34lh.co.cc'><span>Home</span></a></li> <li><a href='http://m34lh.blogspot.com/search/label/Tutorial'><span>Trik-Tips</span></a></li> <li><a href='http://m34lh.co.cc'><span>Tutorial Design</span></a></li> <li><a href='http://x-template.blogspot.com/'><span>Free Template </span></a></li> <li><a href='http://lpiarawasari.blogspot.com'><span>LPIA</span></a></li> <li><a href='http://Misshacker.com'><span>Music</span></a></li> <li><a href='http://m34lh.blogspot.com/search/label/Software'><span>Software</span></a></li> <li><a href='http://m34lh.blogspot.com/search/label/Profile'><span>Profile</span></a></li> <li><a href='http://draft.blogger.com'><span>LoginBlogger</span></a></li> <li><a href='http://mail.google.com'><span>LoginGoogle</span></a></li> <li><a href='http://m34lh.blogspot.com/search/label/Profile'><span>Profile</span></a></li> </ul> </div>

Simpan deh trus lihat hasilnya...

 Eh kelupaan, Ganti dulu linknya, biar sesuai dengan linkyang kamu inginkan.. Selamat mencoba dan semoga sukses.. Note: Tidak semua template bisa menggunakan tips ini