Membuat 2 kolom footer keren dan elegan

Baik sobat gaptek32 , kali ini saya akan nge share cara membuat dua kolom footer nikmat dilihatnya. untuk screenshoot gambar tersebut dapat sobat lihat seperti dibawah ini


Membuat 2 kolom footer keren dan elegan


Nah pada tutorial kali ini memang bertujuan untuk pengeditan pada template bawaan blog yang memang secara default sedikit lebih rumit dibanding dengan mengedit hasil mendownload template. nggak percaya?!, coba aja sobat bandingkan.

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-vCJ94VMy_i_r5iE44CnvMUU05yZiQpxghYGu0vw2DHntF1p0g4_UOgffX4PulJhirZTccptIYmY2Q6bz0Cta_1jRIhNCWe3EooJAKv8jU-c-bFtfgR0COKqDcyCdRn0QHF_tfg6T5eA/s0/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;}

  •  Dilanjutkan dengan mencari kode <footer>
  • jika sudah ketemu gantikan semua kode dari <footer> hingga </footer> dengan kode dibawah ini
    <!-- awal kolomfootergaptek32 -->
<div id='gaptek32'>
<div id='gaptek32-wrapper'>
<div class='gapteks32'>
    <div class='gaptek32 h2'>
    <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'/>
        <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 -->
      </div>
    </div>
</div>
    </div>
    <div class='footer-cap-bottom cap-bottom'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>
    </div>
</div>
    <!-- end gaptek32footerkolom-->

  • Revew
  • jika berhasil silahkan sobat save

Terkait dengan ini

3 komentar:

  1. Terimakasih gan atas segala informasi dan tutorialnya, izin untuk cobain yah.

    BalasHapus
  2. bagus gan postingannya salam kenal ya http://idegemilang.blogspot.com/

    BalasHapus
  3. terima kasih kk atas informasinya, salam kenal http://memolodys.blogspot.com/2013/08/cara-booting-shutdown-komputer-cepat.html

    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