Membuat Menu Horizontal di Blog

Membuat Menu Horizontal di Blog adalah salah satu cara untuk memudahkan pengunjung yang datang ke blog kita agar bisa melihat isi blog kita,selain itu guna menu di blog kita agar bisa menyambungkan suatu blog kita ke blog yang lainnya,dengan Menu ini sehingga terlihat lebih unik dan keren sehingga cara ini sering di pakai oleh semua para blogger,dan cara pembuatannya adalah sebagai berikut

Silahkan simpan kode berikut sebelum kode ]]></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/AVvXsEjuCs0ZUNTPu7Kw8O2x9KctzDZgEcGhd35eLkjKtlJF4ZYRjKPldA5plRKdLGVeqeEzohEjf2cqCtWgIJa4sPnwdWzAUEA5oCmkk0_Qs8nx4a5bBky7hcigu9CtqGI2UzzF17W2mxDa7Gs/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/AVvXsEhFL1_i8TQrZ4RyNAgCyv8i9tGlfXhyfoqQz7zUd0liKJ6W76vlWD0zTa7PJ2LTKf29Ws4mlcAQCT8hu3apie6JiLpr5iMmQiDrUp0cRoXYGqyaxKAFrSDD0naeNjdx3p1lEiyoxU0QuJY/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;
}

Kemudian silahkan anda cari lagi kode berikut <div id='header-wrapper'> dan silahkan anda letakan kode di bawah ini sebelum atau sesudah kode tersebut,

<div class='animatedtabs'>
<ul>
<li><a href='http://freemp3pops.blogspot.com/' title='Home'><span>Home</span></a></li>
<li><a href='http://freemp3pops.blogspot.com/search/label/tutorial blog' title='tutorial blog'><span>Tutorial Blog</span></a></li>
<li><a href='http://freemp3pops.blogspot.com/search/label/SEO' title='SEO'><span>SEO</span></a></li>
<li><a href='http://freemp3pops.blogspot.com/search/label/wordpress' title='wordpress'><span>Wordpress</span></a></li>
<li><a href='http://freemp3pops.blogspot.com/search/label/affiliate' title='affiliate'><span>Affiliate</span></a></li> 
<li><a href='http://freemp3pops.blogspot.com/search/label/hosting' title='hosting'><span>Hosting</span></a></li>
</ul>
</div>

dan untuk penempatannya tergantung kesukaan anda dan penempatan nya dimana saja boleh.

File download Mp3 Full Album kami compres menggunakan rar dan disimpan melalui hosting 4shared.com dan mediafire.com, file rar tidak menggunakan Password. How To Download