Membuat 3 Kolom Footer Untuk Widget di Blogger

Jika anda mencari cara untuk menambahkan 3 kolom footer untuk menempatkan widget/gadget di situs/blog anda, maka ini adalah beberapa langkah yang dapat anda lakukan hingga widget 3 kolom footer  benar-benar terpasang di situs/blog anda. Ini merupakan sebuah kreasi menarik dari yang memungkinkan anda menambahkan widget-widget sederet di bawah beranda postingan blog anda. Apabila anda menemukan kendala ketika memasang kode tersebut, harap agar dibaca baik-baik langkah-langkahnya dan temukan kode petunjuk dengan menggunakan Ctrl F agar mudah menemukan kode semisal </body> dan atau  ]]></b:skin>. Dengan demikian, jika kode berikut di tempatkan sesuai dengan petunjuk, maka anda akan dapat melakukan peninjauan (preview) untuk melihat demonya. Jika tidak ada perubahan, silahkan anda dapat menitipkan komentar agar kita dapat memecahkan secara bersama-sama.

Untuk mengatur 3 kolom footer seperti ini, anda harus memastikan bahwa anda menguasai edit template yang ada di dalam blog anda, dengan demikian anda akan dapat melakukan pemasangan ini dengan sangat mudah. Apabila anda masih pemula seperti kita ini, maka segera hubungi teman-teman dekat yang dapat anda ajak untuk nimbrung mendesain blog anda biar bagus dan profesional menurut kita pemula.

Jika anda sudah siap maka, lakukan dengan terlebih dahulu menambahkan tab di halaman browsing anda. Setelah itu lakukan pemasangan dengan petunjuk sebagai berikut:

Menambahkan 3 Kolom Footer di Blogger

• Login ke Dashboard blog Anda
• Pilih tab Template

• Backup dulu template Anda jika diperlukan
• Klik Edit HTML
• Kemudian cari kode ]]></b:skin> (Gunakan Ctrl + F untuk memudahkan pencarian)
• Lalu letakkan kode di bawah ini tepat di atas kode ]]></b:skin> tadi

/* -----   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;
}

• 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>

• Klik Save template kemudian masuk ke tab Layout - Gulir ke bawah dan Anda siap menambahkan gadget yang Anda inginkan di sana.

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.

Jika Anda merasa artikel ini berguna, silahkan bagikan artikel ini dengan teman-teman Anda baik melalui Facebook, Twitter, Google Plus dan lain sebagainya. Terimakasih semoga ini membantu..

Sumber : Di Sini