Tutorial dibawah ini merupakan kelanjutan dari Tutorial Membuat Template Blogspot Bagian 5 jika belum mengikuti bagian 1 yaitu Bagian Dasar Template silahkan masuk ke Bagian 5.
Footer WrapperElement 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 2012 <data:blog.title/><br/>
Original Template oleh : <a href='http://u-sup.blogspot.com/'>U-sup 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.
Dapatkan artikel terbaru seperti Membuat Template Blogspot Bagian 6 (Footer Wrapper) langsung ke Email kamu..!!!
bang tidak bisa di simpan pada bag. 6 keterangannya :
BalasHapusError parsing XML, line 341, column 5: The element type "div" must be terminated by the matching end-tag ""
gmn ni bang???
Dah aq perbaiki Mas brow,,, makasih infonya.......
HapusNek sing ngajari wong IT yo pasti akeh rodo mudhenge, hebat tenan kowe le...!!!, aku salut tenan, pokokmen pinter tenan.
BalasHapusmanteplah.....gitu lho
Wah pean berlebihan mas brow...hehehe....
Hapusora mas.. ancen gmpang mudeng nggone smpyn.. drpada tutorial2 laine..hehe
Hapusswun bgt kang..
Tutorial paling sistematis dan detail yang pernah ditemukan. Kalo nanti para blogger bisa buat template sendiri, Njenengan nggak takut kehilangan customer? wkwkkwkwk
BalasHapusIlmukan untuk dibagi jg buat apa takut....toh rejeki dah ada yg ngatur....hehehe...
HapusKomentar ini telah dihapus oleh pengarang.
BalasHapusgan mohon izin ane share disini, mohon reviewnya mdh2n bermanfa'at. thx.
HapusMantep iki Tutoriale, Tak Try Dlu yu Bang U-sup. Thanks Tutornya
BalasHapuswah.. thanks.. cpt bgt juga updatenya..
BalasHapusMakasih untuk tutorial nya... Jadii pengen nyoba buat template sendiri
BalasHapusBtw, tunggu tahap Optimasi dan juga Modifikasi nya ya....
Bang, saat aku ke alamat ini http://u-sup.blogspot.com/p/daftar-client.html muncul alamat link yang cukup mengganggu. Letaknya di bawah banner kanan atas. Kalo element HTML nya di div class="post-header"> di bawah div id="blog1" juga. Mohon di lihat ya. Penasaran nih.
BalasHapusO itu lupa nyembunyiin link....hehe trims pemberitahuannya....
Hapusmodif nya gimana?
HapusKomentar ini telah dihapus oleh pengarang.
BalasHapusMas Usup, caranya nambah like facebook, share twitter, dll gimana ? kalo nggak ada kode yg data:post:body nya, terimakasih banyak mas sebelumnya. maaf merepotkan. buat blog yg ini mas http://mas-adhie.web.id
BalasHapusdata:post.body pasti ada semua utuk template blogger... jangan lupa untuk ceklist pada expand widget template
HapusBang, template.na udah ai kembangin neh.. but, tulisan beranda n' posting lamanya kok ngilang yak.. Cara benerinnya gimana tuh bang..
BalasHapusMohon bantuan n' reviewnya ya bang..
onaldshare[dot]blogspot[dot]com (gak boleh nyepam):D thx
Sbenernya msh ada itu cm tergeser element lain saja, cari sj dibagian bawah kode komentar...ssah dijelasin ne,.... coba ganti pake Halaman navigasi dengan angka saja.
HapusSudah lama aku mencari artikel ini. makasih gan. sukses buat mas u-sup. :D
BalasHapuskalau tidak keberatan tolong ajarin buat template yang lengkap pakek Dreamweaver CS5.
hehehe
Thank,s
om judul blog ane kok ga muncul ya,,
BalasHapuscara baikinnya itu gmana
Wah,...agak ribet juga ya!!!
BalasHapusMampir tempatku dong...!!!
sangat ribet tapi di coba lah :D mampir gan Copast Master Web Indonesia
BalasHapuswow,lengkap abis tutorial,tambah tutorial yang lain gan, site map dll di page baru blogspot masih nibu ane...
BalasHapusmas.. ko headernya punya sya gk mncul..hehe
BalasHapusTrimakasih Atas ilmu yang berbagi
BalasHapusgk bisa di save template ya,,,,help me,,,
BalasHapusKesalahan saat mengurai XML, baris 2, kolom 10: The processing instruction target matching "[xX][mM][lL]" is not allowed.
Erornya pada langkah apa bro? langkah ini atau yg mana? nnti biar aq perbaiki.
HapusMakasih Gan, mudah dimengerti :)
BalasHapusMas, semuanya udah bisa tapi kok di tata letaknya Headernya nggak nongol mas, mohon pencerahannya, suwun
BalasHapusTrims ilmunya, permisi copas, aku pemula ilmunya jauh dari anda ^_^
BalasHapus