Kamis, 19 Januari 2012

Bagaimana cara membuat Menu Horizontal pada Blog

Keep semangat gan walau masih Newbie jangan takut salah untuk menyoba,kali ni saya mau berbagi gimana caranya membuat menu horizontal pada Blog,mungkin teman-teman dach pada tau tapi apa salahnya berbagi untuk menambah pengetahuan.
  Lansung ja gan Copy code di bawah ini pada Add Getged kamu di Tataletak Blogspot:

    <style>
    /*---------------------------------------------------------------------------------*/
    /* 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>



NB: Ganti tanda # dengan kode link kamu misal dari Label,Selanjutnya ganti tulisan Menu 1 dengan yang kamu inginkan

Tidak ada komentar:

Posting Komentar

Link Banner
Related Posts Plugin for WordPress, Blogger...
Lyrik Kpop Source By http://www.lyricsmode.com

tags:

2ne1 (9) 2pm (3) 4minute (10) afterschoolred (1) artikel (17) b1a4 (7) blogging (7) davichi (1) ft_island (8) fx (10) hyuna (1) infinite (5) lyricskpop (123) mblaq (9) orangecaramel (9) polling (3) profilkpop (5) puisi (44) secret (1) shinee (11) sistar (2) sistar19 (1) snsd (16) ss501 (6) superjunior (6) tvxq (4) ui (1) ukiss (3)