Cara Membuat Menu Horizontal

Assalamu’ alaikum to all Superbayyek Blog visitors. Pada postingan kali ini saya akan menjelaskan sedikit tips blog untuk anda, yaitu cara membuat menu horizontal. Menu ini dapat diisi dengan menu Home, Profile, dll. Seperti yang saya gunakan di atas. Selain itu menu horizontal dapat digunakan untuk memperindah tampilah blog dan juga dapat digunakan untuk mengelompokkan isi blog kita menjadi beberapa kategori. Sehingga mempermudah pengunjung blog yang sedang mencari informasi di dalam blog kita.

Kalau ingin lihat contohnya silahkan klik DI SINI !
Oke kalau begitu jika anda berminat untuk membuat Menu Horizontal tersebut silahkan ikuti tips blog berikut ini :
1. Login ke blogger.com
2. Pilih Layout/Tata Letak ---> Edit HTML
3. Beri tanda centang di sebelah tulisan ”Expand Widget Template”
4. Kik “Download Template Lengkap” untuk berjaga-jaga kalau ada kesalahan pengeditan HTML
5. Cari kode ]]></b:skin>
6. Biar cepat ketemunya tekan Ctrl+F
7. Kemudian copy script dibawah ini dan taruh di atas kode]]></b:skin>

/* -- Menu Horizontal-- */
#tabshori {
float:left;
width:100%;
font-size:12px;
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://pic60.picturetrail.com/VOL1724/12312346/21901291/374930108.jpg") no-repeat left top;
margin:0;
padding:5px 14px 4px 4px;
text-decoration:none;
}

#tabshori a span {
float:left;
display:block;
background: url("http://pic60.picturetrail.com/VOL1724/12312346/21901291/374930110.jpg") no-repeat right top;
padding:5px 14px 4px 4px;
color:#fff;
}

8. Selanjutnya cari kode dibawah ini :

<div id="content-wrapper">

9. Copy script dibawah ini, dan letakkan diatas atau sebelum kode <div id="content-wrapper">

<div id='tabshori'>
<ul>
<li><a href='Tulis URL di sini !'>Tulis huruf yang akan ditampilkan di sini !</a></li>
<li><a href='Tulis URL di sini !'>Tulis huruf yang akan ditampilkan di sini !</a></li>
<li><a href='Tulis URL di sini !'>Tulis huruf yang akan ditampilkan di sini !</a></li>
<li><a href='Tulis URL di sini !'>Tulis huruf yang akan ditampilkan di sini !</a></li>
<li><a href='Tulis URL di sini !'>Tulis huruf yang akan ditampilkan di sini !</a></li>
</ul>
</div>

10. Ganti tulisan “Tulis URL di sini !” dengan URL yang kamu inginkan dan juga ganti tulisan “Tulis huruf yang akan ditampilkan di sini !” dengan tulisan yang anda inginkan.

Contohnya seperti ini :

<div id='tabshori'>
<ul>
<li><a href='http://superbayyek.blogspot.com'>Home</a></li>
<li><a href='http://superbayyek.blogspot.com/search/label/Blogger%20Tips'>Blogger Tips</a></li>
<li><a href='http://superbayyek.blogspot.com/search/label/Free%20Softwares'>Softwares Gratis</a></li>
<li><a href='http://superbayyek.blogspot.com/search/label/Bisnis%20Online'>Penghasil Dollar</a></li>
<li><a href='http://superbayyek.blogspot.com/search/label/Pengetahuan'>Ilmu Pengetahuan</a></li>
</ul>
</div>

11. Kalau udah selesai silahkan klik Simpan Template !!!

Ternyata membuat Menu Horizontal itu sangatlah mudah yaa ? Thank’ s for your attention and wassalamu’ alaikum wr. wb.

Title Post: Cara Membuat Menu Horizontal
Rating: 100% based on 99998 ratings. 5 user reviews.
Author: Unknown

Terimakasih sudah berkunjung di blog Kardian Success Line, Jika ada kritik dan saran silahkan tinggalkan komentar