1.Membuat Artikel Terkait
2.Membuat Text Area
3.Membuat text melayang
4.Membuat Link Download
5.Membuat Menu DropDown
6.Membuat 3 Kolom Dibawah Header
7.Membuat 3 Kolom Diatas Footer
8.Menghilangkan Navbar
9.Membuat Background Posting
10.Membuat Background Gambar
11.Membuat Link Backlink
12.Membuat Status YM Online
13.Pasang Widget SMS
14.Mengganti Icon Blogger
15.Membuat Menu Artikel Menjadi 2 Bagian
16.Membuat-typing-text-
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 Kalau sobat pingin liat seperti apa itu 3 Kolom Elemen di Atas Footer di bawah ini gambarnya
Langsung aja ke Tujuan
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;
}
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;
}
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;
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!!
-------------------------------------------------
Dikutip dari: http://ade-tea.blogspot.com/2010/11/membuat-3-kolomelemen-di-atas-footer.html#ixzz1FbARwO8X
0 Comment:
Post a Comment
Silahkan Beri Komentar Anda disini, Pergunakan Bahasa yang Singkat dan Sopan, Berikan Komentar Anda Sesuai Topic Artikel.