Cara Membuat Footer 3 Kolom Di Blog

 Cara Membuat Footer 3 Kolom Di Blog - Salam jumpa lagi dengan blog KUCOPAS ya sobat, Kali ini saya akan memberikan tutorial blog gratis dalam hal yang masih berhubungan dengan footer. Mari kita kupas habis cara-caranya membuat dan memasang footer di blog.

 Pada artikel posting sebelumnya saya sudah pernah menjelaskan tentang cara membuat dan memasang footer multi kolom dan juga footer 2 kolom di blog, Silahkan sobat bisa lihat artikelnya. Karena cara membuat dan memasang footer 3 kolom di blog tidak jauh berbeda dengan artikel yang sudah pernah saya terangkan sebelumnya, Yang berbeda hanyalah kode yang terakhir yang akan di tambahkan dalam edit html template blog sobat.

 Bagi sobat yang masih penasaran dengan footer 3 kolom yang akan kita buat nanti, Di bawah ini saya tunjukkan gambar screenshot footer 3 kolom pada dasboard tata letak blog.

 Oke sekarang kita langsung menuju ke tutorialnya cara memasang footer 3 kolom di blog, Silahkan sobat ikuti langkah-langkahnya dan jangan sampai ada yang terlewatkan sebagai berikut:

1. Langkah yang pertama, Silahkan sobat >> Masuk atau Login ke Blogger.com menggunakan akun sobat.
2. Setelah masuk, Silahkan sobat pilih blog yang akan di pasangi footer 3 kolom.
3. Pada Dashboard blog pilih menu >> Template, Kemudian >> Unduh template lengkap.
4. Jika sudah, Silahkan sobat klik >> Edit HTML >> Lanjutkan >> Centang "Expand Template Widget".
5. Kemudian cari kode ]]></b:skin> (Gunakan CTRL + F untuk mempercepat pencarian).
6. Setelah ketemu, Langkah yang selanjutnya silahkan sobat tambahkan semua kode berikut diatas atau sebelum kode ]]></b:skin>

---

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

---

7. Langkah yang ke tujuh, Masih dalam Edit HTML. Silahkan sobat cari kode berikut di bawah ini. (Gunakan CTRL + F kembali untuk memudahkan 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>

---

8. Jika sudah ketemu, Untuk membuat footer 3 kolom di blog, Sobat wajib dan harus menambahkan kode berikut 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: 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>

---

*Catatan:
Jika pada template blog yang sobat gunakan tidak ada kode <b:section class='footer' id='footer' showaddelement='yes'/> Maka tambahkan saja kode-nya dibawah atau sesudah kode <div id='footer'>

9. Sebelum sobat klik Simpan, Sebaiknya klik dulu Preview atau pratinjau. Jika tidak terjadi eror pada blog sobat saat edit html template, Silahkan sobat klik Simpan template.

10. Selesai dan lihat hasilnya pada Dashboard Tata letak blog sobat. Jika sudah jadi seperti yang ada pada contoh gambar screenshot diatas, Itu artinya sobat sudah berhasil Membuat Dan Memasang Footer 3 Kolom Di Blog sobat.

 Jika ada pertanyaan yang berhubungan dengan tutorial ini, Sobat jangan ragu untuk bertanya melalui form komentar yang tersedia. Semoga bermanfaat bagi sobat KUCOPAS semuanya, Selamat berkarya.

---

| Source By www.maskolis.com | Supported by http://kuc0pas.blogspot.com |

---

Cara Membuat Footer 2 Kolom Di Blog

 Cara Membuat Footer 2 Kolom Di Blog - Footer adalah kolom widget yang biasa berada paling bawah di bagian blog, dan tentunya sobat bisa mengisinya dengan berbagai widget yang sobat inginkan. Kali ini saya akan memberikan tutorial bagaimana caranya membuat dan memasang footer 2 (dua) kolom diblog dengan fungsi bisa langsung tambah gadget atau Add Gadget tanpa harus susah-susah membuat atau menambah kolom lagi. Karena sobat bisa langsung tambah gadget di atas atau di bawah kolom widget yang sobat inginkan.

 Untuk lebih jelasnya sobat bisa melihat contoh gambar screenshot berikut di bawah ini.

 Keterangan dari gambar di atas adalah tampilan yang terlihat pada bagian tata letak blog yang sudah di pasangi footer 2 (dua) kolom. Lihat gambar yang sudah saya kasih lingkaran warna merah. Jadi sangat gampang untuk tambah gadget, Karena sobat hanya tinggal klik tambah gadget atau add gadget saja bila ingin mengisinya dengan widget blog yang sobat inginkan.

 Untuk cara membuat dan memasang footer 2 (dua) kolom di blog, caranya sangat mudah. Silahkan sobat ikuti langkah-langkahnya sebagai berikut:

1. Silahkan sobat >> Login atau Masuk ke blogger.com menggunakan akun sobat.
2. Pilih blog, Lalu pada Dashboard pilih menu Template.
3. Sebelum sobat klik Edit HTML, Ada baiknya sobat Unduh template lengkap, Guna untuk berjaga-jaga jika ada kesalahan saat Edit HTML dan sobat bisa mengembalikan template seperti semula. Caranya klik >> Cadangkan / Pulihkan (Tombol berada di bagian kanan atas)>> Unduh template lengkap. Jika sudah di unduh, silahkan klik tutup atau close.
4. Sekarang kita kebagian Edit HTML. Silahkan sobat klik >> Edit HTML >> Lanjutkan >> Centang "Expand Template Widget".
5. Jika sudah, Silahkan sobat cari kode ]]></b:skin> (Gunakan CTRL + F untuk mempermudah pencarian).
6. Kemudian tambahkan semua kode berikut diatas atau sebelum kode ]]></b:skin>

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

