Cara Membuat Menu Footer 3 Kolom di Blog

Oleh Achmad Arifandi

Thursday, 5 February 2015

Bagikan :

Tweet

MursaidBlog - Malam hari ini saya akan memberikan anda tutorial Cara Membuat Menu Footer 3 Kolom di Blog siapa tau ada yang sedang mencari ini, cara ini sangat mudah dan simple. Footer 3 kolom ini sudah saya terapkan sendiri diblog ini MursaidBlog. Footer ini khusus untuk template yang seo, untuk template blog biasa nanti jika saya bisa, saya akan mengupdate diartikel selanjutnya.

Footer ini berguna untuk menambahkan Element, sama seperti dengan sidebar. Bagaimana cara membuatnya, simak tutorial dibawah ini.

Cara Membuat Menu Footer 3 Kolom di Blog

1. Masuk ke Blogger.

2. Masuk ke menu Template >> Edit HTML.

3. Tembahkan kode dibawah ini, tepat diatas kode ]]></b:skin>.

#footer-wrapper{width:100%}
#footer-wrapper .left{float:left;width:34%}
#footer-wrapper .center{float:left;width:34%}
#footer-wrapper .right{float:right;width:32%}
/*=============== Start FOOTER 3 KOLOM ===============*/
#footer-wrapper{background:#242424;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqgEywpxrPyU3ke0S7R7GT_nkobxlX5E2Yckkh8Ah98ZFRV4Di3Py62Zew4DrY1qQtDXBJiF6IQcftuQyVRGTvfp_pzDAFLWqzJ0Zk411_9kbB2rDRnhKp8NOameqGvwV5w6Jc3oqudCIf/s1600/line.png);background-repeat:repeat-x;background-position:top center;overflow:hidden;margin:0 auto;padding:20px 15px 0;color:#dddddd;}
#footer-wrapper .left{float:left;width:34%}
#footer-wrapper .center{float:left;width:34%}
#footer-wrapper .right{float:right;width:32%}
#footer-wrapper .left .widget,#footer-wrapper .center .widget{margin:0 15px 15px 0;clear:both}
#footer-wrapper .right .widget{margin:0 0 15px 0;clear:both}
#footer-wrapper h2{margin:0 0 10px 0;padding:0 0 5px;border-bottom:3px solid #555;text-transform:uppercase;position:relative;color:#eeeeee}
#footer-wrapper ul,#footer-wrapper ol{list-style:none;margin:0 0 0 0;padding:0 0 0 0}
#footer-wrapper li{margin:5px 0;padding:0 0 0 0}
#footer-wrapper a{color:#dddddd}
#footer-wrapper a:hover{color:#ffffff}
/*=============== End FOOTER 3 KOLOM ===============*/

4. Cari kode </body>, lalu paste kode berikut diatas kode </body>.

<footer id="footer-wrapper">
  <b:section class='left section' id='left' preferred='yes'>
    </b:section>
  <b:section class='center section' id='center' preferred='yes'>
    </b:section>
  <b:section class='right section' id='right' preferred='yes'>
    </b:section>
</footer>

5. Save template, lalu cek hasilnya di Tata Letak.

Nanti hasilnya akan menjadi seperti dibawah ini:

Itulah Cara Membuat Menu Footer 3 Kolom di Blog untuk yang menggunakan template blog biasa, nanti saya usahakan untuk membuat tutorialnya.

Berlangganan : Masukan e-mail Anda untuk mendapatkan kiriman artikel terbaru dari Mursaid Blog langsung di pesan kotak masuk.

RSS FEED

Kategori : Tutorial Blogger