Cara Membuat 3 Kolom Footer di Blogger

Kali ini pembahasan saya sangat berbeda, bukan tentang Hacker, aatau Nazi. Saya akan memberikan solusi bagi kalian yang ingin membuat 3 Kolom Footer di Blogger, hal ini sering saya dilakukan karena kurang puas dengan tampilan template yang tanpa footer. Jika kalian ingin membuatnya silahkan di simak caranya :

• 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. ini hasilnya

Jika kalian ingin mengeditnya silahkan kalian perhatikan hal-hal berikut ini :

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

Thanks sob, sudah baca artikel saya ini, semoga bermanfaat dan semoga berhasil,..

Share on Google Plus

About Unknown

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.