Footer atau kaki blog adalah
bagian yang biasanya berisi informasi singkat soal copy right, mesin yang
dipakai dan mungkin juga informasi kecil soal blog. Di footer ini juga bisa
kita sisipkan judul artikel sehingga bisa menambah daya dorong SEO-nya.Jika
anda ingin memiliki 3 kolom footer yang bagus yang terpasang di blog maka Anda
dapat menambahkannya secara mudah dan sederhana. Kami telah menyediakan kodenya
untuk Anda semua, silahkan Anda terapkan dalam blog Anda semua dengan
proses instalasi yang sangat sederhana.
Berikut Langkah-langkahnya dalam
membuat footer di blogger:
1.
Login ke Blogger
2.
Selanjutnya Pilih Menu Template
3.
Klik Edit HTML
4.
Back up terlebih dahulu Template anda
5.
Selanjutnya
cari kode ]]></b:skin> (Gunakan Ctrl +
F untuk memudahkan pencarian)
6.
Lalu letakkan kode di bawah ini tepat di atas
kode ]]></b:skin> tadi
#lower {
margin:auto;
padding: 0px 0px 10px 0px;
width: 100%;
background:#333434;
}
#lower-wrapper {
margin:auto;
padding: 20px 0px 20px 0px;
width: 960px;
}
#lowerbar-wrapper {
border:1px solid #DEDEDE;
background:#fff;
float: left;
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:#0084ce;
text-transform:uppercase;
font: bold 14px Arial, Tahoma, Verdana;
border-bottom:3px solid #0084ce;
}
.lowerbar ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
list-style-type: none;
}
.lowerbar li {
margin: 0px 0px 2px 0px;
padding: 0px 0px 1px 0px;
border-bottom: 1px dotted #ccc;
}
7. Setelah itu cari kode </body> dan
letakkan kode di bawah ini tepat sebelum kode </body>
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 style='clear: both;'/>
</div> </div>
8.
Klik Save template kemudian masuk
ke tab Layout - Gulir ke bawah dan Anda siap menambahkan gadget yang
Anda inginkan di sana.
Hasilnya akan tampak seperti
berikut
Pengaturan
Anda dapat dengan mudah menyesuaikan
tampilan dan warna dari widget footer ini. Saya telah menandai dan mewarnai
bagian-bagian penting dalam kode CSS di atas. Bacalah deskripsi di bawah ini
dengan hati-hati untuk menyesuaikan widget 3 kolom ini sesuai keinginan Anda.
Untuk mengetahui kode warna, gunakanlah Kode Warna
Generator milik kami.
- background:#333434; Gantilah 6 digit kode warna pada
bagian ini untuk mengubah warna background widget.
- width: 960px; Ini adalah lebar widget. Jika
Anda mau, Anda dapat menyesuaikan nilai ini agar lebarnya sesuai dengan
lebar blog Anda.
- background:#fff dan width:
32%; Ini adalah warna background dan lebar tiga kolom widget
yang ditambahkan.
- color:#0084ce; Ini adalah warna Title Heading
- font: bold 14px Arial,
Tahoma, Verdana; Edit bagian
ini untuk mengganti ukuran font dan jenis font.
- border-bottom: 3px
solid # 0084ce; Edit bagian
ini untuk mengubah ketebalan, style, dan warna border yang muncul di
bagian bawah Title Heading.
- border-bottom: 1px
dotted # ccc; Edit bagian
ini untuk mengubah ukuran, style, dan warna border yang muncul di bawah
link.
Selamat Mencoba
