Cara Buat Footer 3 Kolom Dengan Mudah di Blog

Jika 3 kolom footer ini memang benar-benar Anda butuhkan maka Anda dapat menambahkannya secara mudah dan sederhana pada blog Anda.

Baiklah langsung saja ikuti langkah-langkah di bawah ini untuk menambahkan widget 3 kolom footer di blog Anda.


Menambahkan 3 Kolom Footer di Blogger

• Login ke Dashboard blog Anda
• Pilih tab Template

• Simpan dulu template Anda jika diperlukan
• Klik Edit HTML
• Kemudian cari kode ]]></b:skin> (Gunakan F3 untuk memudahkan pencarian)
• Lalu letakkan kode di bawah ini tepat di atas 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; }

• Setelah itu cari kode </body>  
• dan letakkan kode di bawah ini tepat di atas 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, dan coba lihat di Tata Letak.. Pasti ada.

Posted in: Tips and Trick,Tutorial