Cara Paling Mudah Membuat Footer 3 Kolom

Cara membuat footer 3 kolom -  Jika sebelumnya KS sudah membahas mengenai bagaimana cara menghilangkan navbar di blog kali ini KS akan mengulas tentang bagaimana membuat footer menjadi 3 kolom. Pembuatan footer menjadi 3 kolom ini dapat dimanfaatkan oleh sobat blogger untuk menempatkan lebih banyak widget daripada footer yang hanya memiliki 1 kolom. Selain itu adanya 3 kolom elemen di bagian footer ini dapat menghemat ruang sehingga halaman blog lebih terlihat apik. Mau tahu gimana cara paling mudah buat nambah 3 kolom elemen di bagian footer? coba simak cara berikut, tapi sebelumnya lihat screenshootnya dulu ya :


  • Langkah pertama yang harus sobat blogger lakukan yaitu login ke akun blog sobat.
  • Kedua, Pada menu dropdown di dashboard blog sobat pilih Template
  • Ketiga, pilih edit HTML

  • Keempat, pilih Proceed
  • Kelima, beri tanda centang di bagian Expand Widget Template
  • Keenam, cari kode ]]></b:skin>, untuk memudahkan pencarian gunakan kombinasi tombol Ctrl+F. Setelah ketemu copy kode dibawah ini dan letakkan di atas kode tersebut
#footer {width:950px;position:relative;clear:both;margin:15px auto;padding:5px 0 15px 0;text-align:left;color:#fff;background:#3b3b3b;-moz-border-radius-bottomleft:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-left-radius:10px;-webkit-border-bottom-right-radius:10px;}
#credits-footer {width:900px;float:center;margin:0 auto;padding:0px;clear:both;line-height:1.3em;letter-spacing:.0em;border-top:2px solid #fff;overflow:hidden;clear:both;padding:10px 0px 0px 0px;line-height: 1.6em;text-align:center;font-family: Verdana;font-size:13px;color:#fff;font-weight:bold;}
#footer a:link {color:#fff;text-decoration:none;}
#footer a:visited {color:#fff;text-decoration:none;}
#footer a:hover {color:#fff;text-decoration:underline;}
#footer h6 {color:#fff;font-family:Verdana;font-size:12px;font-weight:normal;line-height:1em;text-transform:uppercase;margin-top:20px;margin-right:10px;padding:0 0 5px;color:#fff;border-bottom:2px solid #fff;}
#footer ul {padding:0; margin:0; color:#fff;}
#footer ul li {list-style-type:square;padding-left:2px; margin:3px 0 0 22px;}
#footer-left {width:290px; float:left; margin-left:20px;margin-bottom:20px;}
#footer-center {width:300px; float:left; margin-left:20px;margin-bottom:20px;}
#footer-right {width:290px; float:left; padding:0 5px 0 20px;margin-bottom:20px;}

  • Ketujuh, cari kode </body> dan letakkan kode berikut diatasnya
<div id='footer'>
<b:section class='footer' id='footer-left' preferred='yes' showaddelement='yes'/>
<b:section class='footer' id='footer-center' preferred='yes' showaddelement='yes' style='text-decoration:none;'/>
<b:section class='footer' id='footer-right' preferred='yes' showaddelement='yes'/>
<br/>
<div id='credits-footer'> Copyright &#169; | <a href='http://kancil-sharing.blogspot.com/'>Kancil-Sharing</a> | All Rights Reserved
</div>
</div>

  • Kedelapan, lakukan Preview terlebih dahulu untuk melihat posisi dan letak footer, sudah cocok belum dengan keinginan sobat. Jika belum lakukan beberapa kustomisasi.
Note :
merah : untuk menyesuaikan lebar footer
Ungu : untuk mengganti warna background footer
  • Kesembilan, jika sudah merasa pas dengan hasil yang didapat, silahkan Save template sobat.

O iya sobat sebelum mengutak-atik template alangkah baiknya kalo sobat membackup terlebih dahulu template tersebut agar kalo ada kesalahan dalam pengeditan template, sobat mudah mengembalikannya yaitu dengan merestore template tersebut. Udah dulu deh post hari ini, semoga bermanfaat, see you on my next post!!!. ^^

Tidak ada komentar:

Diberdayakan oleh Blogger.