Cara Membuat Menu Horizontal diBlog

Trik!

Kawan-kawan mau tau cara buat Menu Horizontal diBlog?
Ayo ikuti Penjelasan dibawah ini...

YahooGlee- Bismillah"Cara Membuat Menu Horizontal diBlog
Kawan-kawan semua... kali ini Saya akan berikan Tips-Trik membuat Menu Horizontal untuk blog, yang mestinya buat kalian yang hobi Ngeblog dan yang masih belajar.

Hmm.. Untuk Contohnya Bisa Lihat Ini :  Demo

Nah begini kawan-kawan, Buka/Masuk akun Blogspot anda, dan Segera Menuju Rancangan dan Edit HTML.
Sudah tahukan?

Nah" Setelah berada di Edit HTML, silahkan cari tulisan ]]></b:skin>:  Percepat pencarian dengan cara tekan CTRL+F kemudian masukin Teks yang akan dicari.

Setelah ketemu, silahkan Masukkan Code dibawah Ini diatas : ]]></b:skin>:

.animatedtabs{
border-bottom: 1px solid gray;
overflow: hidden;
width: 100%;
font-size: 14px; /*font of menu text*/
}
.animatedtabs ul{
list-style-type: none;
margin: 0;
margin-left: 10px; /*offset of first tab relative to page left edge*/
padding: 0;
}
.animatedtabs li{
float: left;
margin: 0;
padding: 0;
}
.animatedtabs a{
float: left;
position: relative;
top: 5px; /* 1) Number of pixels to protrude up for selected tab. Should equal (3) MINUS (2) below */
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7rRDWT01JMCSFluFW3mEJ7K6aB-tsOlADEYDycj4-4K3VPfVpjc799F58pMjTwflcV04OYFc5oMtb5Huh3MVWYY90tHsNC6Pgl624PrGMIpMglGzfvL6knTrWSQWtkfoIxEWmOPknGSY/s320/tab-blue-left.gif) no-repeat left top;
margin: 0;
margin-right: 3px; /*Spacing between each tab*/
padding: 0 0 0 9px;
text-decoration: none;
}
.animatedtabs a span{
float: left;
position: relative;
display: block;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKngNNBfgBRUJhB4wWs3t-Odh8Yt_SlBNhuIuIGGeIeGheXehPw3ELj_-OKlEJeU3DACnIaoFanm7aMJN8sh2BmUK8PXOMP28Q_-2QfNc4C7zPAFIqozxX-IAlbFd7JefRvnq0PnUfTkI/s320/tab-blue-right.gif) no-repeat right top;
padding: 5px 14px 3px 5px; /* 2) Padding within each tab. The 3rd value, or 3px, should equal (1) MINUS (3) */
font-weight: bold;
color: black;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
.animatedtabs a span {float:none;}
/* End IE5-Mac hack */
.animatedtabs .selected a{
background-position: 0 -125px;
top: 0;
}
.animatedtabs .selected a span{
background-position: 100% -125px;
color: black;
padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
top: 0;
}
.animatedtabs a:hover{
background-position: 0% -125px;
top: 0;
}
.animatedtabs a:hover span{
background-position: 100% -125px;
padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
top: 0;
}

Nah  Setelah itu cari lagi Code Berikut : <div id='header-wrapper'> dan PASTE Code dibawah Ini diatas atau dibawah Code Tersebut.

<div class='animatedtabs'>
<ul>
<li><a href='http://yahooglee.blogspot.com/' title='Home'><span>Home</span></a></li>
<li><a href='http://www.ilmukomputer95.com/p/daftar-isi.html' title='Daftar Isi'><span>Daftar Isi</span></a></li>
<li><a href='http://www.ilmukomputer95.com/search/label/Berita' title='Berita'><span>Berita</span></a></li>
<li><a href='http://www.ilmukomputer95.com/search/label/Tips%20dan%20Trik%20Komputer' title='Tips-Trik'><span>Tips-Trik</span></a></li>
<li><a href='http://www.ilmukomputer95.com/p/tv-online-lengkap.html' title='TV Online'><span>TV Online</span></a></li>
<li><a href='http://www.ilmukomputer95.com/p/code-warna.html' title='Code Warna'><span>Code Warna</span></a></li>
</ul>
</div>

Penjelasan :

Ganti Code URL berwarna Merah Tersebut dengan URL Anda.

Ganti Teks Berwarna Biru diatas dengan Judul atau Nama Menu anda.

Untuk menambahkan Menu lagi tinggal tambahkan Code dibawah ini  Setelah Code yg mirip dibawah ini :

<li><a href='http://www.google.co.id/' title='Log Out'><span>Log Out</span></a></li> 

Bagaimana? sudah dapat difahami....

Kalau belum Silahkan Bertanya melalui Kotak Komentar yang ada...

Selamat Mencoba...

Baca dan Pelajari juga yg ini!