Cara membuat footer menjadi banyak kolom

Senin, Juni 11, 2012 Diposting oleh Unknown

Sebenarnya membuat footer blogspot menjadi 3 kolom dapat kita lakukan dengan mudah pada Template Designer yang sudah tersedia pada Blogger, namun ada bebarapa template yang tidak mendukung atau support dengan template designer tersebut.

Membuat 3 kolom blogger

Berikut ini adalah cara membuat sendiri untuk menambahkan kolom pada Footer pada blog menjadi 3 atau 4 kolom, dengan menambahkan sedikit CSS sebagai penyusun rangka layout template anda:

Masuk ke akun Blogger.
Klik pada Tab Template > Edit Html
Copy Css berikut dan letakan tepat diatas kode ]]></b:skin>

#lower {
border-top: #737373 6px solid;
margin:auto;
font-family: Georgia;
width: 968px;
padding: 0px 0px 10px 0px;
background:#1f1f1f;
}
#lower a {
color: #DBDBDB;
font-family: Georgia;
}
#lower-wrapper {
margin:auto;
font-family: Georgia;
padding: 20px 0px 20px 0px;
width: 960px;
}
#lowerbar-wrapper {
background:#1f1f1f;
float: left;
color: #ebedee;
font-family: Georgia;
margin: 0px 5px auto;
padding-bottom: 20px;
width: 32%;
text-align: justify;
font-size:100%;
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;
color:#fff;
text-transform:uppercase;
font: bold 16px Georgia;
border-bottom:3px double #666666;
}
.lowerbar ul {
list-style:none;
margin: 0;
padding: 0;
}
.lowerbar li a {
width: 265px;
font-family: Georgia;
background: #3f3f3f;
border: 1px solid #111;
line-height: 1.4em;
-moz-border-radius: 5px;
padding: 0.5em;
margin-bottom: 11px;
margin-right: 3px;
-webkit-border-radius: 5px;
overflow: hidden;
color:#000000;
}
.lowerbar li a:visited {
width: 265px;
font-family: Georgia;
background: #3f3f3f;
border: 1px solid #111;
line-height: 1.4em;
-moz-border-radius: 5px;
padding: 0.5em;
margin-bottom: 11px;
margin-right: 3px;
-webkit-border-radius: 5px;
overflow: hidden;
color:#000000;
}
.lowerbar li a:hover {
background: #4f4f4f;
border: 1px solid #7a7a7a;
line-height: 1.4em;
-moz-border-radius: 5px;
padding: 0.5em; -webkit-border-radius: 5px;
overflow: hidden;
color:#000000;
}
.lowerbar a {
font-family: Georgia;
background: #3f3f3f;
border: 1px solid #111;
line-height: 1.4em;
float:left;
-moz-border-radius: 5px;
padding: 0.5em;
margin-right: 3px;
margin-bottom: 11px;
-webkit-border-radius: 5px;
overflow: hidden;
color:#000000;
}
.lowerbar a:hover {
background: #4f4f4f;
border: 1px solid #7a7a7a;
line-height: 1.4em;
-moz-border-radius: 5px;
padding: 0.5em; -webkit-border-radius: 5px;
overflow: hidden;
color:#000000;
}

Kemudian Cari kode berikut

<div id='page-footer'>

Ganti/Replace dengan kode dibawah

<div id='lower'> 
<div id='lower-wrapper'> 
<div id='lowerbar-wrapper'> 
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
<b:widget id='HTML2' locked='false' title='Langganan Artikel' type='HTML'/>
</b:section> 
</div> 
<div id='lowerbar-wrapper'> 
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
<b:widget id='Followers1' locked='false' title='Anggota Blog' type='Followers'/>
</b:section> 
</div> 
<div id='lowerbar-wrapper'> 
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
<b:widget id='HTML9' locked='false' title='FB Like' type='HTML'/>
</b:section> 
</div>

Simpan template anda.

Semoga berhasil.

Tags: Belajar blog

Share your views...

0 Respones to "Cara membuat footer menjadi banyak kolom"

Posting Komentar

Sebelum memberikan komentar, silahkan menjadi anggota sitelearning terlebih dahulu, Terimakasih

It's all about sharing information online | Site learning: Cara membuat footer menjadi banyak kolom