-->






Menambah 3 kolom footer di blog

Cara menambah 3 kolom di bagian footer , kolom yang di maksud adalah kolom untuk widged baik untuk iklan atau widged random post atau yang lainya
kadang kala kita memiliki template blog tapi untuk kolom-kolom nya masih kurang untuk menampilkan aksesoris yang kita miliki
dalam postingan blogger wonogiri kali ini saya akan memberikan panduan cara menambah 3 kolom di footer di blog

Jika anda ingin menambahkan 2 kolom diatas footer silahkan buka panduan cara menambah 2 kolom widget di atas footer

Untuk menambahkan 3 kolom diatas footer simak panduanya di bawah ini :
untuk contoh ke 3 kolom di bagian footer tersebut seperti pada gambar di bawah ini :

menambah 3 kolom footer

dan untuk cara pembuatan menambahkan 3 kolom di bagian footer selengkapnya silahkan ikuti panduanya di bawah ini :

Cara membuat 3 kolom footer

1.buka blog anda lalu login untuk menuju dashboard blog
2.pilih template dan klik edit HTML
3.lalu cari kode ]]></b:skin>
4.selanjutnya kopi kode di bawah ini dan pastekan di atas kode ]]></b:skin> 

 /* -----   Lower selection   ----- */
#lower {
       margin:auto;
       padding: 0px 0px 10px 0px;
       width: 100%;
       background:#ffffff;
}
#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 kopi lagi kode di bawah ini dan pastekan di bawah kode ini <footer id='footer-wrapper'>


<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.lalu simpan template nya
7.selesai

dan untuk melihat hasil pembuatan 3 kolom footer silahakn di buka tata letak template blog anda

sampai disini tentang cara menambahkan 3 kolom di footer semoga bermanfaat, Terimakasih..
Baca juga Cara membuat zoom otomatis pada gambar
Komentar

Tampilkan

No comments:

Post a Comment

sejarah

+