Membuat 3 kolom footer keren dan elegan

Pada postingan sebelumnya gaptek32 pernah memposting dengan judul Membuat 2 kolom footer keren dan elegan, Nah kali ini gaptek32 akan memposting  Membuat 3 kolom footer keren dan elegan. cara demi caranya sama semua ko. dan untuk screen shootnya sobat dapat lihat pada gambar dibawah ini

Membuat 3 kolom footer keren dan elegan


Langkah pertama
  • Log In Blog, Buka template -> Edit HTML -> Kasih tanda centang pada menu "expand widget tempate".
  • kemudian Copas CSS dibawah ini di atas kode script ]]></b:script>
#gaptek32 { margin:auto; padding: 10px 0px 0px 0px; width: 100%; border-top:1px dotted;}
#gaptek32-wrapper { margin:auto;width: 970px; border:0; }
.gapteks32 .widget {background: #FFF top no-repeat;float: left;width: 285px;margin: 0 0 10px;padding: 10px;border: 1px solid #DDD;}
.gaptek32 h2 {background:url(http://2.bp.blogspot.com/-CGKMwVqnLgw/T8-9rki6YNI/AAAAAAAACu0/RiDeSPzm-0g/s000/widgettitle-bg.png) left top repeat-x;margin:0 0 10px 0;padding:9px 0 9px 10px;color:#FFF;text-shadow:0px 1px 0px;#000;font-size:16px;line-height:16px;font-family:'Oswald',sans-serif;font-weight:normal;text-decoration:none;text-transform:uppercase;}
Nah yang beda script yang ini
  • Sobat lanjutkan dengan mencari kode <footer>
  • jika sudah ketemu gantikan semua kode dari <footer> hingga </footer> dengan kode dibawah ini

<!-- awal 3 kolomfootergaptek32 -->
<div id='gaptek32'>
<div id='gaptek32-wrapper'>
<div class='gapteks32'>
    <div class='gaptek32 h2'>
    <div class='footer-outer'>
    <div class='footer-cap-top cap-top'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>
    <div class='fauxborder-left footer-fauxborder-left'>
    <div class='fauxborder-right footer-fauxborder-right'/>
    <div class='region-inner footer-inner'>
      <macro:include id='footer-sections' name='sections'>
        <macro:param default='2' name='num' value='3'/>
        <macro:param default='footer' name='idPrefix'/>
        <macro:param default='foot' name='class'/>
        <macro:param default='false' name='includeBottom'/>
      </macro:include>
      <!-- outside of the include in order to lock Attribution widget -->
      <b:section class='foot' id='footer-3' showaddelement='no'/>
    </div>
    </div>
    <div class='footer-cap-bottom cap-bottom'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>
    </div></div>
    </div>
</div>
    </div>
    <!-- end gaptek32footerkolom-->
  • Preview
  • lalu save

Terkait dengan ini

17 komentar:

  1. mantap sob...
    kebetulan nyari footer buat blog gw akhirnya nemu juga deh..
    thanks yaw...

    BalasHapus
  2. Jos banget lah,,,
    Q seneng, yaqin, telah sekian lama mencari, tak satupun yang jadi, eh ternyata ada disini,,,
    makasih banget lah ya,,

    BalasHapus
  3. Balasan
    1. Trik ini hanya berlaku untuk template bawaan oleh blogger,. untuk template yang sekarang ini sobat gunakan, saya ada alternatif lain di postingan saya yang ini
      http://gaptek32.blogspot.com/2012/11/membuat-kolom-footer.html

      untuk menempatkan kode HTML nya coba di taruh di atas kode
      <div id='footer-bg'>

      atau bila ada yang ganjil dengan tampilannya, coba taruh dibawah kode
      <!-- end outer-wrapper -->

      note
      ini hasil ctr+u dari blog anda :D
      maaf yah :cendol:

      Hapus
    2. thx bgt yah gan..

      maaf ne kalo ngerepotin..

      kalau untuk itu mah, ga pa lagi..

      ijin buat nyoba tricknya ya :guitarist:

      Hapus
  4. nyari yang bersih gan , yang putih...

    BalasHapus
    Balasan
    1. Semua tutor mengenai halaman footer sebetulnya sama semua sob, baik itu footer kolom 1, 2, 3 bahkan sampai 5. yang terpenting kita tau dasar CSS, minimal CSS tentang background, margin, padding yang memang sering di utak-atik oleh mereka.

      Hapus
  5. nda berhasil min :(
    sy juga sudah coba yang di :
    http://gaptek32.blogspot.com/2012/11/membuat-kolom-footer.html

    tapi itu jadinya malah di bawah footer attribute, pengennya diatas attribute min, bisa bantuin ga ?

    BalasHapus
  6. mungkin maaksudnya ]]> bukan ]]>http://reader-download.googlecode.com/svn/trunk/images/emo/cool.gif

    BalasHapus
  7. mantab kk salam kenal http://idegemilang.blogspot.com/

    BalasHapus
  8. mantap bro langsung saya coba nih

    BalasHapus
  9. akhirnya bisa juga, makasih sob...

    BalasHapus

Saya mohon maaf atas ketidak terurusnya blog ini, dan saya pun tidak tahu kapan ada waktu luang agar blog ini dapat membalas kritik dan pertanyaan, apalagi untuk melanjutkan postingan saya yang sempat tertunda pada akhir-akhir ini.
Kemungkinan besar blog ini tidak akan aktif selama paling sebentar 2-3bulan karena saya (admin) sibuk mencari nafkah di dunia nyata.
Saya mohon maaf yang sebesar-besarnya karena tidak bertanggung jawab dalam hal yang seperti ini.

Untuk menyisipkan kode <i rel="pre">KODE ANDA YANG TELAH DI PARSE...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>

Link hidup akan terhapus secara otomatis
Convert kode terlebih dahulu bila komentar anda mengandung kode HTML/JScript pada tombol di bawah ini

Parse HTML