SHARE AJA : MENU NAVIGASI DROPDOWN-2

Setelah yang pertama, maka blog Share Aja kali ini akan membahas menu navigasi dropdown-2, adapun menu navigasi drop down-2 versi blog Share Aja ini dilakukan dengan meng-edit template blog anda. Untuk pemasangannya perlu sedikit hati-hati, kalau tidak maka akan rusak semua tampilan blog anda. Bagi anda yang sudah terbiasa melakukan edit template blog, maka pemasangan menu navigasi ini menjadi hal yang gampang.

Cara pembuatannya seperti biasa, masuk ke rancangan, pilih template, lakukan edit html, jangan lupa centang expand template widget, kemudian carilah :  ]]></b:skin>

Copy kan rangkaian script di bawah ini :

/*Credits: By Santosh Setty (http://webdesigninfo.wordpress.com) */
    /*Modified : IB  (http://www.maskolis.co./) */
    .glossymenu{
        position: relative;
        padding: 0 0 0 34px;
        margin: 0 auto 0 auto;
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuT0CuBA-aeoSmBYiHBztrnVEzVzdqfo2Arls_al1f_Nr_i7Ts091889sr7h_k_2nE4B-1f0vtByc0xT1LNBk9EY7jlByd579bIPcV7xTCBPKKcjAZOT6z1zHGnhLuS4_NQZ-EetyLnDY/s1600/maskolis+menu.png) repeat-x; /*tab background image path*/
        height: 46px;
        list-style: none;
    }
    .glossymenu li{
        float:left;
    }
    .glossymenu li a{
        float: left;
        display: block;
        color:#000;
        text-decoration: none;
        font-family: sans-serif;
        font-size: 13px;
        font-weight: bold;
        padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/
        height: 46px;
        line-height: 46px;
        text-align: center;
        cursor: pointer;  
    }
    .glossymenu li a b{
        float: left;
        display: block;
        padding: 0 24px 0 8px; /*Padding of menu items*/
    }
    .glossymenu li.current a, .glossymenu li a:hover{
        color: #fff;
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcMatmrhINZ5NeCX58ray9bY03RvNC6t9rfzuSLEogtWZC3dfxeTQ4NVHa356cd7OTZjRafq7jCu2zYxyQHWP20TDO-w1wI4WiAOnGi72jS-gj5nXfjQiieNEjKZqtGvS1rqvACUFUM8s/s1600/maskolis+nav.png) no-repeat; /*left tab image path*/
        background-position: left;
    }
    .glossymenu li.current a b, .glossymenu li a:hover b{
        color: #fff;
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-JoWC8IVLl2cdRag898WPOhvfNbqTi7Cp9lERGx5orFTnKByRlxrhneMqfp5uueUnSLm3UazkbWoppD_Zg0j0xxGIr0XOlaxlymjpSiVIe8mb4BCswrdulRxZ1VHl14LhPHD5VSd6jkw/s1600/naskolis+leftnav.png) no-repeat right top; /*right tab image path*/
    }

Setelah itu, carilah kode <div id='header-wrapper'>, kemudian copy kan script di bawah ini  tepat di atasnya, maka menu navigasi ini akan muncul atau terletak di atas header blog anda :

<ul class='glossymenu'>
        <li class='current'><a href='http://shareaja21.blogspot.com'><b>Home</b></a></li>
        <li><a href='http://shareaja21.blogspot.com/search/label/tutorial blog' title='tutorial blog'><b>Tutorial Blog</b></a></li>
        <li><a href='http://shareaja21.blogspot.com/search/label/SEO' title='SEO'><b>SEO</b></a></li>
 <li><a href='http://shareaja21.blogspot.com/search/label/wordpress' title='wordpress'><b>Wordpress</b></a></li>
        <li><a href='http://shareaja21.blogspot.com/search/label/affiliate' title='affiliate'><b>Affiliate</b></a></li>
        <li><a href='http://shareaja21.blogspot.com/search/label/hosting' title='hosting'><b>Hosting</b></a></li>
        </ul>

Anda dapat langsung mengedit kode yang berwarna merah dan sesuaikan dengan kondisi blog yang anda miliki. Save template anda dan selesai.