Cara Membuat Menu Dropdown Terbaru - Fixed Mode

IdBlogWeb - Menu yang dimaksud di sini yakni sebagaimana yang terdapat pada blog ini. Dimana menu dropdown yang ada akan selalu pada posisi semula (tidak bergerak) walaupun kita menggeser halaman blog ini baik ke atas maupun ke bawah.

Selain mempercantik blog, ini juga dimaksudkan agar tidak terlalu memakan banyak tempat.Dengan satu menu horizontal saja, bisa mewakili dari seluruh kategori blog sobat.

Sekarang mari kita coba untuk membuatnya di blog sobat.
  1. Langkah pertama yang dilakukan adalah login ke blogger => Rancangan =>Edit HTML (jangan lupa untuk mecentang kotak Expand Template Widget).
  2. Sebagai antisipasi kesalahan, klik => Download Template Lengkap
  3. Dengan fungsi find (ctrl+f) temukan tag ]]></b:skin>
  4. Silahkan taruh kode css berikut tepat di atas tag ]]></b:skin>
    /* --------------------- Breadcambnya ------------------------ */
    * html #breadcrumb{position:absolute}
    #breadcrumb{
    background:#fff url(http://3.bp.blogspot.com/-slI5eKbPK40/TsQSwi4aqMI/AAAAAAAAAR4/cpkvHoQe8co/s1600/8lfx3q79c.png) repeat-x ;
    border-bottom:1px solid #CDCDCD;
    z-index:100;
    padding-bottom:1px;
    width:100%; top:0;
    left:0;
    overflow:auto;
    height:35px; overflow:hidden;
    }

    #breadcrumb .maxs_logo{
    background:url('http://2.bp.blogspot.com/-Qe6YzxXpECk/TrvM6BwUZGI/AAAAAAAAAMQ/a0StWXlFG6c/s1600/favicon.ico') 7px 9px no-repeat;
    float:left;
    padding-left:7px;
    text-align:left;
    font-family:Arial; font-size:14px; font-weight:bold; font-style:normal;
    color:#4E4E4E; width:125px;
    padding-left:30px; padding-top:8px}
    #breadcrumb .maxs_logo a{text-decoration:none; color:#ccc; padding-left:21px}
    #breadcrumb .maxs_search{float:left; padding-top:7px; margin:0px; text-align:left; font-family:tahoma; font-size:14px; font-weight:bold; font-style:normal; color:#ccc; width:142px}
    #breadcrumb .maxs_search a{text-decoration:none; color:#ccc; padding-left:10px; padding:0}
    #breadcrumb .maxs_search a:hover{text-decoration:underline; color:#ccc}
    #breadcrumb .maxs_navbarmenuleft{float:right; text-align:left; font-family:tahoma; font-size:13px; font-weight:normal; font-style:normal; color:#999; width:468; padding:3px 1px}
    #breadcrumb .maxs_addthis {float:left; padding-top:9px;}
    #breadcrumb .maxs_fblike {float:left; padding-top:6px; margin-left:5px;}

    /* --------------------- Dropdownnya ------------------------ */

    #ini-menu-label {float:right; margin:0px; padding:0; }
    .text-style{background:url(http://3.bp.blogspot.com/-Si67GEL10RA/Tf4l3kWsDtI/AAAAAAAABP8/fG2LS8dM8jo/s1600/separatortop.png) no-repeat;color:#4E4E4E;
    display:block;
    font-size:12px;
    font-family:arial,verdana,georgia;
    font-weight:normal;
    text-transform:normal; margin:0;
    border-left:0px solid #CDCDCD;
    padding:8px 5px 13px 7px; height:14px
    }
    .text-style:hover{color:#0378B2; cursor:pointer;height:14px}

    #ini-menu-label ul{float:left; list-style:none; margin:0px; padding:0}
    #ini-menu-label li{list-style:none; margin:0px; padding:0px}
    #ini-menu-label li a, #ini-menu-label li a:link, #ini-menu-label li a:visited{color:#494949;
    display:block;
    font-size:12px;
    font-family:arial,verdana,georgia;
    font-weight:bold;
    text-transform:normal;
    margin:0; border-left:1px solid #CDCDCD;
    padding:1px 8px 6px 8px}

    #ini-menu-label li a:hover, #ini-menu-label li a:active{
    color:#494949;
    padding:1px 8px 6px 8px;
    text-decoration:none}

    #ini-menu-label li li a, #ini-menu-label li li a:link, #ini-menu-label li li a:visited{
    background:#F3F3F3;
    width:90px; color:#4E4E4E; font-size:11px;
    font-family:arial,Times New Roman;
    font-weight:normal;
    text-transform:normal;
    float:none; margin:0;
    padding:1px 8px 1px 8px;
    border-top:1px solid #FFF;
    border-bottom:1px solid #D5D5D5;
    border-left:1px solid #CDCDCD;
    border-right:1px solid #CDCDCD;}

    #ini-menu-label li li a:hover, #ini-menu-label li li a:active{
    background:#D1D2D1;
    color:#0378B2;
    padding:1px 8px 1px 8px;
    border-bottom:1px solid #B2B1B1;}

    #ini-menu-label li{float:left; padding:0}
    #ini-menu-label li ul{
    z-index:999;
    position:absolute;
    left:-999em;
    height:auto;
    width:100px;
    margin:0;
    padding:0}
    #ini-menu-label li ul a{width:100px}
    #ini-menu-label li ul ul{margin:-31px 0 0 100px}
    #ini-menu-label li:hover ul ul, #ini-menu-label li:hover ul ul ul, #ini-menu-label li.sfhover ul ul, #ini-menu-label li.sfhover ul ul ul{left:-999em}
    #ini-menu-label li:hover ul, #ini-menu-label li li:hover ul, #ini-menu-label li li li:hover ul, #ini-menu-label li.sfhover ul, #ini-menu-label li li.sfhover ul, #ini-menu-label li li li.sfhover ul{left:auto}
    #ini-menu-label li:hover, #ini-menu-label li.sfhover{position:static}
  5. Selanjutnya silahkan taruh kode di bawah ini tepat di bawah tag <body>
    <div id='MENU HORIZONTAL' style='position:fixed; top:0; background:none; width:100%; '>
    <div id='breadcrumb'>
    <div class='breadcrumb maxs_logo'>
    NAMA BLOG</div>

    <div class='breadcrumb maxs_addthis'>
    <iframe allowtransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com/pages/herujava/100000494944666&amp;layout=button_count&amp;show_faces=false&amp;width=90&amp;action=like&amp;amp;colorscheme=light&amp;height=30' style='border: none; height: 21px; overflow: hidden; width: 85px;'/></div>

    <div class='breadcrumb navbarmenuleft'>
    <ul id='ini-menu-label'>
    <li>
    <div class='text-style'>
    Downloads &#9660;</div>
    <ul>
    <li>
    <a href='/search/label/Software?max-results=10'>Software</a>
    </li>
    <li>
    <a href='http://www.idblog.web.id/2011/12/download-game-hp-gratis.html'>Game Hp</a>
    </li>
    <li>
    <a href='/search/label/Template%20Blogger?max-results=10'>Blogger Templates</a>
    </li>
    </ul>
    </li>
    <li>
    <div class='text-style'>
    Tutorials &#9660;</div>
    <ul>
    <li>
    <a href='http://www.blogger.com/search/label/Blogspot%20Tutorial?max-results=10'>Blogspot</a>
    </li>
    <li>
    <a href='http://www.blogger.com/search/label/Wordpress%20Tutorial?max-results=10'>Wordpress</a>
    </li>
    <li>
    <a href='http://www.blogger.com/search/label/Websites?max-results=10'>Website</a>
    </li>
    <li>
    <a href='http://www.blogger.com/search/label/Komputer?max-results=10'>Komputer</a>
    </li>
    <li>
    <a href='http://www.blogger.com/search/label/Internet?max-results=10'>Internet</a>
    </li>
    </ul>
    </li>
    <li>
    <div class='text-style'>
    Info Web &#9660;</div>
    <ul>
    <li>
    <a href='http://www.blogger.com/search/label/Google?max-results=10'>Google</a>
    </li>
    <li>
    <a href='http://www.blogger.com/search/label/Yahoo?max-results=10'>Yahoo</a>
    </li>
    <li>
    <a href='http://www.blogger.com/search/label/Bing?max-results=10'>Bing</a>
    </li>
    <li>
    <a href='http://www.blogger.com/search/label/Facebook?max-results=10'>Facebook</a>
    </li>
    <li>
    <a href='http://www.blogger.com/search/label/Twitter?max-results=10'>Twitter</a>
    </li>
    <li>
    <a href='http://www.blogger.com/search/label/Windows?max-results=10'>Windows</a>
    </li>
    </ul>
    </li>
    <li>
    <div class='text-style'>
    Komputer &#9660;</div>
    <ul/>
    </li>
    <li>
    <div class='text-style'>
    Layanan &#9660;</div>
    <ul>
    <li>
    <a href='/parse-html-for-blogger-xml-templates.html'>Parse HTML</a>
    </li>
    </ul>
    </li>
    <li>
    <div class='text-style'>
    Partner &#9660;</div>
    <ul>
    <li>
    <a href='http://IDBLOG.WEB.ID/' target='_blank'>iDbLOGwEB</a>
    </li>
    </ul>
    </li>
    <li>
    <div class='text-style'>
    Profil &#9660;</div>
    <ul>
    <li>
    <a href='http://www.blogger.com/profile/ID-BLOGGER-DISINI.html' rel='nofollow' target='_blank'>Blogger</a>
    </li>

    <li>
    <a href='http://facebook.com/HERUJAVA' rel='nofollow' target='_blank'>Facebook</a>
    </li>
    </ul>
    </li>
    </ul>
    </div>
    </div></div>
  6. Simpan template, dan lihat hasilnya
Keterangan:
Sesuaikan kode yang berwarna biru

No comments:

Powered by Blogger.