Selasa, 25 Februari 2014

Cara Membuat 3 Kolom Elemen di Atas Footer

Ayo Dukung Kontes SEO Harga Jual Blackberry iphone laptop murah | Javahostindo Web Hosting Indonesia | Komodo Island is new 7 wonders of world BLOGNYA SI IMIN

Kali ini saya akan membahas bagaimana Cara Membuat 3 Kolom Elemen di Atas Footer.
Khusus buat sobat blogger pemula yang ingin membuat 3 Kolom Elemen di Atas Footer.
Silahkan ikuti langkah-langkah berikut :

Login ke Blogger klik Rancangan klik Edit HTML klik tulisan Download Template Lengkap.
Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula.
Beri tanda centang pada kotak di samping tulisan Expand Template Widget, kemudian cari kode seperti dibawah
Tips : Untuk mempercepat pencarian sobat bisa gunakan tombol (F3)

#footer{
background:#F0F5FA;
width:960px;
height:32px;
margin:0px;
padding: 0px;
float:left;
}

Jika sudah ketemu tambahkan kode berikut di atasnya :

#bottom{
background:#F0F5FA;
width:100%;
position:relative;
clear:both;
margin:0px auto 0px;
color:#000000;
float:left;
padding:10px 0;
}
#bottom h2{
color:#000000;
font-size: 14px;
font-family: Arial, Tahoma, Verdana;
font-weight: bold;
margin: 0px 0px 8px 0px;
padding: 0px;
letter-spacing:0em;
text-transform:capitalize;
}
#bottom ul{
padding:0px;
margin:0px;
}
#bottom ul li{
line-height:26px;
list-style-type:none;
border-bottom:1px dashed #031c5d;
}
#bottom_1{
width:300px;
float:left;
margin:0px;
padding:0px;
}
#bottom_2{
width:300px;
float:left;
margin-left:15px;
padding:0px;
}
#bottom_3{
width:300px;
float:left;
margin-left:15px;
padding:0px;
}

Untuk membuat elemen di atas footer.
Cari kode seperti dibawah ini :

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

Jika sudah ketemu tambahkan kode berikut di atasnya :

<div id=bottom>
<b:section class=bottom id=bottom_1 preferred=yes/>
<b:section class=bottom id=bottom_2 preferred=yes/>
<b:section class=bottom id=bottom_3 preferred=yes/>
</div>

Keterangan : Sesuaikan ukuran lebar width footer dengan template dan lebar elemen yang akan ditambahkan.
Jika sudah selesai SIMPAN TEMPLATE dan lihat hasilnya.

Selamat mencoba


sumber



Jangan Lupa Dukung Kontes SEO

Harga Jual Blackberry iPhone Laptop Murah



0 komentar:

Posting Komentar

Catatan: Hanya anggota dari blog ini yang dapat mengirim komentar.

 

Copyright © Informasi terbaru Design by O Pregador | Blogger Theme by Blogger Template de luxo | Powered by Blogger