Cara membuat Menu Navigasi pada Footer blog

Menu Footer

Kali ini saya akan bahas menu navigasi footer pada blog. Ada banyak pilihan menu footer akan tetapi saya hanya akan bahas mengenai footer 4 kolom saja, karena dengan menu 4 kolom ini kalian bisa kembangkan menjadi 5 kolom atau lebih atau juga mengurangi jumlah kolomnya menjadi 3.

Kita langsung saja pada permasalahannya :

contoh menu footer

1. login Blogger
2. Template
3. Edit HTML
4. Cari kode ]]></b:skin> , lalu salin dan tempel kode dibawah ini diatasnya
                                                                                                                                              
    #lower {
    margin:auto;
    padding: 0px 0px 10px 0px;
    width: 100%;
    background:#333333;
    }
    #lower-wrapper {
    background:#333333;
    margin:auto;
    padding: 20px 0px 20px 0px;
    width: 960px;
    border:0;
    }
    #lowerbar-wrapper {
    background:#333333;
    float: left;
    margin: 0px 5px auto;
    padding-bottom: 20px;
    width: 23%;
    text-align: justify;
    color:#ddd;
    font: bold 12px Arial, Tahoma, Verdana;
    line-height: 1.6em;
    word-wrap: break-word;
    overflow: hidden;
    }
    .lowerbar {margin: 0; padding: 0;}
    .lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
   .lowerbar h2 {
    margin: 0px 0px 10px 0px;
    padding: 3px 0px 3px 0px;
    text-align: left;
    border:0;
    color:#ddd;
    text-transform:uppercase;
    font: bold 14px Arial, Tahoma, Verdana;
    }
    .lowerbar ul {
    color:#fff;
    margin: 0 auto;
    padding: 0;
    list-style-type: none;
    }
    .lowerbar li {
    display:block;
    color:#fff;
    line-height: 1.6em;
    margin-left: 0 !important;
    padding: 6px;
    border-bottom: 1px solid #222;
    border-top: 1px solid #444;
    list-style-type: none;
    }
    .lowerbar li a {
    text-decoration:none; color: #DBDBDB;
    }
    .lowerbar li a:hover {
    text-decoration:underline;
    }
   .lowerbar li:hover {
    display:block;
    background: #222;
    }
                                                                                                                                                       
    Kemudian cari kode </body> lalu salin kode dibawah ini dan tempel diatasnya
 
   <div id='lower'>
   <div id='lower-wrapper'>
   <div id='lowerbar-wrapper'>
   <b:section class='lowerbar' id='lowerbar1' preferred='yes'>
   </b:section>
   </div>

   <div id='lowerbar-wrapper'>
   <b:section class='lowerbar' id='lowerbar2' preferred='yes'>
   </b:section>
   </div>

   <div id='lowerbar-wrapper'>
   <b:section class='lowerbar' id='lowerbar3' preferred='yes'>
   </b:section>
   </div>

   <div id='lowerbar-wrapper'>
   <b:section class='lowerbar' id='lowerbar4' preferred='yes'>
   </b:section>
   </div>

   <div style='clear: both;'/>
   </div> </div>
                                                                                                                                               
5. Kemudian preview template dan cek perubahannya, setelah sesuai silahkan di 'save'
6. Setelah disimpan lalu Klik layout
7. Perhatikan jumlah kolom add gadget yang baru sebagai hasil penambahan kode css diatas
8. Add a Gadget
9. Edit HTML/Javascript
10. Salin dan tempel kode css dibawah ini :
                                                                                                                                              

     <h4><a href="http://alamat URL/" target="_blank"">Home</a></h4>
     <h4><a href="http://alamat URL/" target="_blank"">About</a></h4>
     <h4><a href="http://alamat URL/" target="_blank"">#</a></h4>
     <h4><a href="http://alamat URL/" target="_blank"">#</a></h4>
                                                                                                                                              
     Alamat URL ganti dengan alamat blog kalian, Home ganti menurut kebutuhan.
11. Kemudian Add a Gadget lagi untuk kolom berikutnya. Lakukan langkah ke-10
12. Selesai.

Demikian penjelasan dan ulasan kali ini tentang : Menu Navigasi Footer 4 Kolom.
Kalau kalian berniat membuat menu navigasi yang lain silahkan kunjungi : Cara membuat menu dropdown bergambar

Keep Blogging!