Thursday, 10 January 2013

Cara Membuat Menu Navigasi Blog

Author :
Menu navigasi sangat penting dalam sebuah website, namun beda template beda juga menu navigasinya tinggal menyesuaikan dengan kondisi template yang akan di pakai. Oke, kali ini saya mencoba sharekan Cara Membuat Menu Navigasi Blog Abdu-Green Semoga anda berminat untuk memakainya. Screenshotnya :


Cara bikinnya silahkan anda ikuti tutorialnya sebagai berikut :




  • Login ke blogger.
  • Silahkan anda masuk ke bagian template -> Edit HTML -> Jangan lupa centang expande widget.
  • Silahkan cari kode ]]></b:skin> , Masukkan kode berikut tepat di atasnya :

    • #topbar{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjimGBoLEpZOL9mqR98H1hYk73bsBzsm7VVXf8kNNSiUnxQN73nVVd0ChLSSMXiPgdARY51AYSOYbnrPezBOZpFeozGQqolOnGFjZXrDNpe3e61iNcXGt5kIBEWCK6qo1M6UB96ud7Ojwo/s1600/nav+menu.png) repeat-x top left;width:970px;border-top:1px solid #000;margin:0 0 -2px 0;padding:0 auto}
    #top-wrapper{width:970px;height:30px;margin:0 auto}
    .clearit{clear:both;height:0;line-height:0.0;font-size:0}
    #top{width:100%}
    #top,#top ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}
    #top a{display:block;text-decoration:none;font-size:12px;font-weight:700;text-transform:none;color:#fff;padding:6px 10px 8px}
    #top a.arrow{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwHkYg1R1QCE7hkcI4G_tnRJDoZllz2N1RYvGwrwibxpK5TtX3gKAxJjzhmh5_gu40ZCPUAJcp5oL4E4tDDXHGszAtBbitb28BwGWhNGKXGgT5Zt6KIE3b5c7e9Q-2krDYUfJsDjCvs68/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:6px 24px 8px 10px}
    #top li{float:left;position:static;width:auto}
    #top li ul,#top ul li{width:170px}
    #top ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:4px 10px}
    #top li ul{z-index:100;position:absolute;display:none;background:#054d58;padding-bottom:0;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6);filter:alpha(opacity=93);-moz-opacity:.93;opacity:.93}
    #top li:hover a,#top a:active,#top a:focus,#top li.hvr a{color:#f5c623}
    #top li:hover ul,#top li.hvr ul{display:block}
    #top li:hover ul a,#top li.hvr ul a{color:#fff;background-color:transparent;text-decoration:none}
    #top li ul li.hr{border-bottom:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:0}
    #top ul a:hover{background-color:#333!important;color:#f5c623!important;text-decoration:none}
    • Cari lagi kode <body> , Letakkan kode di bawah ini tepat di bawah kode <body>.
    <div id='topbar'>
    <div id='top-wrapper'>
    <ul id='top'>
    <li><a href='/'>Home</a></li>
    <li><a href='/'>MIVO TV Online</a></li>
    <li><a class='arrow' href='#'>Sepak Bola</a>
    <ul>
    <li><a href='/'>Liga Inggris (Liga Premier)</a></li>
    <li class='hr'></li>
    <li><a href='/'>Liga Italia (Serie A)</a></li>
    <li class='hr'></li>
    <li><a href='/'>Liga Spanyol (LA LIGA)</a></li>
    <li class='hr'></li>
    <li><a href='/'>Liga Jerman (Bundesliga)</a></li><li class='hr'></li>
    <li><a href='/'>Liga Champions</a></li>
    <li class='hr'></li>
    <li><a href='/'>Piala Dunia 2014</a></li>
    <li class='hr'></li>
    <li><a href='/'>Prediksi Bola</a></li>
    <li class='hr'></li>
    <li><a href='/'>Klasemen Sementara</a></li>
    <li class='hr'></li>
    <li><a href='/'>Cuplikan Video Gol dan Highlights Pertandingan</a></li>
    </ul>
    <br class='clearit'/>
    </div>
    </div></div>
      Keterangan :
    • Garis miring berwarna merah merupakan tempat link atau URL anda. silahkan masukkan link labelnya di situ.
      • Kalau sudah silahkan anda simpan dan lihat hasilnya.

      Sumber : http://amminessalafy.blogspot.com/2013/01/cara-membuat-menu-navigasi-blog-abdu.html
      Label: |

      0 komentar:

      Post a Comment

      Subscribe to: Post Comments (Atom)