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
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!!
coba buat tutorial cara menambah tab di bawah header.
ReplyDeleteTerimakasih atas informasinya .. perlu untuk dicoba dan dipraktekan... Nice post.. Peace :)
ReplyDeleteaktifitas rutin di awal pekan. kok sudah hilang chatter boxnya sob
ReplyDeleteHi friend, thnx for your visit. I'm following you now. Have a nice day!
ReplyDeleteTerima kasih sob udah mampir
ReplyDeleteBudak-budak main dilaman,
ReplyDeleteJaga-jaga main mercun;
Seri singgah rumah tuan,
Minta sikit daging korban.
singgah sudah
ReplyDeletemengakhir akhir pekan dengan lawatan malam disini.
ReplyDeletesilahtuhrahmi and blogwalking back bro
ReplyDeletesilaturahmi kang ... salam kenal... kang kok ga da guestbooknya ..repot nie mau koment harus di posting coment... hehe
ReplyDeletekang ganti icon addres bar seperti kang fatur gmna yaaa.....?
ReplyDelete@D'point Ada sob disini http://ade-tea.blogspot.com/2009/09/cara-mengganti-icon-pada-adress-bar.html
ReplyDeletengeronda awal pekan disini sob
ReplyDelete59209.....73351
ReplyDeletewahhh... menarik tutorial ini.. boleh dicuba...
ReplyDelete2-3 hari ini seperti datang malas seri berblog. mungkin ini penyakit para blogger yg sering membuat bosan berblog.
ReplyDelete@Seri Bahasa Kenapa harus bosan sob. tambah semangat dong OK
ReplyDeletekehadiran di awal pekan...sukses buat teman
ReplyDeletesekadar jln2 malam menikmati udara segar sambil uptrafik
ReplyDeleteHello my friend.
ReplyDeleteI wish you a good Thursday.
Teb.
hari libur yang nyaman untuk membalas jejak sahabat.
ReplyDeletekehadiran di malam minggu…salam juga buat semua para tetamu di sini
ReplyDeletejalan2 sob...akhir pekan nongol depan kompi aja..
ReplyDeleteMantap Mas Bro. terimakasih tutorialnya.
ReplyDeletekeren sob.. makasih ya?/
ReplyDeletelangsung saya terapkan kak makasi ya
ReplyDeleteNumpang Tanya Gan ~
ReplyDeleteane 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 ~