Membai 3 foter

Bagi kalian yang sedikit-sedikit mau belajar membangun template blog kreasi sendiri seperti template yang saya miliki ini walaupun tidak terlalu bagus tetapi begitu memuaskan bukan jika kita menggunakan template hasil kreasi kita sendiri. Pada postingan kali ini saya akan memberi tahu kepada kalian bagaimana membagi elemen halaman footer menjadi tiga bagian.

Di bawah ini merupakan salah satu contoh gambar yang saya ambil dari template minima. Silahkan kalian amati sendiri perbedaannya.

Setelah kalian amati gambar di atas, mari kita mulai pekerjaan kita. Login-lah pada blog yang kalian miliki, masuk ke bagian “Tata Letak” dan pilih “Edit HTML”. Pada bagian “Edit HTML”, jika kalian menggunakan template minima akan tampak kode Css seperti di bawah ini.

Kode Css

#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
Jika kalian sudah menemukan kode di atas, Silahkan kalian hapus kode tersebut dan ganti dengan kode di bawah ini.
#footer {
width:213px;
margin:0;
padding:0;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
float:left;
}
#footer2 {
width:213px;
margin:0;
paddingp:0;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
float:left;
}

#footer3 {
width:213px;
margin:0;
padding:0;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
float:left;
}
Kemudian silahkan kalian cari lagi tampilan kode seperti di bawah ini.
</div> <!-- end content-wrapper -->
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
Jika sudah kalian temukan tampilan kode seperti di atas, tambahkan beberapa kode yang sudah saya beri warna merah sehingga bentuk tampilannya menjadi seperti di bawah ini.
</div> <!-- end content-wrapper -->
<div style='clear:both'/>
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
<b:section class='footer2' id='footer2'/>
<b:section class='footer3' id='footer3'/>
</div><div style='clear:both'/>
Setelah kalian tambahkan beberapa kode yang sudah saya beri warna merah di atas, berikutnya adalah simpan template dan lihatlah pada “Elemen halaman” blog yang kalian miliki. Oke boss pekerjaan saya cukup sampai di sini. Jika ada pertanyaan, silahkan tinggalkan komentar kalian.

Perihal hidayat
Hanya seorang manusia biasa

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: