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

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

•