Tutorial dibawah ini merupakan kelanjutan dari Tutorial Membuat Template Blogspot Tahap 5 jika belum mengikuti bagian 1 yaitu Bagian Dasar Template silahkan masuk ke Tahap 5.
Footer Wrapper
Element footer / kaki-kaki ini terletak dibagian paling bawah mungkin sudah pada tau didengar dari namanya saja Footer pasti dibawah. Element ini biasanya menyimpan sebuah catatan atau informasi yang berupa tautan penting seperti tentang Hak Cipta / Copyright dan informasi sejenisnya, akan tetapi tidak mutlak harus seperti itu kita bisa menempatkan link atau info apa saja di bagian footer ini.
Pada pembuatan template ini memiliki lebar Outer Wrapper 960px berarti kita juga harus memberi lebar Footer sebesar 960px jangan kurang ataupun lebih, karena jika lebih akan nampak tak rapi dan jelek pastinya dan jika kurang pasti tampilannya juga akan lebih jelek lagi karena tidak ada keserasian.
Oke kita lanjutkan menerapkan kode untuk footer wrappernya :
1. Buka Edit HTML template yang telah dibuat
2. Cari dan hapus kode CSS dibawah ini :
/* Awal kode css untuk footer wrapper3. Kemudian ganti dengan kode CSS berikut :
======================================================== */
#footer {
}
/* AWAL KODE UNTUK FOOTER4. Tuju bagian bawah dan cari hapus kode HTML dibawah ini :
======================================================== */
#footer {
margin-top:15px;
margin-bottom:5px;
width:960px;
height:50px;
background:#CCC;
padding-top:25px;
}
.hakcipta{
text-align:center;
font-size:11px;
}
<div id='footer'>5. Kemudian ganti dengan kode berikut :
<!-- Ini untuk Wadah isi dari footer -->
</div>
<div id='footer'>6. Sekarang Simpan template
<!-- Ini untuk Wadah isi dari footer -->
<div class='hakcipta'>
(c) Hak Cipta 2017 <data:blog.title/><br/>
Original Template oleh : <a href='http://namablogkamu.blogspot.com/'>Nama Blog</a> | Desiain ulang oleh : <a expr:href='data:blog.homepageUrl'><data:blog.title/></a> | Didukung Oleh : <a href='http://blogger.com/'>Blogger</a>
</div>
</div>
7. Silahkan Lihat hasilnya
Keterangan :
- Width:960px : Lebar footer
- Height:50px : tinggi footer 50px kamu bisa mencoba merubah dengan menambah atau mengurangi angka 50px
- background:#CCC; : memiliki warna latar silver / abu-abu, bisa dirubah menjadi warna hitam dengan kode #000 atau yang lainnya juga bisa.
- text-align:center; Posisi Teks cenderung ketengah
- font-size:11px; ukuran huruf sebesar 11px bisa dirubah angkanya untuk memperbesar / memperkecil tulisan.
- <data:blog.title/> : kode ini akan memanggil dan menampilkan judul blog
- expr:href='data:blog.homepageUrl' kode ini akan memanggil URL halaman utama blog.
Sampai disitu langkah membuat template blogger sederhana sudah selesai dan sekarang tinggal memodifikasinya sedemikian rupa agar sesuai dengan selera, mungkin template tersebut masih perlu dioptimalkan agar template bisa bekerja dengan bagus dan maksimal.
Saya juga masih akan meneruskan artikel ini sampai tahap Optimasi dan juga Modifikasi bagi yang tertearik mengikuti tutorial ini silahkan bisa berlangganan melalui email kamu dengan mendaftar dibagian samping.
