Membuat 3 Kolom/Elemen di Atas Footer - Blog Kang Fatur

Membuat 3 Kolom/Elemen di Atas Footer

Salam blogger sepeti biasa selalu saya ucapkan di awal pembicaraan saya. Para shahabat blogger semuanya khususnya pada blogger pemula (awam) pada kesempatan ini saya akan membagikan satu buah tips sederhana namun berguna.

Kali ini saya akan bagikan (posting) tentang 'Membuat 3 Kolom di Atas Footer' pernah ada yang nanyain kepada saya gimana katanya cara membuat 3 kolom di bawah seperti yang punya Kang Fatur. Kali ini saya akan bahas tentang cara pembuatannya yang sederhana dan simpel tapi membuahkan hasil yang maksimal wkwkwk. Kalau sobat pingin liat seperti apa itu 3 Kolom Elemen di Atas Footer di bawah ini gambarnya



OK, sya tidak akan panjang lebar lagi cerita cerita kaya orang tua ja sebelum bobo cerita dulu wkwkwkwk. Baik kita lanjut ke TKP

1. Seperti biasa Login ke blogger dengan id Sobat
2. Tuju menu Tata Letak
3. Pada tab menu, klik Edit HTML
4. Backup template anda, klik Download Template Lengkap
5. Sekarang cari kode yang mirip seperti ini :


#footer {
width:900px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}



6. Tambahkan atau copy lalu paste kode berikut di bawah kode tadi :


/* bottom
----------------------------------------------- */
#bottom {
width:900px;
clear:both;
margin:0 auto;
float:left;
padding:10px 0;
color:#333;
background:#ffffff;
border-top:1px solid #333;
}
#bottom a:link {
color:#006699;
text-decoration:none;
}
#bottom a:hover {
color:#c06000;
text-decoration:underline;
}
#bottom a:visited {
color:#045FB4;
text-decoration:none;
}
#bottom h2 {
padding:20px 0 2px 0;
margin:0 0 10px 0;
border-bottom:1px dotted #cccccc;
font-size:11px;
font-weight:bold;
line-height:1.4em;
text-transform:uppercase;
}
#bottom ul {
padding:0;
margin:0;
color:#333;
}
#bottom ul li {
list-style-type:none;
border-bottom:1px dotted #333;
background:url("http://i35.tinypic.com/2n03mgz.jpg") no-repeat 0px .17em;
padding-left:17px;
margin-top:2px;
}
#left-bottom {
width:200px;
float:left;
padding-left:15px;
}
#center-bottom {
width:200px;
float:left;
padding:0 20px 0 20px;
}
#right-bottom {
width:420px;
float:right;
padding-right:15px;
}




7. Sekarang kita membuat kode HTML untuk elemen di atas footer tersebut. Cari kode seperti ini :


<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>



8. Tambahkan kode berikut di atas kode tadi :


<div id='bottom'>
<b:section class='bottom' id='left-bottom' preferred='yes'/>
<b:section class='bottom' id='center-bottom' preferred='yes'/>
<b:section class='bottom' id='right-bottom' preferred='yes'/>
</div> <!-- end bottom -->



9. Sekarang klik timbol simpan template
10. Selesai dan lihat hasilnya. sekarang Sobat mempunyai 3 elemen di atas footer


PENTING Sesuaikan ukuran lebar (width) footer dengan template Sobat dan lebar elemen yang akan ditambahkan sesuaikan selera Sobat dengan memperhatikan jarak marginnya.

Postingan lainnya tentang Elemen Widget adalah cara Menambah Elemen di Atas Dua Kolom. Jika Sobat ingin mencoba silahkan klik Disini

Selamat mencoba semoga berhasil! jangan lupa comennya!!

KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI

27 comments:

  1. coba buat tutorial cara menambah tab di bawah header.

    ReplyDelete
  2. Terimakasih atas informasinya .. perlu untuk dicoba dan dipraktekan... Nice post.. Peace :)

    ReplyDelete
  3. aktifitas rutin di awal pekan. kok sudah hilang chatter boxnya sob

    ReplyDelete
  4. Hi friend, thnx for your visit. I'm following you now. Have a nice day!

    ReplyDelete
  5. Budak-budak main dilaman,
    Jaga-jaga main mercun;
    Seri singgah rumah tuan,
    Minta sikit daging korban.

    ReplyDelete
  6. mengakhir akhir pekan dengan lawatan malam disini.

    ReplyDelete
  7. silahtuhrahmi and blogwalking back bro

    ReplyDelete
  8. silaturahmi kang ... salam kenal... kang kok ga da guestbooknya ..repot nie mau koment harus di posting coment... hehe

    ReplyDelete
  9. kang ganti icon addres bar seperti kang fatur gmna yaaa.....?

    ReplyDelete
  10. @D'point Ada sob disini http://ade-tea.blogspot.com/2009/09/cara-mengganti-icon-pada-adress-bar.html

    ReplyDelete
  11. wahhh... menarik tutorial ini.. boleh dicuba...

    ReplyDelete
  12. 2-3 hari ini seperti datang malas seri berblog. mungkin ini penyakit para blogger yg sering membuat bosan berblog.

    ReplyDelete
  13. @Seri Bahasa Kenapa harus bosan sob. tambah semangat dong OK

    ReplyDelete
  14. kehadiran di awal pekan...sukses buat teman

    ReplyDelete
  15. sekadar jln2 malam menikmati udara segar sambil uptrafik

    ReplyDelete
  16. Hello my friend.
    I wish you a good Thursday.
    Teb.

    ReplyDelete
  17. hari libur yang nyaman untuk membalas jejak sahabat.

    ReplyDelete
  18. kehadiran di malam minggu…salam juga buat semua para tetamu di sini

    ReplyDelete
  19. jalan2 sob...akhir pekan nongol depan kompi aja..

    ReplyDelete
  20. Mantap Mas Bro. terimakasih tutorialnya.

    ReplyDelete
  21. keren sob.. makasih ya?/

    ReplyDelete
  22. Numpang Tanya Gan ~
    ane kan pemula di Blogger , Nah Blog ane mau di Tambahin 3 kolom di atas footer , ane udah ikutin semua cara agan seperti di atas ., tapi kok hasilnya ane liat di tata letak Tambah Gadgetnya 3 kolom Ke Bawah ya bukan ke Samping ~ Mohon Petunjuknya ~

    ReplyDelete

Subscribe Our Newsletter

Notifications

Disqus Logo