Widget Footer Empat Kolom
Memasang footer empat kolom di edit HTML
Footer pada blog yang berada dibagian paling bawah pada halaman blog, biasanya berjumlah lebih dari satu kolom, yang memiliki fungsi untuk menambahkan gadged dihalaman blog, gadged tersebut berfungsi untuk tempat penyimpanan file. Dibawah ini adalah kode footer empat kolom,
berikut cara penerapannya.
Memasang footer empat kolom di edit HTML
Footer pada blog yang berada dibagian paling bawah pada halaman blog, biasanya berjumlah lebih dari satu kolom, yang memiliki fungsi untuk menambahkan gadged dihalaman blog, gadged tersebut berfungsi untuk tempat penyimpanan file. Dibawah ini adalah kode footer empat kolom,
berikut cara penerapannya.
Login ke akun blog klik edit HTML temukan kode ]]></b:skin>
gunakan CTRL F untuk pencarian copy kode berikut pastekan diatas kode ]]></b:skin>
gunakan CTRL F untuk pencarian copy kode berikut pastekan diatas kode ]]></b:skin>
/*----- MBT MULTI COLUMN FOOTER WIDGET -----*/
#lower {
margin:auto;
padding: 0px 0px 10px 0px;
width: 100%;
background:#333333;
}
#lower-wrapper {
background:#333333;
margin:auto;
padding: 20px 0px 20px 0px;
width: 960px;
border:0;
}
#lowerbar-wrapper {
background:#333333;
float: left;
margin: 0px 5px auto;
padding-bottom: 20px;
width: 23%;
text-align: justify;
color:#ddd;
font: bold 12px Arial, Tahoma, Verdana;
line-height: 1.6em;
word-wrap: break-word;
overflow: hidden;
}
.lowerbar {margin: 0; padding: 0;}
.lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
.lowerbar h2 {
margin: 0px 0px 10px 0px;
padding: 3px 0px 3px 0px;
text-align: left;
border:0;
color:#ddd;
text-transform:uppercase;
font: bold 14px Arial, Tahoma, Verdana;
}
.lowerbar ul {
color:#fff;
margin: 0 auto;
padding: 0;
list-style-type: none;
}
.lowerbar li {
display:block;
color:#fff;
line-height: 1.6em;
margin-left: 0 !important;
padding: 6px;
border-bottom: 1px solid #222;
border-top: 1px solid #444;
list-style-type: none;
}
.lowerbar li a {
text-decoration:none; color: #DBDBDB;
}
.lowerbar li a:hover {
text-decoration:underline;
}
.lowerbar li:hover {
display:block;
background: #222;
}
Kemudian cari kode </body>
copy kode berikut ini pastekan diatas kode tersebut dan klik simpan selesai
copy kode berikut ini pastekan diatas kode tersebut dan klik simpan selesai
<div id='lower'>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>
</b:section>
</div>
<div style='clear: both;'/>
</div> </div>
Edited by. Myscript2010
Sumber by. Mybloggertricks
Sumber by. Mybloggertricks