7. Langkah yang selanjutnya, Sobat cari kode berikut di bawah ini. (Gunakan CTRL + F kembali untuk mempercepat 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>

8. Jika sudah ketemu, Kemudian sobat tambahkan kode berikut 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>

Catatan:
Jika pada template yang sobat gunakan tidak ada kode <b:section class='footer' id='footer' showaddelement='yes'/> maka tambahkan saja kode-nya dibawah atau sesudah kode <div id='footer'>


9. Sebelum sobat klik Simpan, Ada baiknya klik dulu Preview atau pratinjau. Jika tidak terjadi eror pada template blog sobat, Langkah yang terakhir silahkan sobat klik Simpan template.

10. Selesai dan lihat hasilnya pada Dashboard Tata letak blog sobat. Jika sudah seperti yang ada pada contoh gambar screenshot diatas, Berarti sobat sudah berhasil Membuat Dan Memasang Footer 2 (Dua) Kolom Di Blog sobat.

 Jika ada pertanyaan mengenai tutorial ini, Sobat jangan sungkan-sungkan untuk bertanya melalui form komentar yang tersedia. Semoga bermanfaat bagi sobat KUCOPAS semuanya, Selamat berkarya.

---

| Source By www.maskolis.com | Supported by http://kuc0pas.blogspot.com |

---

Cara Membuat Footer Multi Kolom di Blog

 Cara Membuat Footer Multi Kolom Di Blog - Footer Multi kolom yang akan saya jelaskan disini maksudnya adalah footer yang bisa di buat menjadi 2 kolom, 3 kolom atau 4 kolom. Tergantung dari kebutuhan dan keinginan sobat untuk membuat dan memasangnya di blog sobat.

 Fungsi dari menambah atau membuat footer multi kolom ini adalah untuk sobat yang ingin memperbanyak ruang kolom atau tambah gadget pada bagian footer template blog sobat. Karena mungkin sobat memerlukan bayak ruang widget untuk blog sobat. Biasanya di gunakan untuk blog magazine atau yang lainya.

 Untuk cara membuat dan memasang footer multi kolom di blog ini caranya terbilang sangat mudah, Apalagi bagi sobat yang sudah mahir untuk edit html dalam template blog. Namun bagi sobat yang masih newbie kayak saya ini, Jangan berkecil hati. Karena saya akan memandu sobat sampai berhasil menerapkan footer multi kolom ini di blog sobat kucopas semua.

 Langsung saja kita mulai ya sobat, Ikuti saja langkah-langkahnya dengan teliti dan jangan sampai ada yang terlewatkan. Cara membuat footer multi kolom di blog, Caranya sebagai berikut:

1. Silahkan sobat >> "Login atau Masuk" ke >> Blogger.com menggunakan akun sobat.

2. Pada "Dashboard" tampilan blogger baru, Pilih dan klik menu >> "Template"

3. "Back up" template sobat dengan klik pada >> Cadangkan/Pulihkan >> "Unduh Template lengkap" agar sobat bisa mengembalikan template sobat ke kondisi semula jika terjadi kesalahan saat edit html template blog atau hasilnya tidak memuaskan seperti yang sobat inginkan.

4. Langkah yang selanjutnya klik >> "Edit HTML" >> Lanjutkan.

5. Jika sudah, jangan lupa sobat Centang "Expand Template Widget".

6. Kemudian sobat cari kode ]]></b:skin> (Gunakan CTRL+F untuk mempermudah pencarian).

7. Langkah yang ke tujuh, Silahkan sobat tambahkan atau taruh kode berikut ini di atas atau sebelum kode ]]></b:skin>

#footer-column-divide {

clear:both;

}

.footer-column {

padding: 10px;

}

8. Jika sudah, Sobat cari kode berikut dibawah ini. (Gunakan CTRL+F kembali untuk mempercepat pencarian).

<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>

9. Silahkan sobat tambahkan atau taruh kode berikut, dibawah atau sesudah kode <b:section class='footer' id='footer'showaddelement='yes'/> atau <b:section class='footer' id='footer' />

Keterangan:

Jika sobat tidak menemukan kode <b:section class='footer' id='footer'showaddelement='yes'/> maka Sobat tambahkan atau taruh saja kode berikut setelah atau dibawah kode <div id='footer'>

Jika sobat ingin membuat footer 2 kolom di blog. Silahkan sobat gunakan kode berikut:

<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>

Jika sobat ingin membuat footer 3 kolom di blog. Silahkan sobat gunakan kode berikut:

<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>

Jika sobat ingin membuat footer 4 kolom di blog. Silahkan sobat gunakan kode berikut:

<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>

10. Kalau sudah, silahkan sobat klik >> "Pratinjau" atau "Preview", Guna untuk menghindari kesalahan saat Edit Template blog sobat.

11. Jika hasilnya sudah bagus seperti yang sobat inginkan dan Edit Template tidak eror, Silahkan sobat klik >> "Save Template" atau "Simpan Template", Lalu klik >> "Page Element" atau "Tata Letak" untuk melihat hasilnya.

Jika sobat sudah berhasil membuat footer multi kolom di blog, Maka hasilnya akan menjadi seperti gambar screenshot di bawah ini.

Contoh Footer 2 Kolom

Contoh Footer 3 Kolom

Contoh Footer 4 Kolom

 Demikian tutorial blog tentang Cara Membuat Footer Multi Kolom Di Blog, Semoga bermanfaat untuk sobat KUCOPAS semua. Selamat berkarya...

---

| Source by www.maskolis.com | Supported by http://kuc0pas.blogspot.com |

---