Cara Membuat Menu Horizontal Di Blog

Hai Bro bro dan Bro Sebelumnya KHO sudah membahas tentang Bagaimana Cara Buat Gambar Slide Beserta Judul Postingan Kini TS tampan Akan membahas tentang  Cara Membuat Menu Horizontal Di Blog

Preview gambar 


Langsung Saja Langkah-langkahnya: 

1. Pada Rancangan  Edit HTML 
2. Letakkan Kode di Bawah ini Di Atas  ]]></b:skin>:         (CTRL+F)

.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/AVvXsEhI0ri04z5N1cGB2k46DLJ6-9nNj3-LysbP9xYdKMM2cTXgNBBlCJu1dFHJLmlCxCb94D4vPAm_skLzVbr3v8vwMoHiVJJY5Q_zsfoMHMxZrkgPbl4kOaT6nCX2njSVzL5WSnI7pFRUb3Q/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/AVvXsEgbt8gYrinV7Ix20dr9tWEh-9A16RbMrVGgchEotDH2VH7xMvyN8PKo6pFBD5S0Pa3JWDLvGXBvemnYdiWFFcv5q_A5Qpz3iMSi-WBgjMs11QY63gxZaPpTaGu2pCR8DQ4W9Qees-61mUc/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; 
}

     3.    Tambahkan kode HTML berikut diatas atau dibawah <div id='header-wrapper'> atau bisa juga anda tambahkan pada bagian elemen halaman sebagai widget

<div class='animatedtabs'>

<ul>

<li><a href='http://bram-tobing.blogspot.com' title='Home'><span>Home</span></a></li>

<li><a href='http://bram-tobing.blogspot.com/search/label/tutorial blog' title='tutorial blog'><span>Tutorial Blog</span></a></li>

<li><a href='http://bram-tobing.blogspot.com/search/label/SEO' title='SEO'><span>SEO</span></a></li>

<li><a href='http://bram-tobing.blogspot.com/search/label/wordpress' title='wordpress'><span>Wordpress</span></a></li>

<li><a href='http://bram-tobing.blogspot.com/search/label/affiliate' title='affiliate'><span>Affiliate</span></a></li> 

<li><a href='http://bram-tobing.blogspot.com/search/label/hosting' title='hosting'><span>Hosting</span></a></li>

</ul>

</div>

4. Pratinjau Temple Dulu

5. Save temple

6. Finish