Tutorial Blog dan Tips AdSense

Dijual rumah di Jakarta Timur, selengkapnya klik di sini

Cara Membuat Widget Footer Pada Blogger

Footer- Tips Blogger kali ini berkaitan dengan Footer. Seperti yang anda tahu Footer biasanya untuk memasang tempat satu lagi di bawah tepat di paling bawah halaman blog, contohnya seperti gambar di atas ini. Biasanya ada footer pada template bawaan dan ada yang tidak, perbedaan itu membuat yang tidak mempunyai footer menjadi iri, karena itu saya membuat artikel ini.

Cara ini bisa dianggap mudah bagi blogger yang berpengalaman, dan bisa sulit untuk yang belum perpengalaman, karena cara kali ini memakai kode HTML, saya akan memakai petunjuk gambar dan tulisan secara jelas.

Ikuti Langkah-langkah di bawah ini:

1. Masuk ke Dasbor
2. Pilih blog yang ingin dipasang footer
3. Pilih Template
4. Klik Edit HTML
5. Klik Expand Template Widget
6. Copy kode berikut dan letakan tepat di atas ]]></b:skin>
#footer-column-divide {
clear:both;
}
.footer-column {
padding: 10px;
}
7. Selanjutnya cari kode <div id='footer-wrapper'> atau kode <div class='footer-outer'>
(jika tidak ketemu fokuskan pada kata footer di paling bawah kode HTML)

8.Pilih salah satu kode berikut lalu Letakan kode berikut di bawah kode <div id='footer-wrapper'> atau kode <div class='footer-outer'>

Script untuk menambah 2 kolom add gadget:
<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>
Script untuk menambah 3 kolom add gadget:
<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>
Script untuk menambah 4 kolom Add Gadget:
<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>
7. Klik Simpan Template

Hasilnya pada tata letak akan seperti ini.

Pada Blog Hasilnya akan seperti ini.
Bagus Bukan?

Bagi yang ingin bertanya silahkan tanyakan di kotak komentar di bawah artikel ini.

 
Keyword:
cara cepat bikin blog

template blog baru

tutorial membuat template

cara membuat template pada blog

cara membuat gadget pada blog

html blog templates

cara menambahkan template pada blog

menambah widget pada blog

cara membuat teks
Footer
Pada Blogger

Tag : Tips Blogger
26 Komentar untuk "Cara Membuat Widget Footer Pada Blogger"

wah makasih banyak gan...

blog ane Supercoolzz Blog udah berhasil :)

ane follow ya gan? Follow punya ane juga jangan lupa..

makasih bahasannya, cukup bermanfaat.

makasih infonya sob, ijin follow and copas ya

boos bagaimana untuk ganti warna tulisan'a punya ane background hitam, tulisan'a hitam juga nic...terima kasih

Kang bagaimana kalau dalam scrip blog itu tidak ada kode id='footer-wrapper'> atau kode class='footer-outer'>

trimakasih buwanyak Kang...

Kang bagaimana kalau dalam scrip blog itu tidak ada kode id='footer-wrapper'> atau kode class='footer-outer'>

trimakasih buwanyak Kang...

Kang bagaimana kalau dalam scrip blog itu tidak ada kode id='footer-wrapper'> atau kode class='footer-outer'>

trimakasih buwanyak Kang...

Kang bagaimana kalau dalam scrip blog itu tidak ada kode id='footer-wrapper'> atau kode class='footer-outer'>

trimakasih buwanyak Kang...

Kang bagaimana kalau dalam scrip blog itu tidak ada kode id='footer-wrapper'> atau kode class='footer-outer'>

trimakasih buwanyak Kang...

mantap mas, ngomong2 ada yg sampe 5 kolom gak mas ?

thk u sangan membantu sekali,, jangan mengunjungi blog ssaya :http://komangsuardika.blogspot.com/

kunjung balik ya gan...
anen-copas.blogspot.com

terima kasih kk informasinya salam kenal http://idegemilang.blogspot.com/

mantap bro langsung saya coba nih

makasih infonya gan.. bermanfaat.. kunjungan balik gan di blog ane Indra 97

terima kasih atasinfonya, sangat bmembantu

Terima Kasih Infonya Kunjungi ya denzfariz.blogspot.com

Nah ini yang aku cari, ada opsi beberapa kolom. thanks Gan

kalo kode div id='footer-wrapper'> atau kode div class='footer-outer'> tidak ada...?

mau nanya gan, kalau mau mengganti warna pada widget yang ditaruh gimana ya??, footer ane warna item, ketiban sama warna widgetnya pas dipasang..

diedit aja gan background cssnya

Saya minta agar anda tidak memakai akun Anonim untuk berkomentar, gunakan akun anonim hanya saat anda sedang dalam keadaan darurat, saya minta juga untuk tidak menggunakan kata-kata kasar dalam berkomentar. Terimakasih atas perhatiannya.