Blogermie.com: Tutorial Blog | Membuat Horizontal Menu

06 Oktober 2011

Tutorial Blog | Membuat Horizontal Menu

Salam blogger buat  semuanya yang mungkin sedang belajar ngeblog. Materi blog untuk pemula kali ini adalah membuat menu horizontal. Sebenarnya trik ini berhasil saya ubah dari mengoprek template iTechNews. Yang kebetulan pernah saya pakai sebelumnya. dimana template tersebut menggunaan Script Mootools.

Perlu kita Tahu, Menu horizontal merupakan kumpulan beberapa link yang diletakkan secara horizontal dan biasanya ditempatkan di bawah Header. Pada kesempatan ini, kita akan mengulas Tutorial Blog tentang membuat menu horizontal secara sederhana. Mengapa dikatakan sederhana? Karena jika kita optimasi lebih mendalam, ternyata terdapat beberapa menu dan script yang ditambahkan agar bisa dioptimalkan sebagai dropdown menu dari tiap Submenu horizontal tersebut. Fungsi dari tips blogger ini adalah sebagai salah satu navigasi dalam blog agar memberikan layanan kemudahan shortcut link bagi pengunjung blog anda

Langkah-langkah membuat menu di blog, sederhana sekali, kali ini saya akan mengajarkan cara membuatnya

  • Langkah1
      Masuk Dasboard >> Design >> edit HTML
    • Langkah 2
        Cari kode ini ]]></b:skin> Kemudian kopas kode ini dan letakkan tepat di atasnya

      KLik >>
      #navcontainer{height:40px;display:block;overflow:hidden;background:url(http://3.bp.blogspot.com/_YXi3vp96gww/S9igmxIdJsI/AAAAAAAAAS8/2_voe73WBnY/s1600/navscreen.png) repeat-x scroll left bottom #5686C8;}
      #navcontainer .current-cat a{background:#ddd) left top repeat-x;color:#4A4A4A;} 
      #nav a,#subMenusContainer a{text-decoration:none;display:block} 
      #nav a{background:url(http://3.bp.blogspot.com/_YXi3vp96gww/S9igmxIdJsI/AAAAAAAAAS8/2_voe73WBnY/s1600/navscreen.png) repeat-x scroll left bottom #5686C8;border-left:1px solid #A4A4A4 ;border-right:1px solid #0404B4;margin:0px -2px 3px;float:left;padding:6px 15px;text-transform:lowercase;color:#fff;font: 14px &quot;lucida sans&quot;, Verdana, Arial, Helvetica, sans-serif;text-shadow:0px 1px 1px #000;}
      #subMenusContainer a,#nav li li a{color:#555;font-size:12px;text-align:left;-moz-border-radius:2px 3px 2px 3px;background-color:#A9D0F5;padding:6px 16px;border-top: 1px solid #fff;border-bottom: 1px solid #04B4AE;border-left: 1px solid #04B4AE;}
      #nav li a:hover,#nav li a:focus,#nav a.mainMenuParentBtnFocused{background:#5686C8;) left top repeat-x;color:#fff;text-shadow:0px 1px 3px  #FFFF00;} 
      #nav .current-cat a:hover{} #subMenusContainer a:hover,#subMenusContainer a:focus,#subMenusContainer a.subMenuParentBtnFocused{background-color:#ddd;color:#555;} .subMenuParentBtn{background:url(../img/arrow_right.gif) right center no-repeat} .subMenuParentBtnFocused{background:url(../img/arrow_right_over.gif) right center no-repeat} .mainMenuParentBtn{} .mainMenuParentBtnFocused{} .smOW{display:none;position:absolute;overflow:hidden;padding:0 2px;margin:0 0 0 -2px} 
      #nav,#nav ul,#nav ol,#subMenusContainer ul,#subMenusContainer ol{padding:0;margin:0;list-style:none;line-height:1em} #nav ol,#nav ul,#subMenusContainer ul,#subMenusContainer ol{background:none;left:0} #nav li{cursor:pointer;float:left;margin:0 2px 0 0;padding:0 2px 0 0;height:38px;display:inline} #subMenusContainer li{list-style:none} #nav{width:1000px;margin:0 auto;clear:both;overflow:hidden;font-size:12px;display:block} #nav .children{display:none} #subMenusContainer{display:block;position:absolute;top:0;left:0;width:100%;height:0;overflow:visible;z-index:1000000000}

      • Langkah 3
          Sekarang tahap menerapkan kode htmlnya, cari kode seperti ini :
          <div class='descriptionwrapper'>
          <p class='description'><span><data:description/></span></p>
          </div>
          </b:includable>
          </b:widget>
          </b:section>
          Letakkan kode ini tepat dibawahnya: 
        <div id='navcontainer'> 
        <ul id='nav'> 
        <li class='current-cat'><a expr:href='data:blog.homepageUrl'>Home</a></li> 
        <li><a href='Url Anda'>Menu 0</a></li> 
        <li><a href='Url Anda'>Menu 1</a></li>
        <li><a href='Url Anda'>Menu 2</a></li> 
        <li><a href='URL Anda'>Menu 3</a></li>
        <li><a href='URL anda'>Menu 4</a></li>   
        </ul> 
        </div>

        Catatan : Ganti URL (tulisan yang berwana merah) dengan URL gambar dan URL  tujuan anda
        Klik Preview dan lihat hasilnya

        Judul: Tutorial Blog | Membuat Horizontal Menu; Reviewer By: Heru Prasetyo; Rating Blog: 5 dari 5
        Heru Prasetyo Blogermie.com Updated at: 10/06/2011 05:34:00 PM

        Tidak ada komentar:

        Posting Komentar