kita akan belajar membuat widget yang terdiri 3 kolom pada bagian bawah atau footer blog, kali ini tidak cuman membuat 3 kolom sebenarnya dari kode dibawah ini kita gak cuman bisa membuat 3 kolom tapi 2 kolom, 1 kolom, 4 -5 kolom pun bisa , nanti akan kitabahas,

kenapa kita perlu membuat 3 widget ini? pada blog kita terutama pada footer kita ? sebenarnya sih kalau hal ini selera kita masih-masing sih, mau membuat nya ada atau tidak, mungkin bahkan ada yang di sediakan 3 kolom widget ini tapi malah tidak digunakan karena tidak selera, sebaliknya ada yang suka ingin ada widget 3 kolom ini tapi malah tidak di lengkapi T.T sedih bukan, nah buat anda jangan sedih karena sekarang kita akan membahas hal tersebut agar anda bisa memiliki widget tersebut

sekarang kita memahami dulu struktur widget tersebut, sebenarnya widget ituhanya 1 saja ada pada da kode ini

<b:section class='footerwidget' id='footerwidget1' preferred='yes'>
  

tentu bagi yang belum paham pasti baru tahu kalau kode diatas adalah kode wajib dalam pembuatan widget nah selanjutnya,

class'footerwidget' : ini hanyalah sebuah class untuk di gunakan pada css nanti

id='footerwidget1' : ini yang menentukan nomer widget anda jika widget ini ada nama yang sama, pasti akan terjadi penolakan saat kita menyimpan template tersebut, anda bisa membuat id tersebut berbeda beda contoh

<b:section class='footerwidget' id='footerwidget1' preferred='yes'>
<b:section class='footerwidget' id='footerwidget2' preferred='yes'> 
<b:section class='footerwidget' id='footerwidget3' preferred='yes'> 
<b:section class='footerwidget' id='footerwidget4' preferred='yes'> 

jika kalian menggunakan empat kode ini jadi anda membuat 4 widget nah intinya seperti itu lah

tapi ingat!

jika anda hanya menggunakan itu nanti widget tersebut akan mendatar sampai lebar template anda .. ini harus di ingat, nah bagaimana agar kita mempunyai 3 kolom yang memiliki lebar sama dan sejajar kanan, tengah, kiri?

nah itu dia jadi kita membutuhkan sebuah css agar itu bisa kita atur lebar kanan kiri oknya :v seperti itulah mungkin bisa anda pahami, jika gak paham nanti tanyakan aja lewat komentar yah, kita lanjut aja ke pemasangan kode yang sudah ada, dari pada bingung buat dari awalkan :D

Tahap membuat 3 kolom widget pada bagian footer

pertama, buka blogger sampai ke edit Html jika anda belum bisa buka tamat dah

kedua, masukkan kode dibawah ini datas kode footer anda, cari tempat footer anda bisa dengan CTRL+F dan cari <div class='footer'  kalau gak ada <div id='footer' kalau gak ada juga cari </body> kemudian pastekan kode dibawah ini. ingat jika diletakan diatas body maka anda pastikan ada tidak mempunyai credit footer yah jika anda ingin meletakan dibawah credit footer gak masalh juga langsung pastekan diatas </body> saja

<!-- start footer widget-->
<div id='footwid'>
<div id='footwid-wrapper'>
<div id='footerwidget-wrapper'>
<b:section class='footerwidget' id='footerwidget1' preferred='yes'>
</b:section>
</div>
<div id='footerwidget-wrapper'>
<b:section class='footerwidget' id='footerwidget2' preferred='yes'>
</b:section>
</div>
<div id='footerwidget-wrapper'>
<b:section class='footerwidget' id='footerwidget3' preferred='yes'>
</b:section>
</div>
<div style='clear: both;'/>
</div> </div>
<!-- End footer widget -->
 

nah langkah ketiga, silahkan anda cari kode ]]></b:skin> langsung copy code dibawah ini dan pastekan diatas kode ]]></b:skin> agar bisa terlihat rapi widget diatas

/* -----   widget 3 kolom   ----- */
#footwid {
       margin:auto;
       padding: 0px 0px 10px 0px;
       width: 100%;
       
}
#footwid-wrapper {
       margin:auto;
       padding: 10px 0px 10px 0px;
       width: 960px;
}
#footerwidget-wrapper {
       border:1px solid #ccc;
       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;
}
.footerwidget {margin: 0; padding: 0;
}
.footerwidget .widget {margin: 0; padding: 10px 20px 0px 20px;
}
.footerwidget h2 {
       margin: 0px 0px 10px 0px;
       padding: 3px 0px 3px 0px;
       text-align: left;
       color:#000;
       text-transform:normal;
       font: bold 14px Arial, Tahoma, Verdana;
       border-bottom:3px solid #0084ce;
}
.footerwidget ul {
      margin: 0px 0px 0px 0px;
      padding: 0px 0px 0px 0px;
      list-style-type: none;
}
.footerwidget li {
      margin: 0px 0px 2px 0px;
      padding: 0px 0px 1px 0px;
      border-bottom: 1px dotted #ccc;
} 

nah diatas adalah cara membuat widget 3 kolom semoga bisa membantu yang belum mempunyai tapi jika anda sudah punya semoga bisa mengingatkan, jangan lupa tanyakan sesuatu kepada kami jika belum mengerti