cara buat tab menu di blogger

Hai sob..,,!!!
Sob pasti iri kan pas anda berkunjung ke blog orang lain yang mempunyai tab menu yang keren.
nah saat ini saya akan menjelaskan bagaimana cara membuatnya..
1.Siapkan kopi dan makanan ringan untuk ngemil
2.Pastikan anda sudah cukup umur
3.Ah sorry sob kelamaan ya..,,ok dah let’s go kita mulai cara membuatnya…
4.anda harus login terlebih dahulu ke blogger anda masing-masing
5.pilih menu desain pada tab menu blogger,yang ada di atas
6.pilih menu tata letak
7.setelah itu pilih tambah gadget
8.lalu pilih HTML/Java script
9.Masukan code yang ada di bawah ini..:
/*———————————————————————————*/
/* CATEGORY MENU */
/*———————————————————————————*/
#cat-menu { background:url(pop.png) no-repeat center top; height:35px;}
/* category navigation */
.nav { width:100%;z-index:99; float:left; margin:10px 0 0 0; padding:0px; list-style:none; line-height:1; height:35px;box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;}
.nav a { position:relative; color:#999; display:block; z-index:100; text-decoration:none; }
.nav li { float:left; width:auto; border-right:1px solid #d9d9d9; }
.nav li a { font:bold 11px/15px Arial,serif; padding:10px 12px; text-decoration:none; text-transform:uppercase; }
.nav li a:hover, .nav li a:active, .nav li.current-cat, .nav li.current-cat-parent { background:none; color:#004276; text-decoration:underline;}
.nav li ul { background:#444; position:absolute;width:172px; margin:0px 0px 0px -2px; border:1px solid #333; border-width:1px 1px 0px; z-index:999; }
.nav li ul li {border-bottom:1px solid #333; border-right:none; }
.nav li ul li a { background:#444; width:147px; padding:7px 12px; color:#fff; font-size:11px; font-weight:normal; }
.nav li ul li a:hover { background:#f9f9f9; color:#004276; text-decoration:underline; }
.nav li ul ul { margin:-31px 0px 0px 171px; }
</style>
<div id=’cat-menu’>
<ul class=’sf-menu nav’ id=’cat-nav’>
<li><a href=’/'>Home</a></li>
<li><a href=’#'> Menu 1</a></li>
<li><a href=’#'> Menu 2</a></li>
<li><a href=’#'> Menu 3</a></li>
<li><a href=’#'> Menu 4</a></li>
<li><a href=’#'> Menu 5</a></li>
</ul>
</div>
Pada tanda # anda isikan dengan url yang anda ingin tujukan..,,lalu pada Home,menu1-5 isikan sesuai selera anda masing-masing..
nah kayanya sampai sini dulu ya pembahasannya ,gimana pasti anda ingin mencobanya langsungkan...,,
Terima kasih
Selamat Mencoba

 

(Sunting)