Artikel cara Membuat Gadget Footer Pada Layout Blog seperti ini, sudah banyak dipublish oleh para blogger, tulisan ini saya posting lagi untuk menjawab pertanyaan pengunjung blog yang menanyakan bagaimana cara menambahkan gadget footer pada blog.
Sebenarnya tutorial cara membuat gadget footer pada blog tidak ada yang baku, hal ini dikarenakan beragamnya template yang digunakan oleh para blogger, kalau ditanyakan apakah untuk membuat gadget footer ini harus mengedit kode HTML template, saya bisa jawab 'ya' bisa juga 'tidak' karena tergantung template yang digunakan. Jika menggunakan template bawaan blogger.com tentu tidak perlu untuk mengedit kode HTML template, tetapi jika Anda menggunakan 'template eksternal' yang di download dari situs penyedia template blogger, tentu harus mengedit kode HTML template untuk membuat gadget footer ini.
Supaya tidak terlalu berpanjang lebar, berikut ini cara membuat gadget footer pada blog
Untuk template bawaan blogger.com :
- Login ke blogger dengan ID Anda
- Jika sudah berhasil login klik link Nama Blog Anda >> Template >> Customize
- Selanjutnya klik menu Layout di sebelah kiri halaman dan silahkan pilih type gadget footer pada bagian Footer layout disesuaikan saja dengan kebutuhan Anda.
- Klik button Apply to blog tunggu beberapa saat sampai proses selesai lalu klik link << Back to blogger untuk kembali ke halaman dashboard Anda
Untuk template external :
- Login ke blogger dengan ID Anda
- Jika sudah berhasil login klik link Nama Blog Anda >> Template ~ sebelum melakukan perubahan atau update kode HTML template sebaiknya backup terlebih dahulu template Anda, lihat artikel Cara Backup dan Restore Template Blogger
- Selanjutnya klik Template >> Edit HTML >> Proceed
- Jangan lupa beri tanda mark ✔ (check/centang) pada kotak Expand Template Widget kemudian cari kode ]]></b:skin>
- Copy kode di bawah ini dan paste tepat diatas kode ]]></b:skin>
#footer-column-divide {
clear:both;
}
.footer-column {
padding: 10px;
}
- Selanjutnya cari kode <div id='footer-wrapper'> atau kode <div class='footer-outer'> kemungkinan akan berbeda untuk setiap template mengingat beragamnya template yang digunakan oleh para blogger, lalu pilih salah satu kode di bawah ini (sesuai kebutuhan), copy kode ini dan paste atau tempatkan di bawahnya (catatan : jika anda tidak menemukannya pusatkan saja perhatian pada kata footer)
- Script untuk menambahkan 2 kolom Add a 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 menambahkan 3 kolom Add a 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 menambahkan 4 kolom Add a 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>
- Untuk menyimpan perubahan klik button Save template
Periksa layout template anda seperti gambar di bawah ini, jika berhasil ucapkan Alhamdulillah... Sekarang Anda sudah dapat menambahkan gadget pada bagian footer blog Anda dan untuk menambahkannya lihat artikel Cara Menambahkan Gadget di Blog
0 komentar:
Posting Komentar