Cara menambah gadget 4 kolom pada bagian footer

 

Menambahkan gadget pada bagian bawah atau pada bagian footer tidaklah sulit dan kode yang di gunakan juga hampir sama dengan cara menambah gadget dibawah header, bedanya kita tinggal menempatkan pada bagian footer. Bagi sobat blogger yang templatenya belum menggunakan fasilitas ini, anda juga bisa menambahkan gadget pada bagian footer. Dan memang cara ini sangat bermanfaat sekali. Sebab ketika pengunjung atau pembaca artikel blog kita sudah sampai pada bagian bawah, disitu kita sudah suguhkan menu, link atau hal - hal penting lain yang kita juga berharap pengunjung juga tertarik untuk membaca.

Artikel ini saya buat atas permintaan sobat blogger yang ingin tahu cara menambah gadget pada bagian bawah atau footer.

OK..., Bila anda berminat dengan cara ini, silahkan anda bisa ikuti langkah - langkah berikut :

1. Login ke blogger dengan ID anda.

2. Klik Rancangan.

3. Dan KLik tab Edit HTML.

4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.

5. Jangan lupa Klik tombol "Expand Widget Templates"

6. Cari kode di bawah ini atau yang mirip dengan kode ini :

<b:section class='footer' id='footer'/>

 
Catatan :
Pada bagian HTML biasanya tampak seperti berikut :

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

7. Silahkan ganti kode berwarna merah dengan kode dibawah ini :

  <div id='footer-column-container'>
<div id='footer1' style='width: 225px; float: left; margin:0; '>
<b:section class='footer-column' id='footer-column-1' preferred='yes' style='float:left;'>
<b:widget id='Text1' locked='false' title='About B-G' type='Text'/>

</b:section>
</div>
<div id='footer2' style='width: 225px; float: left; margin:0; '>
<b:section class='footer-column' id='footer-column-2' preferred='yes' style='float:left;'>
<b:widget id='Text4' locked='false' title='About Author' type='Text'/>
</b:section>
</div>

<div id='footer3' style='width: 225px; float: right; margin:0; '>
<b:section class='footer-column' id='footer-column-3' preferred='yes' style='float:right;'>
<b:widget id='Text3' locked='false' title='Subscribe in Reader' type='Text'/>
</b:section>
</div>

<div id='footer4' style='width: 225px; float: right; margin:0; '>
<b:section class='footer-column' id='footer-column-4' preferred='yes' style='float:right;'>
<b:widget id='Text2' locked='false' title='Access B-G on Go' type='Text'/>
</b:section>
</div>
<div style='clear:both;'/>
</div>

Catatan :
Anda bisa ganti kode berwarna merah pada kode diatas, itu adalah nilai lebar setiap gadgetnya. Silahkan anda sesuaikan dengan lebar template milik anda.

8. Kemudian anda cari lagi kode di bawah ini atau yang mirip dengan kode ini :

]]></b:skin>

9. Copy kode dibawah ini dan paste atau letakkan kode dibawah ini, sebelum kode ]]></b:skin>:

#footer-column-container { border: .3px dotted #cccccc;} .footer-column { margin: 0 10px 0 10px; padding:5px;
color: #666666; line-height: 1.5em; font-size:12px;}
.footer-column h2 {
padding-bottom:.15em; text-align:center;
font:"normal normal 80% 'Comic Sans MS','Lucida Sans Unicode','Trebuchet MS',Sans-serif";
color:#333333;
line-height:1em; letter-spacing:.1em;
border-bottom: 1px solid #cccccc;}
.footer-column ul { list-style:none; margin:0 0 0; padding:0 0 0;}
.footer-column ul li {
background: url(http://i421.photobucket.com/albums/pp296/rnbutpur/bullet-1.gif) no-repeat;
margin:0 0 0; padding-left: 16px;
padding-bottom: 0.5em; line-height:1.2em;}
.footer-column .widget {margin:0 0 .5em; padding:0 0 1em;}

10. SIMPAN TEMPLATE.

Selamat mencoba dan Semoga bermanfaat....