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/AVvXsEgLmsFkqjuHIHNZ_Tvo52-ZhpVXPgFxrg6jHppFUNQaUyACbopqrY1H6ThsDuvVmlK5JoJwm81NCeQFbGWDCZ71qfk83I9caQaKUl8Y1i08rIINm27-bsdG4Hr49cCxHhTmh0xfPmhgvZc/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/AVvXsEgLmsFkqjuHIHNZ_Tvo52-ZhpVXPgFxrg6jHppFUNQaUyACbopqrY1H6ThsDuvVmlK5JoJwm81NCeQFbGWDCZ71qfk83I9caQaKUl8Y1i08rIINm27-bsdG4Hr49cCxHhTmh0xfPmhgvZc/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/AVvXsEgLmsFkqjuHIHNZ_Tvo52-ZhpVXPgFxrg6jHppFUNQaUyACbopqrY1H6ThsDuvVmlK5JoJwm81NCeQFbGWDCZ71qfk83I9caQaKUl8Y1i08rIINm27-bsdG4Hr49cCxHhTmh0xfPmhgvZc/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/AVvXsEgLmsFkqjuHIHNZ_Tvo52-ZhpVXPgFxrg6jHppFUNQaUyACbopqrY1H6ThsDuvVmlK5JoJwm81NCeQFbGWDCZ71qfk83I9caQaKUl8Y1i08rIINm27-bsdG4Hr49cCxHhTmh0xfPmhgvZc/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.