Home » Berita

Mengubah "Footer" Menjadi "Fixed-Footer"

1 June 2008 10 views 5 Comments

Anda tahu Footer? Footer adalah bagian yang paling bawah dari sebuah blog. (Begini doang mah nggak usah dijelasin hehehe). Footer memang selalu ada di setiap template, tapi pernahkah anda melihat Fixed-Footer? Fixed-Footer tidak terlalu berbeda dengan Footer yang biasa, hanya saja posisi Fixed-Footer akan terus bertumpu tetap pada saat scroll digerakkan dan inilah yg menjadi keistimewaannya Fixed-Footer……Wes…poko’e ngono lah…makin dijelaskan makin pusing aku :p

Saat ini, baru sedikit yang mengganti footer biasa dengan fixed-footer. Yang baru saya ketahui adalah blogmenjerit, anangku, dan blog saya sendiri. Bagi yang sudah kebelet mengikuti tutorialnya, ikuti saya. Bagi yang kebelet kencing, silahkan pipis dulu :D).

1.Msuk ke Dashboard->Layout->Edit-HTML.

2.Sediakan template cadangan apabila tutorial ini gagal dengan cara ketik REG [spasi] template mengklik link Download Template Lengkap.

3.Centangi kotak Expand Template Widget.

4.Cari kode ]]></b:skin>, kalau sudak ketemu tambahkan kode ini atasnya

#fixed-footer p.info {
float: right;
padding-right:40px;
line-height: 1.2;
height: 100%;
vertical-align: bottom;
}
#fixed-footer p {
float: left;
margin: 0px;
padding-top:4px;
padding-left:40px;
vertical-align: bottom;
line-height: 1.2;
}
#fixed-footer a {
color: #333;
}
#fixed-footer {
align: center;
position: fixed;
border-top: 1px solid #ddd;
border-bottom: 5px solid #f5f5f5;
background-color: #f5f5f5;
width: 100%;
left: 0px;
text-align: left;
color: #888;
font-family: Verdana;
font-size: 11px;
z-index:10000;
opacity: 0.9;
filter: alpha(opacity: 90);
bottom:0;
}

5.Cari kode di bawah ini

<div id=’footer‘>
<b:section class=’footer‘ id=’footer‘>
</b:section>
</div>

Ganti semua kode yang ditebalkan dengan fixed-footer

Tetapi, bagaimana bila kodenya seperti ini

<div id=’footer-wrap1′><div id=’footer-wrap2′>
<b:section class=’footer‘ id=’footer‘>
</b:section>
</div>

Maka, ganti hanya kode yg miring dan bergaris bawah saja.

Simpan template……Selesai…wets..tunggu dulu bro…masih ada satu pekerjaan lagi, yaitu menambahkan elemen halaman. Makanya, trik ini membutuhkan stamina dan fisik yg kuat untuk menyelesaikannya :O.

6.Sekarang, kita berpindah ke submenu Elemen Halaman. Silahkan kik Tambah Elemen Halaman, lalu pilih HTML/Javascript. Copy-paste kode ini lalu masukkan ke elemen halaman blog anda.

<center>Gudang-HTML is Powered by <a href=”http://www.blogger.com/”>Blogger</a> | Created and Maintained by <a href=”mailto:istifajar@o-om.com”>Istifajar</a> <a href=”ymsgr:sendIM?awe_dunk”> <img src=”http://opi.yahoo.com/online?u=awe_dunk&amp;m=g&amp;t=0&amp;l=us”/>
</a> Best viewed in Firefox 1.5+ at 1024×768 or higher resolution</center>

Silahkan anda obrak-abrik sendiri sesuai keinginan…..Lalu simpan dan lihat blog anda sekarang….

Met weekend :)

Sumber:blogmenjerit.blogspot.com

logo

5 Comments »

  • Agung said:

    Blog aku juga pake Fix Footer tapi bukan taro dibawah tapi diatas .

  • blogmenjerit said:

    saya rasa ada yang tak kena dengan tutorial ini, sila check balik.

    kod ini
    #fixed-footer p.info {
    .
    .
    .
    }
    #fixed-footer p {
    .
    .
    .
    }
    hanya diguna jika tulisan anda ada <p class="info"></p>

    terima kasih :-)

  • Ranggalawe Istifajar Rullinda said:

    @ blogmenjerit: terima kasih sudah memberitahukan :)

  • boedak said:

    boss, mw nanya neh, gmn caranya bwt kotak komentar kayak punya boss ini?
    kasih pencerahan donk!

  • mochal said:

    di pelajari lebih dalam lagi ah….

Leave your response!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Dapatkan disini Free Domain+Hosting & Themes Premium WordPress Murah

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register at Gravatar.