Membuat 3 kolom footer keren dan elegan

Pada postingan sebelumnya blogsmanado pernah memposting dengan judul Membuat 2 kolom footer keren dan elegan, Nah kali ini blogsmanado 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...

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;}
.blogsmanado 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 kolomfooterblogsmanado -->
<div id='blogsmanado'>
<div id='blogsmanado-wrapper'>
<div class='blogsmanado'>
    <div class='blogsmanado 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 blogsmanadofooterkolom-->

• Preview
• lalu save