Cara Menambahkan 3 Kolom Footer (Bawah) Blog – salah satu hal yang biasa dialami oleh para blogger, terutama padadiri Saya sendiri ada ketika memiliki template yang tidak memiliki Kolom Footer.
Tidak masalah memang jika Sobat adalah seorang bisa membuat template sendiri. Bisa mengoprasikan photoshop untuk kemudian dilanjutkan pada dreamweaver lalu membuat template sesuka hati. Namun blogger itu bukan hanya diminati oleh ahli HTML atau PHP saja, melainkan juga pemula.
Karena tidak bisa menciptakan template sendiri, maka ya jelas untuk memperoleh template yang sesuai dengan hati dapat dilakukan dengan cara mendownload template yang banyak dibagikan diinternet. Nah, masalahnya, terkadang ada sebagian kecil template yang ternyata tidak memiliki kolom footer (Kolom kaki), alias kosong. Jadi, untuk memasang widget di footer blog sudah pasti tidak akan bisa.
Artikel “Cara Menambahkan 3 Kolom Footer (Bawah) Blog” Saya bagikan untuk menunjukkan kepada Sobat bagaimanakah cara menambah footer pada blog yang sebelumnya tidak memiliki footer.
Saya yakin, andaikan Sobat menulis di kotak pencarian internet pasti akan menemukan banyak sekali link blog yang menawarkan cara ini. Namun, berdasarkan pengalaman Saya, beberapa tips tidak berfungsi. Entah karena apa. Mungkin karena script tidak Compatible dengan template atau apalah, yang pasti tidak berhasil.
Melihat keadaan ini, Saya akan membagikan Cara Menambahkan 3 Kolom Footer (Bawah) Blog yang 100% dari pengalaman Saya sendiri plus tidak sembarangan Copas-copas aja.
Cara Menambahkan 3 Kolom Footer (Bawah) Blog
1. Login blogger.com
2. Klik Template, pilih edit html
3. Untuk antisipasi, silahkan download dulu template Sobat
4. Cari kode ]]></b:skin>(Gunakan Ctrl + F untuk memudahkan pencarian), Paste kode dibawah ini tepat diatas kode ]]></b:skin>
/* ----- LOWER SECTION ----- */
#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;
}
5. Selanjutnya, cari kode </body> dan paste kode dibawah ini tepat diatas 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>
6. Klik Simpan Template
Catatan :
Sobat bisa mengedit script diatas dengan keinginan. Berikut ini spesifikasinya :
- 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.