-->

Cara Membuat Footer pada Template Blog dari Awal

Oleh: : Minggu, Juni 26, 2016
Cara Membuat Footer pada Template Blog dari Awal


Setelah selesai Membuat Sidebar Blog, sekarang anda bisa lanjutkan untuk membuat bagian atau elemen footer pada template anda. Sebelumnya jangan lupa pahami juga Apa Itu Footer Blog, Fungsi dan Contohnya.

Jika sudah, sekarang mari kita lanjutkan. Prinsip dasar penambahan elemen footer ini sama juga dengan pembuatan elemen template lainnya. Anda tinggal sisipkan kodenya pada form Edit HTML template. Kode atau scriptnya adalah seperti ini:



<div id='footer-wrapper'>
<b:section class='footer' id='footer' showaddelement='yes'/>
</div>



Kemudian sisipkan semua script tersebut pada bagian paling bawah dari body template, tepatnya di atas kode </body>, sehingga bagan lengkapnya akan menjadi seperti ini:



<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<HTML>
<head>
<b:skin><![CDATA[]]></b:skin>
<style type='text/css'>
#header-wrapper{
background:#333;
height:120px;
width:1000px;
}
#header-inner{
padding-left:30px;
}
#header,.title2{
text-align:left
}
#header h1,.title2{
font-size:50px;
font-weight:500;
color:#fff;
margin:0;
padding:20px 10px 0 0;
}
#header a,.title2 a{
color:#f60;
text-decoration:none}
#header a:hover,.title2 a:hover{
color:#fff
}
#headerlogo{
float:right;
display:inline;
overflow:hidden;
}
#header .description{
color:#999;
font-size:10px;
letter-spacing:10px;
margin-top:-5px;
padding-bottom:50px
}
#outer-wrapper{
width:1000px;
margin:0 auto;
font-size:15px;
}
#content-wrapper{
width:1000px;
}
#sidebar-wrapper{
float: right;
background:#f1f1f1;
width: 350px;
height: 100%
}
.sidebar h2 {
padding: 10px;
font-size: 18px
}
.widget-content {
padding: 10px
}
#main {
float: left;
width: 600px;
padding: 20px;
border-left: 1px solid #ddd;
}
</style>
</head>
<body>
<div id='outer-wrapper'>
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='blogernas  (Header)' type='Header'>
</b:widget>
</b:section>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' showaddelement='yes'>
</b:section>
</div>
<div id='content-wrapper'>
<b:section class='main' id='main'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'></b:widget>
</b:section>
</div>
<div class='clear'/>
</div>
<div id='footer-wrapper'>
<b:section class='footer' id='footer' showaddelement='yes'/>
</div>
</body>
</HTML>



Selanjutnya untuk mengatur tampilannya,
maka tambahkan kode CSS berikut tepat diatas kode
</style>


#footer-wrapper {
background:#333;
width: 1000px;
height:100px;
margin:0 auto;
}


Sehingga total akhir kodenya akan menjadi seperti ini:


<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<HTML>
<head>
<b:skin><![CDATA[]]></b:skin>
<style type='text/css'>
#header-wrapper{
background:#333;
height:120px;
width:1000px;
}
#header-inner{
padding-left:30px;
}
#header,.title2{
text-align:left
}
#header h1,.title2{
font-size:50px;
font-weight:500;
color:#fff;
margin:0;
padding:20px 10px 0 0;
}
#header a,.title2 a{
color:#f60;
text-decoration:none}
#header a:hover,.title2 a:hover{
color:#fff
}
#headerlogo{
float:right;
display:inline;
overflow:hidden;
}
#header .description{
color:#999;
font-size:10px;
letter-spacing:10px;
margin-top:-5px;
padding-bottom:50px
}
#outer-wrapper{
width:1000px;
margin:0 auto;
font-size:15px;
}
#content-wrapper{
width:1000px;
}
#sidebar-wrapper{
float: right;
background:#f1f1f1;
width: 350px;
height: 100%
}
.sidebar h2 {
padding: 10px;
font-size: 18px
}
.widget-content {
padding: 10px
}
#main {
float: left;
width: 600px;
padding: 20px;
border-left: 1px solid #ddd;
}
#footer-wrapper {
background:#333;
width: 1000px;
height:100px;
margin:0 auto;
}
</style>
</head>
<body>
<div id='outer-wrapper'>
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='blogernas  (Header)' type='Header'>
</b:widget>
</b:section>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' showaddelement='yes'>
</b:section>
</div>
<div id='content-wrapper'>
<b:section class='main' id='main'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'></b:widget>
</b:section>
</div>
<div class='clear'/>
</div>
<div id='footer-wrapper'>
<b:section class='footer' id='footer' showaddelement='yes'/>
</div>
</body>
</HTML>


