Cara Membuat Kolom Diatas Footer

Cara menambah widget - Selamat malam blogger mania. Template blog adalah salah satu pendukung agar sebuah blog disukai oleh google maupun para pengunjung. Tak jarang para blogger rela berjam-jam untuk membuat atau mengedit template agar terlihat bagus dimata google maupun pengunjung. Jika kita sudah paham dengan kode script yang ada didalam template mungkin tidak terlalu susah. Yang bikin repot jika kita tidak paham kode-kode tersebut, seperti saya contohnya. Karena minimnya pengetahuan tentang kode script, saya mungkin bisa 2 hari bahkan lebih untuk mengedit suatu template agar terlihat bagus.

Pernah suatu ketika saya mengganti template salah satu blog, kemudian saya coba utak-atik dengan menambahkan atau mengurangi bagian-bagian yang tidak pas menurut saya. Waktu itu saya butuh 2 hari untuk menyelesaikannya, dan harus rela tidak update artikel gara-gara sibuk ngurusin template. Hasil akhirnya memang cukup bagus buat saya yang notabene awam dengan kode script. Setelah beberapa hari berjalan, saya baru sadar kalau template tersebut tidak ada kolom widget diatas footer. Bagi saya kolom  tersebut sangat penting, karena saya sudah terbiasa meletakkan elemen-elemen informasi pada bagian tersebut.

Akhirnya saya meluncur ke tempat mbah google untuk mencari solusi. Ternyata buanyak sekali artikel-artikel yang membahas tentang menambah kolom diatas footer ini. Beberapa kali mencoba hasilnya template blog saya malah ancur. Sampai pada akhirnya saya menemukan script yang cocok buat ditempatkan pada template blog saya. Jika anda saat ini sedang mengalami kasus seperti diatas, mungkin artikel ini bisa menjadikan solusi buat template blog anda. Langsung saja simak langkah-langkahnya dibawah ini !

sebelum ditambah kolom

setelah ditambah kolom

Membuat 3 Kolom Diatas Footer

1. Login ke akun blog anda

2. Pilih bagian Template, lalu klik Edit HTML

3.Cari kode berikut ]]></b:skin> dengan CTRL+F
4. Setelah ketemu, copy dan paste kode dibawah ini tepat di atas kode ]]></b:skin>

/* -----   3 KOLOM FOOTER   ----- */
#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. Lalu cari kode </body> dan copy kode dibawah ini lalu paste tepat diatas </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. Pratinjau Template
7. Lalu save template anda

Keterangan tulisan warna merah di atas :

• #333434 = warna background dasar dari widget
• 960px = lebar template, silahkan disesuaikan dengan lebar template anda
• #fff = warna widget
• 32% = lebar masing-masing kolom widget
• #0084ce = warna judul pada widget yang anda tambahkan nanti
• bold 14px Arial, Tahoma, Verdana = untuk mengganti ukuran dan jenis font
• 3px solid #0084ce = untuk merubah ukuran dan warna garis yang ada di bawah judul widget
• 1px dotted #ccc = untuk merubah ukuran, warna, dan model border yang ada dibawah link

Anda bisa berkreasi dengan mengganti tulisan warna merah di atas untuk disesuaikan dengan warna dan tema template blog anda. Sekian artikel dari saya, semoga bermanfaat buat kita semua.