Membuat 2 kolom footer keren dan elegan

Baik sobat blogsmanado , 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>
#blogsmanado { margin:auto; padding: 10px 0px 0px 0px; width: 100%; border-top:1px dotted;}
#blogsmanado-wrapper { margin:auto;width: 970px; border:0; }
.blogsmanado .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;}

  •  Dilanjutkan dengan mencari kode <footer>
  • jika sudah ketemu gantikan semua kode dari <footer> hingga </footer> dengan kode dibawah ini
    <!-- awal kolomfooterblogsmanado -->
<div id='blogsmanado'>
<div id='blogsmanado-wrapper'>
<div class='blogsmanado'>
    <div class='blogsmanado 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

blogs



Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA DI SINI...</i> atau <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>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Convert kode terlebih dahulu bila komentar anda mengandung kode HTML/JScript pada tombol di bawah ini
Parse HTML
:) :( =( :waaa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :yaya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ \m/ **p &amp;lt;3 0:) ^o^ :-a 7:O *fck* xV x@ X@ ~x( &amp;lt;:) &amp;lt;=) (-.-,) *=p =p* ''J :W :bye: :imhere: :cendol: :rolled: *bang* :drummer: :guitarist: :vocalist:

No comments:
Write komentar