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.
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#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;
}
<div id='footer-wrapper'>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:
<b:section class='footer' id='footer'/>
</div>
<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
Comments :
0 komentar to “Cara menambahkan 3 kolom di bawah footer”
Posting Komentar