Sabtu, 09 Maret 2013

Cara Membuat 3 Kolom Di Atas Footer

Hallo, kali ini saya akan memberikan sedikit tuturial cara membuat 3 kolom di atas footer. Bagi yang sudah mempuni dalam hal mengedit-edit template pasti sudah paham betul soal ini. Tapi untuk yang belum paham ini dia singkat pengertianya.

Membuat 3 kolom di atas footer tak lain adalah membuat 3 element baru untuk menambah widget pada element biasanya.


Bagi yang mau memperindah blognya dengan menambahkan 3 kolom baru ini silahkan anda ikuti langkah-langkah di bawah ini.


  • Pertama masuk ke blogger dulu tentunya.

  • Kemudian masuk bagian Template > Edit HTML

  • Selanjutnya cari kode ]]></b:skin>, Dan copy serta letakan kode di bawah ini tepat di atasnya.


#widget-bawah {
width: 900px;background:#fff;
position: relative;display:inline;
clear:both;
margin:0 auto 0;
color:#000;
float: left;
padding:10px;
}
#bawah-kiri {
width: 270px;
float: left;display:inline;
margin:10px 5px 0 5px;
padding:5px
}
#bawah-tengah {
width: 280px;
float: left;
margin:10px 5px 0;
padding:5px
}
#bawah-kanan {
width: 270px;
float: left;display:inline;
margin:10px 5px 0;
padding:5px
}


  • Berikutnya cari kode <div id='footer'>, kemudian copy dan letakan kode di bawah ini tepat di astasnya.


<div id='widget-bawah'>
<b:section class='widget-bawah' id='bawah-kiri' preferred='yes' showaddelement='yes'>
</b:section>

<b:section class='widget-bawah' id='bawah-tengah' preferred='yes' showaddelement='yes'>
</b:section>

<b:section class='widget-bawah' id='bawah-kanan' preferred='yes' showaddelement='yes'>
</b:section>
</div>


  • Kemudian klik save template dan lihat hasilnya.


Perhatikan: Kalian bisa menyesuaikan backgroundnya dengan menganti warnanya #fff dan menyesuikan lebarnya dengan mengganti 900px dan 270px sesui dengan blog anda.

Semoga postingan saya kali ini dapat membantu walaupun sedikit dan juga bermanfaat dan di akhirkata saya ucapkan terima kasih.

Rating: 4.5 out of 5

0 komentar:

Posting Komentar

◄ Posting Baru Posting Lama ►
 

Copyright © 2012. Seo Pemula - All Rights Reserved Template IdTester by Blog Bamz