Tutorial HTML dan CSS : Membuat daftar link pada footer

Tutorial kali ini, berupa studi kasus bagaimana cara membuat footer seperti yang terlihat pada banyak situs-situs pada umumnya. Seperti gambar berikut ini:

Tampak sederhana kan. Tetapi yang difokuskan disini adalah penyusunan daftar link pada footer. Dalam kasus ini, penggunaan unordered list (tag <ul></ul>) lebih dianjurkan untuk struktur yang lebih semantik.

Langsung saja, berikut ini kodenya:

kode html:

<div id="footer" class="center">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">FAQ</a></li>
</ul>
<p class="copyright">Copyright &copy; 2009. Company Name. All Rights Reserved</p>
</div>

Penyusunan menu terlihat menggunakan unordered list. supaya link-link menu tersebut bisa berbaris sejajar, maka itu adalah tugasnya css..

Berikut ini kode CSS nya:

body {
font-family:Verdana;
font-size:11px;
}#footer {
background:#38393A;
color:#A5A5A5;
padding:25px 0px;
text-align:center;
}#footer a {
color:#cecece;
text-decoration:none;
}#footer ul {
padding:0px;
margin:0px;
}#footer ul li {
display:inline;
padding:0px 9px;}

Mudah kan :-D

Menambahkan garis di sela-sela link

Contoh berikutnya adalah menambahkan garis di sela-sela link. Banyak juga situs yang memakai desain seperti ini, seperti gambar berikut ini.

Pada css, kita hanya perlu menambahkan style border-right untuk tiap-tiap list item.
Alhasil, link yang paling kanan juga bakal menampilkan garis di sebelah kanannya. hal ini kurang bagus, karena itu tambahkan 1 selector kelas lagi bernama .last khusus untuk link yang paling kanan.

#footer ul li
{
display:inline;
padding:0 9px;
border-right:solid 1px #cfcfcf;
}
#footer ul li.last {
border-right:none;
}

kode html nya menjadi seperti berikut:

<div id="footer" class="center">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Us</a></li>
<li class="last"><a href="#">FAQ</a></li>
</ul>
<p class="copyright">Copyright &copy; 2009. Company Name. All Rights Reserved</p>
</div>

Mudah kan… Segitu dulu tutorial kali ini :-D


Bookmark and Share Tell a Friend

16 Comments »

  • YNa   |   June 28th, 2009 at 1:00 pm

    sip bgt! simple tapi bermanfaat tuto-nya. belajar CSS jadi lebih mudah. thanks :)

  • rafa   |   July 1st, 2009 at 9:36 pm

    tanya dong, bagaimana ya caranya menambahkan imahe (logo) pada footer kalau pakai default theme wordpress?

    Thks

  • BayuBayu   |   July 14th, 2009 at 8:58 am

    Thanks udah mampir :-) emg simple tapi sering diterapkan.

    Untuk menambahkan logo pada footer, coba modifikasi file footer.php yang terletak pada folder .\wp-content\themes\default

  • dedi   |   December 23rd, 2009 at 2:38 am

    oke kawan tapi ku mau tanya neh css itu apa an yag? ry lun bgtu paham

  • Biyan™   |   December 28th, 2009 at 11:34 am

    Kalau saya lebih memilih meletakkan credit pada bagian footer ini.

  • ali   |   November 1st, 2010 at 1:55 pm

    kirimkan dunk’z html yang lain. agar blog ku jadi keren

  • mastrie   |   March 13th, 2011 at 10:19 am

    Naruhnya di blog pada apa tuh mas…maaf masih nyoba2

  • Wahyu Tirta   |   November 11th, 2011 at 12:57 am

    mantab bgt bro,, makasih bro,, salam kenal n sukses selalu :D

  • Arsipku   |   April 16th, 2013 at 8:50 pm

    Takns lah infonya,tapi saya masih belum blog kalau mau masang di blogspot naruhnya dimana yah…..

  • mebel jepara   |   September 3rd, 2013 at 1:02 am

    pas buat toko onlineku

  • Efran   |   February 18th, 2014 at 11:59 am

    Simpel n keren sob. Ntar ane terapin dah…..

  • jepara furnindo   |   May 3rd, 2017 at 12:32 pm

    makasih gan, nih ane tambah semangat bikin css buat toko online ku.

  • mebel terbaru   |   May 6th, 2017 at 10:28 am

    cakep banget

  • adam   |   June 27th, 2017 at 9:22 pm

    keren gan, suxes selalu

  • mebel murah   |   August 26th, 2017 at 8:22 am

    Bank, ini bisa di terapkan di wp ga

  • Johny   |   November 15th, 2017 at 9:49 am

    wah, keren ini gan, sukses selalu ya

RSS feed for comments on this post. TrackBack URL

Leave a comment