-->






Cara membuat 2 kolom widget footer

Cara membuat 2 kolom footer untuk widget apa saja seperti kolom ruang iklan atau untuk menampilkan fitur-fitur blog website sobat blogger wonogiri. 

Cara menambahkan kolom widged di footer atau cara membuat kolom untuk footer
kerangka kolom blog atau tata letak suatu template berfariasi / berbeda-beda , karena suatu template di buat oleh banyak orang jadi untuk selerapuntidak sama.
yang sering di alami bagi para sobat blogger kadang kala sudah menyukai template nya tapi ternyata susunan kolom-kolom nya tidak cukup untuk menampilkan aksesories yang kita punya  nah jika sudah begitu maka salah satu dari cara yang lain adalah membuat atau menambahkan kolom secara manual / di pasang sendiri
sesuai judul posting ini Cara membuat 2 kolom footer saya akan memberikan panduanya membuat dan memasang kolom di footer,
sebagai contoh 2 kolom di footer yang akan saya berikan panduanya disini bisa di lihat contohnya pada gambar di bawah ini :

cara membuat 2 kolom footer


untuk cara pembuatan kolom untuk widged di bagian footer sangat mudah hanya perlu menambahkan 2 kode masing-masing satu (1) kode css dan satu (1) kode Html di bagian Html Template, cara pembuatanya silahkan simak panduanya di bawah ini

cara membuat dan memasang 2 kolom footer :

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

 /* ---2 footer blogger wonogiri--- */
#lower {
       margin:auto;
       padding: 0px 0px 10px 0px;
       width: 100%;
       background:#transparant;
}
#lower-wrapper {
       margin:auto;
       padding: 20px 0px 20px 0px;
       width: 960px;
}
#lowerbar-wrapper {
     border:0px solid #DEDEDE;
       background:#fff;
       float: left;
       margin: 0px 5px auto;
       padding-bottom: 20px;
       width: 32%;
       text-align: justify;
       font-size:100%;
       line-height: 1.4em;
       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: 2px 0px 2px 0px;
       text-align: left;
       color:#0000ff;
        text-transform:uppercase;
      font: bold 14px Arial, Tahoma, Verdana;
       border-bottom:1px solid #000000;
}
.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;
}

 

Keterangan :

  • kode merah ( 960 ) pada kode di atas adalah sebagai ukuran total panjang keseluruhan kolom widged nya jika tidak sesuai silahkan sesuaikan dengan ukuran panjang template anda  
5.kopi lagi kode di bawah ini dan pastekan di bawah kode <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 style='clear: both;'/>
</div> </div>

5.simpan html template nya
6.selesai..

Sampai disini panduan blogger dari Blogger wonogiri tentang cara membuat 2 kolom footer di blog website, 
Komentar

Tampilkan

No comments:

Post a Comment

sejarah

+