Jika sudah, jangan lupa klik tombol Simpan template seperti dibawah ini.


Cara Membuat Footer pada Template Blog dari Awal



Kemudian setelahnya, jangan lupa lihat dulu pada Tata Letak, apakah penambahan elemen footer ini sudah berhasil atau belum.


Cara Membuat Footer pada Template Blog dari Awal


Jika pada halaman Tata Letak sudah muncul elemen footer seperti gambar diatas, maka itu berarti proses penambahan elemen ini sudah berhasil.

Nah sampai disini maka beberapa elemen dasar yang merupakan kelengkapan utama sebuah template, selesai sudah anda lakukan. Selanjutnya anda tinggal mengatur tampilannya pada bagian CSS template, yaitu bagian kode yang fungsinya untuk menata perwajahan blog.
Klik ikon Facebook, Twitter, dan Email jika anda ingin membagikan tulisan luar biasa ini pada teman anda. Lalu klik ikon print jika anda ingin mencetak halaman ini. Dan klik tombol Subscribe untuk berlangganan gratis update terbaru via email

facebook Twitter WhatsApp email Print subscribe
12 komentar
avatar
Muhammad Arif Afandi 27 Juni 2017 pukul 11.05

Diatas apakah tidak ada elemen lainnya??

Balas
avatar
99result 20 Desember 2017 pukul 14.37

maaf yo mas,,
percuma saya lihat blog ini,, tapi script,nya tidak bisa di copas.
capek ngetik ulang.

Balas
avatar
Unknown 2 Maret 2018 pukul 15.46

hahahah mas mas, hello apakabar dengan indonesia kalau semua generasinya begini
pemilik blog ini ngajarin kita buat belajar bagaimana penulisan kode dalam pembuatan template
kalau kepengen engga capek nulis kode ya mending beli aja :v #lol

Balas
avatar
Erianto Anas Admin 2 Maret 2018 pukul 22.54

hahaha

Balas
avatar
Hakura 15 Mei 2018 pukul 15.58

makasih mas buat scriptnya... ditunggu untuk script blogger selanjutnya....

Balas
avatar
dude st 21 Mei 2019 pukul 21.52

ga bisa di copy woi

Balas
avatar
Admin 11 September 2019 pukul 06.27

Saya bisa copy paste lewat uc browser 😁

Balas
avatar
Agus Susanto (Abu Asiyah) 27 Februari 2020 pukul 23.52

makasih ilmunya... Jazakallah khair!

Balas
avatar
Erianto Anas Admin 2 Maret 2020 pukul 22.00

Sama-sama

Balas
avatar
Pjg liar 27 April 2020 pukul 14.27

mas kode yg berfungsi untuk menata wajah blog apa mass....

Balas
avatar
Pjg liar 27 April 2020 pukul 14.30

dan cara membuat menu pilihan seperti (home,daftar isi,kontak,news) kodenya seperti apa

Balas
avatar
Unknown 19 Oktober 2020 pukul 09.42

Bagaimana cara mengatur tema hape, kok saya temanya masih sederhana

Balas
Komentar yang tidak relevan, jorok, spamming dan promosi link akan dihapus

Desember 2015 - Erianto Anas - blogernas
∟