Cara Baru Untuk Menambahkan 1,2,3, dan 4 Kolom Diatas Footer

Cara Baru Untuk Menambahkan 1,2,3, dan 4 Kolom Diatas Footer

Ketemu lagi dengan Chylma, kali ini saya akan berbagi sedikit tutorial Blog mengenai Cara Baru Untuk Menambahkan 1,2,3, dan 4 Kolom Diatas Footer , sebenarnya sih postingan ini harus terbagi, tapi nggak apa-apa kalau langsung digaungin semuanya biar lebih asyik. Tentunya bagi para pecinta Blog, hal ini akan sangat membantu, sebab dengan adanya tambahan elemen baru pada template Blog kita, memungkinkan bagi Blogger untuk Mengatur dan menempatkan banyak Aplikasi atau widget Maupun tampilan-tampilan keren untuk mempercantik blognya, dan tentunya Untuk Postingan, dan pesan-pesan khusus, serta untuk iklan-iklan tertentu pada Blognya. Ok sodara berikut Tutorialnya, langsung di praktekan kalau bisa dan ada kesempatan. 


Berikut Langkah-Langkahnya :

1. Pertama masuk kea kun blog sodara

2. Selalunya akan masuk ke Dasbor Blog sodara, Kemudian sodara Klik Template, lalu klik Edit HTML.

3. Klik edit Template, Letakan Kursor Pada Format HTML Blog yang berbentuk xml. Kemudian klik semua Tombol panah Hitam kecil yang sodara lihat pada Format HTML yang berbentuk xml tersebut, agar kode yang kita cari nantinya bisa ketemu dan terlihat.

4. Langkah inti, sodara Kemudian harus cari kode ]]></b:skin> Selanjutnya letakkan kode berikut diatasnya

#footer-column-divide {clear:both;}.footer-column {padding: 10px;}

5. Setelah itu sodara cari kode seperti dibawah ini

<div id='footer-wrapper'>

atau bisa juga cari kode seperti dibawah ini

<div id='footer'>

<b:section class='footer' id='footer' showaddelement='yes'/>

</div>

6. LKemudian sodara tinggal meletakkan kode berikut dibawah kode <b:section class='footer' id='footer' showaddelement='yes'/> atau <b:section class='footer' id='footer' />
 
Apabila sodara tidak menemukan atau tidak ada kode seperti berikut <b:section class='footer' id='footer' showaddelement='yes'/> dalam Format HTML Blog sodara, maka sodara langsung tambahkan aja kode berikut dibawah <div id='footer'>

Langkah Menambahkan 1 Kolom Diatas Footer 

<div id='footer-column-divide'>

<div id='footer1' style='width: 50%; float:left;

margin:0; text-align:left;'>

<b:section class='footer-column' id='col1'

preferred='yes' style='float:left;'/>

</div>

Langkah Menambahkan 2 Kolom Diatas Footer

<div id='footer-column-divide'>

<div id='footer1' style='width: 50%; float:left;

margin:0; text-align:left;'>

<b:section class='footer-column' id='col1'

preferred='yes' style='float:left;'/>

</div>

<div id='footer2' style='width: 50%; float: left;

margin:0; text-align: left;'>

<b:section class='footer-column' id='col2'

preferred='yes' style='float:left;'/>

</div>

<div style='clear:both;'/>

</div>


Langkah Menambahkan 3 Kolom Diatas Footer

<div id='footer-column-divide'>

<div id='footer1' style='width: 33%; float:left;

margin:0; text-align:left;'>

<b:section class='footer-column' id='col1'

preferred='yes' style='float:left;'/>

</div>

<div id='footer2' style='width: 33%; float: left;

margin:0; text-align: left;'>

<b:section class='footer-column' id='col2'

preferred='yes' style='float:left;'/>

</div>

<div id='footer3' style='width: 33%; float: right;

margin:0; text-align: left;'>

<b:section class='footer-column' id='col3'

preferred='yes' style='float:right;'/>

</div>

<div style='clear:both;'/>

</div>


 
Langkah Menambahkan 4 Kolom Diatas Footer

<div id='footer-column-divide'>

<div id='footer1' style='width: 25%; float:left;

margin:0; text-align:left;'>

<b:section class='footer-column' id='col1'

preferred='yes' style='float:left;'/>

</div>

<div id='footer2' style='width: 25%; float: left;

margin:0; text-align: left;'>

<b:section class='footer-column' id='col2'

preferred='yes' style='float:left;'/>

</div>

<div id='footer3' style='width: 25%; float: right;

margin:0; text-align: left;'>

<b:section class='footer-column' id='col3'

preferred='yes' style='float:right;'/>

</div>

<div id='footer4' style='width: 25%; float: right;

margin:0; text-align: left;'>

<b:section class='footer-column' id='col4'

preferred='yes' style='float:right;'/>

</div>

<div style='clear:both;'/>

</div>


Demikian Tutorial sedrhana ini, semoga bermanfaat. Sekian dan terimakasih, selamat mencoba dan,

Wassalam...