Cara Menambahkan 3 Kolom di Bawah Footer

Baca Juga

3 Kolom Footer Blogspot

Bismillah... setelah kemarin saya posting tentang cara menyisipkan alexa gadget, sekarang saya akan berpindah dulu ke bagian template blogspot, kita coba acak acak yu template blogspot kita.. he he. pada postinga kali ini saya akan mencoba sharing tentang cara membuat dan menambahkan 3 kolom di bawah footer.

Cara menambahkan 3 kolom di bawah footer ini banyak sekali caranya, untuk yang pertama saya akan berikan cara yang paling mudah yaitu dengan menggunakan pasilitas blogger temaplate designer, langkah pertama sobat login ke blogger lalu klik Design/Rancangan langkah selanjutnya sobat pilih Template Design dan masuk ke are layout. nah dipaling kanan ada pengaturan Footer layout, sobat klik 3 kolom Footer lalu klik Apply To blog, selesai deh..

Namun untuk cara diatas template blog sobat harus masih default artinya templatenya masih bawaan bloggeer, terus bagaimana menambahkan 3 element gadegt di atas footer jika template blog sudah di rubah? oke sobat kita bahas langkah langkahnya sama sama sekarang. Seperti biasa sobat login ke blogger dan langkahnya seperti di atas masuk ke design dan pilih Edit HTML Blogger, lalu klik Expand Template Widget. Setelah di expand cari kode yang mirip atau sama dengan kode di bawah.

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

Jika kode diatas tidak ketemu cari CSS yang fungsinya untuk mengatur footer, jika sudah ketemu kode yang di atas atau yang mirip, sobat tambahkan kode di bawah ini di atas kode tadi.

#fot{
background:#F0F5FA;
width:100%;
position:relative;
clear:both;
margin:0px auto 0px;
color:#000000;
float:left;
padding:10px 0;
}
#fot 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;
}
#fot ul{
padding:0px;
margin:0px;
}
#fot ul li{
line-height:26px;
list-style-type:none;
border-bottom:1px dashed #031c5d;
}
#fot_1{
width:300px;
float:left;
margin:0px;
padding:0px;
}
#fot_2{
width:300px;
float:left;
margin-left:15px;
padding:0px;
}
#fot_3{
width:300px;
float:left;
margin-left:15px;
padding:0px;
}

Terus Klik save dulu biar mantap . he he. langkah selanjutnya sobat cari kode di bawah ini atau yang mirip pokonya kode yang mengatur letak gadget footer

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

Jika sudah ketemu dengan kode footer di atas sobat tambahkan kode di bawah ini diatas kode <div id='footer-wrapper'> kode yang harus di tambahkan yaitu:

<div id='fot'>
<b:section class='bottom' id='fot_1' preferred='yes'/>
<b:section class='bottom' id='fot_2' preferred='yes'/>
<b:section class='bottom' id='fot_3' preferred='yes'/>
</div>

Jika sudah, sobat klik Save dan lihat hasilnya di tab design/rancangan template, silahkan sobat atur dan sesuaikan dengan template yang sobat miliki, untuk pengaturan background, ul, li ,lebar footer,dll ada di CSS, jika berhasil hasilnya akan seperti di bawah

Tiga Kolom Gadget Footer

Sekian dulu cara membagi atau menambahkan 3 kolom di bawah footer semoga bermanfaat good luck Happy Blogging