Cara Membuat 2 dan 3 Kolom Footer di Blogger

Cara Membuat 2 dan 3 Kolom Footer di Blogger

Oke sob,di kesempatan kali ini saya akan membahas berbagai macam informasi mengenai blogging yang menjadi dasar para anak it untuk pembelajaran membuat web,namun juga ada banyak para blogger blogger yang berpenghasilan dengan jaringan pengiklanan lewat platform blogger, seperti adsense yang menjadi persoalan sekarang ini,dan banyak sekali komunitas komunitas group mengembangkan pembelajaran blogging ini dan sekarang saya ingin sekali berbagi ilmu yang akau dapatkan dengan belajar blogging yang membahas cara membuat 2 kolom footer di blog.



Langsung saja simak dibawah ini langkah demi langkah buat kolom footer untuk membangun template blog menjadi keren.

Cara Membuat Kolom di Template Blog

Untuk cara membuatnya silahkan ikuti langkah-langkah sebagai berikut:

1.Buka dan Login ke blogger

2. Pilih Tema > Edit HTML.

3. Jika sudah, Cari kode ]]></b:skin> (Gunakan CTRL + F untuk lebih mudah pencarian).

4. Kemudian tambahkan semua kode di bawah ini diatas atau sebelum kode  ]]></b:skin>


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


5. Jika sudah kemudian cari salah satu kode berikut, (Gunakan CTRL + F kembali untuk pencarian). Cari salah satu kode saja.



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

atau


<div id='footer'>


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



6. Jika ketemu kodenya, tambahkan kode dibawah atau sesudah kode <b:section class='footer' id='footer' showaddelement='yes'/> atau <b:section class='footer' id='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>




7. Jika sudah Klik Preview atau Pratinjau,jika tidak muncul eror silahkan simpan tema .

Dan sesuai banyaknya permasalahan yang nantinya juga masalah akan menjadi sebuah ke indahan jika mengubah dan membenahinya dengan benar juga teliti.

Berikut ini saya akan memberikan juga cara membuat Footer 3 Kolom di tema Blogger.

Kita langsung saja ya sob, silahkan ikuti langkah-langkahnya berikut ini:

1. Seperti biasa Login ke blogger.

2. Klik Template > Edit HTML.

3. Cari code ]]></b:skin> gunakan Ctrl+f untuk memper cepat pencarian.

4. Copy paste kode di bawah ini kemudian letakkan di atas kode  ]]></b:skin>



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


5. Selanjutnya cari code <div id='footer'> atau id='footer'.

6. Lalu copy lagi code di bawah ini letakkan tepat di bawah code <div id='footer'> atau id='footer' tadi.





<div id='footer-column-container'>
    <div id='footer2' style='width: 30%; float: left;
    margin:0; text-align: left;'>
    <b:section class='footer-column' id='col1'
    preferred='yes' style='float:left;'/>
    </div>
    <div id='footer3' style='width: 40%; float: left;
    margin:0; text-align: left;'>
    <b:section class='footer-column' id='col2'
    preferred='yes' style='float:left;'/>
    </div>
    <div id='footer4' style='width: 30%; float: right;
    margin:0; text-align: left;'>
    <b:section class='footer-column' id='col3'
    preferred='yes' style='float:right;'/>
    </div>
    <div style='clear:both;'/>
    <p>
    <hr align='center' color='#ffae00' width='90%'/></p>
    <div id='footer-bottom' style='text-align: center; padding:
    10px; text-transform: lowercase;'>
    <b:section class='footer' id='col-bottom' preferred='yes'>
    <b:widget id='Text2' locked='false' title='' type='Text'/>
    </b:section>
    </div>
    <div style='clear:both;'/>
    </div>



7. Jika sudah selesai simpan dan lihat hasilnya.

Bagaimana ? emang agak rumit sebenarnya,jika lama dan lama melihat sebuah kode kode web maupun basis html css dasar akan membuat anda menjadi paham tentang isi isi di dalamnya.


Cukup sampai disini cara membuat kolom template blogger dengan cara saya semoga pembaca bisa lebih paham dan menikmati hasilnya .selamat mencoba semoga berhasil.
Advertisement

Baca juga:

Buka Komentar
Blogger
Disqus
Pilih Sistem Komentar

No comments