Membuat Footer di Blog / Membuat Footer di Bawah Postingan

Assalamu'alaikum...
Pagi, sahabat blogger semua, apa aktivitas kalian hari ini? hmm... semoga selalu dalam keadaan baik-baik saja ya.... Hmmm... atau masih ada yang lagi males bangun nih, masih berlayar di pulau mimpi.... hehehe....
Ok... pagi ini ane mau berbagi dengan sahabat blogger semua tentang bagaimana CARA MEMBUAT KOLOM FOOTER DI BLOG / CARA MEMBUAT FOOTER DI BAWAH POSTINGAN langsung aja yuk.. ini dia caranya sobat.

1. Langkah pertama, Anda mesti login dulu ke Blogger
2. Kemudian klik Design
3. Backup template dengan klik pada Download Full Template agar bisa mengembalikan template ke kondisi semula jika hasilnya tidak memuaskan.
4. Kalau sudah, cari kode ]]></b:skin> 
5. Tambahkan kode di bawah ini diatas kode ]]></b:skin>
   

   #footer-column-divide {
   clear:both;
   }
   .footer-column {
   padding: 10px;
   }

6. Kemudian cari kode di bawah ini.
   

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

   atau

   
   <div id='footer'>
   <b:section class='footer' id='footer' showaddelement='yes'/></div>

7. Langkah selanjutnya tambahkan kode berikut dibawah kode <b:section class='footer' id='footer' showaddelement='yes'/> atau <b:section class='footer' id='footer' />
   
   
   Catatan:
   

   Jika pada template yang Anda gunakan tidak ada kode <b:section class='footer' id='footer' showaddelement='yes'/> maka tambahkan saja kode berikut dibawah <div id='footer'>
   
   
   Jika Anda menginginkan membagi footer menjadi 2 kolom, gunakan kode berikut :
   

   <div id='footer-column-divide'>
   
   <div id='footer1' style='width: 50%; float:left;
   margin:0; text-align:left;'>
   <b:section class='footer-column' id='col1'
   preferred='yes' style='float:left;'/>
   </div>
   
   <div id='footer2' style='width: 50%; float: left;
   margin:0; text-align: left;'>
   <b:section class='footer-column' id='col2'
   preferred='yes' style='float:left;'/>
   </div>
   
   <div style='clear:both;'/>
   </div>

   
   Membagi footer menjadi 3 kolom, gunakan kode berikut :
   

   <div id='footer-column-divide'>
   
   <div id='footer1' style='width: 33%; float:left;
   margin:0; text-align:left;'>
   <b:section class='footer-column' id='col1'
   preferred='yes' style='float:left;'/>
   </div>
   
   <div id='footer2' style='width: 33%; float: left;
   margin:0; text-align: left;'>
   <b:section class='footer-column' id='col2'
   preferred='yes' style='float:left;'/>
   </div>
   
   <div id='footer3' style='width: 33%; float: right;
   margin:0; text-align: left;'>
   <b:section class='footer-column' id='col3'
   preferred='yes' style='float:right;'/>
   </div>
   
   <div style='clear:both;'/>
   </div>

   Membagi footer menjadi 4 kolom, gunakan kode berikut :
   

   <div id='footer-column-divide'>
   
   <div id='footer1' style='width: 25%; float:left;
   margin:0; text-align:left;'>
   <b:section class='footer-column' id='col1'
   preferred='yes' style='float:left;'/>
   </div>
   
   <div id='footer2' style='width: 25%; float: left;
   margin:0; text-align: left;'>
   <b:section class='footer-column' id='col2'
   preferred='yes' style='float:left;'/>
   </div>
   
   <div id='footer3' style='width: 25%; float: right;
   margin:0; text-align: left;'>
   <b:section class='footer-column' id='col3'
   preferred='yes' style='float:right;'/>
   </div>
   
   <div id='footer4' style='width: 25%; float: right;
   margin:0; text-align: left;'>
   <b:section class='footer-column' id='col4'
   preferred='yes' style='float:right;'/>
   </div>
   
   <div style='clear:both;'/>
   </div>

8. Yang terakhir klik Save Template.

Kemudian klik Page Element. Jika berhasil maka pada bagian footer hasilnya akan menjadi seperti gambar dibawah ini :

 

Footer dengan 2 kolom

Footer dengan 3 kolom

Footer dengan 4 kolom

Ok... semoga bermanfaat ya sob....
Good luck....
Wassalamu'alaikum....