Sabtu, 27 Oktober 2012

You are here : Home » TAMPILAN MENU » Cara Membuat Menu Horizontal Di Footer

Cara Membuat Menu Horizontal Di Footer

Cara membuat menu horizontal di area footer. Ya itulah postingan yang di request oleh Agan Babesajabu.

Yang ia maksud itu seperti menu di footer milik blog ketagihanbaca. Silahkan gulir sampai ke bawah mentok pada halaman ini.

Untuk cara membuatnya :

1. Masuk ke Template. Pilih Edit HTML.
__Pilih lanjutkan. Tidak usah centang Expand Template Widget.

2. Carilah kode ini ]]></b:skin>
__Pakai CTRL F untuk menemukannya.

3. Lalu letakkan kode berikut di atas kode tadi.

/* Menu Footer by : ketagihanbaca.blogspot.com */

.usup-breadcrumb{position:relative; height:30px; width:100%;}
.usup-breadcrumb ul{position:relative; margin:0 5px 0 5px; padding:0; height:30px; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCh-gLVyXya4qT5MlVZyeDRN8CacGAtE9s5lbUChCNEHh-d1jVZoSR-8LiHfqMhfC-issfANvBNV1m1pWrj_-5wnAaL6OJoIvEpn2hbZdE6ZMCnvmnaHshSQVANhbQssWyFPxJJSVe9J0/s320/breadcrumbImage.png') 0px -30px repeat-x; }
.usup-breadcrumb ul li{padding:0; margin:0; list-style:none; float:left; height:30px display:inline;}
.usup-breadcrumb ul li a{font:12px Arial, Helvetica, sans-serif; color:rgb(255,255,255); text-decoration:none; line-height:30px; display:block;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCh-gLVyXya4qT5MlVZyeDRN8CacGAtE9s5lbUChCNEHh-d1jVZoSR-8LiHfqMhfC-issfANvBNV1m1pWrj_-5wnAaL6OJoIvEpn2hbZdE6ZMCnvmnaHshSQVANhbQssWyFPxJJSVe9J0/s320/breadcrumbImage.png') 100% -60px no-repeat; padding:0 17px 0 15px; }
.usup-breadcrumb ul li a:hover {text-decoration:underline; color:rbg(255,255,255);}
.usup-breadcrumb ul li a.active{background:none; color:rgb(255,255,255);}
.usup-breadcrumb ul li a.active:hover {text-decoration:none;}
.usup-breadcrumb .left{position:absolute; top:0px; left:0px; width:10px; height:30px; display:block; z-index:1; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCh-gLVyXya4qT5MlVZyeDRN8CacGAtE9s5lbUChCNEHh-d1jVZoSR-8LiHfqMhfC-issfANvBNV1m1pWrj_-5wnAaL6OJoIvEpn2hbZdE6ZMCnvmnaHshSQVANhbQssWyFPxJJSVe9J0/s320/breadcrumbImage.png') 0% 0px no-repeat;}
.usup-breadcrumb .right{position:absolute; top:0px; right:0px; width:10px; height:30px; display:block; z-index:1; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCh-gLVyXya4qT5MlVZyeDRN8CacGAtE9s5lbUChCNEHh-d1jVZoSR-8LiHfqMhfC-issfANvBNV1m1pWrj_-5wnAaL6OJoIvEpn2hbZdE6ZMCnvmnaHshSQVANhbQssWyFPxJJSVe9J0/s320/breadcrumbImage.png') 100% -90px no-repeat; }


4. Kemudian, cari kode ini </body>

5. Lalu paste-kan kode berikut di bawah kode tadi.

<div class='usup-breadcrumb'>
  <span class='left'/>
  <ul>
    <li><a href='URL'>About Us</a></li>
    <li><a href='URL'>Dasboard</a></li>
    <li><a href='URL'>Facebook</a></li>
    <li><a href='URL'>My Twitter</a></li>
    <li><a href='URL'>Google +</a></li>

  </ul>
  <span class='right'/>
</div>

6. Silahkan ganti masing-masing URL dan Judul Menu sesuai kehendak Agan.

7. Simpan Template. Dan lihat hasilnya.

Selamat mencoba. Happy Blogging.

10 komentar:

  1. keren sob.. jd memperindah tampilan bawah juga ya.. :)

    BalasHapus
    Balasan
    1. requsanmu sudah terbit sob..
      monggo di cek..

      Hapus
  2. salam kenal, artikel yang menarik,, sob,,

    BalasHapus
  3. Kren tutorialnya, mampir ke okenusantara.blogspot.com atau inerie.blogspot.com

    BalasHapus
  4. sy save dulu, pengen nih...
    rajamenyok.blogspot
    univteacher.blogspot
    trimsss

    BalasHapus
  5. terima kasih telah berbagi....dapat dijadikan panduan

    BalasHapus