Cara Membuat Menu Blog Keren

Kali ini saya mau berbagi Bagaimana Cara membuat MENU di Blog dengan sangat Mudah, menu disini sangat bagus apalagi bagi blog yang baru di buat, silahkan di lihat saja ... untuk membuat blog anda lebih cantik lagi sialhkan  klik CARA MUDAH MEMBUAT  CHAT BOX/BUKU TAMU DI BLOG..

Saya tidak akan berpanjang lebar karena sudah ngantuk banget nih, langsung saja perhatikan langkah-langkahnya di bawah ini :

1. Login ke blogger dengan akun anda 
2. Kemudian pada dasbor  klik Rancangan >> Edit HTML 
3. Cari kode  ]]></b:skin>:
4. biar lebih mudah mencari kode  ]]></b:skin>: klik aja CTRL + F terus masukan kode ]]></b:skin>:
5. setelah ketemu kodenya, masukan script berikut diatas 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/AVvXsEjiFc0XCKUt8O8jpbNc6kHl_PE-dFY1rQyumETKDRWBJc4TVrLNcwPKxZsvAT8TssbN11E23gQdh_KGWwrU9sbwEBDJruWtQJfohKjhwIHy44ZlYhvSzhpB5iMbP-U8JUx1ALutxDXwtMQ/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/AVvXsEgXDRMjYdCtWnRil8t-nZiUVXb7HH_kDFGCV0hef5mpY59cppVeDHVCVBRrg66-HGrGkunxOmAxxff6B9Kp9pxs4SfdNSWYC94RlEONYQ30Xpg7Yys5KHAH85TYmKoJFfWNr7-K7j3qMYU/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; 
}

6. 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://creatingwebsite-maskolis.blogspot.com' title='Home'><span>Home</span></a></li>

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

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

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

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

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

</ul>

</div>

 7.Simpan template dan lihat hasilnya.

Bagaimana mudah kan? Share ya melalui komentar...

Terima kasih telah membaca artikel tentang Cara Membuat Menu Blog Keren dan anda bisa bookmark artikel Cara Membuat Menu Blog Keren ini dengan url http://blogkangadi.blogspot.com/2014/02/cara-membuat-menu-blog-keren.html. Terima kasih

Berlangganan artikel via email :

Delivered by SEO XT

Share On:

Related Post: