Kukuh Cakra Darma

Membuat Fixed Footer

Fixed-Footer, itu adalah salah satu trik yang saya gunakan untuk template khusus ini. Nah, untuk demonya ya silahkan saja lihat blog saya (*dengan catatan tanggal 10 November 2010). Atau untuk gambarnya, silahkan saja lihat gambar dibawah ini dan klik pada gambar untuk Zoom.


Bagamana? Bagus bukan? Cara membuatnya?  Gampang kok.. Silahkan saja lihat caranya dibawah ini
1. Login ke blog anda --> Design --> Edit HTML
2. Cari ]]></b:skin>.
3. Letakkan CSS berikut di atas kode yang tadi anda cari


#footer-fix {
align: center;
position: fixed;
border-top: 1px solid #ddd;
border-bottom: 5px solid #6f6f6f;
background-color: #6f6f6f;

width: 100%;
height: 20px;
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;
}

#footer-fix a {
color: $linkcolor;
}
#footer-fix p.right {
float: right;
padding-right:38px;
line-height: 1.3;
height: 100%;
color: white;
vertical-align: bottom;
}
#footer-fix p {
float: left;
margin: 0px;
padding-top:6px;
padding-left:30px;
color: white;
vertical-align: bottom;
line-height: 1.2;
}
4. Nah, kemudian beralih ke sini. Letakkan kode berikut di atas kode </body>.

<div id='footer-fix'>
<p><a href='http://kukuhcdh.blogspot.com/'>Kukuh Cakra Darma</a>&#160;Indonesia&#160;</div></p>
<p class='right'>Optimized for 1024x768&#160;|&#160;All Browser&#160;</p>
5. Save dan lihat hasilnya!

Sekian semoga membantu! "Fixed-Footer"



Artikel Terkait:

9 Comments:

secangkir teh dan sekerat roti | 10 November, 2010 20:28 | [Reply]

wah.. boleh nih dicoba.. :)

Kukuh Cakra Darma | 10 November, 2010 20:31 | [Reply]

@secangkir teh dan sekerat roti silahkan

kisah abu nawas | 10 November, 2010 23:13 | [Reply]

akan dicoba sob

Kukuh Cakra Darma | 11 November, 2010 18:33 | [Reply]

@kisah abu nawas monggo silahkan dicoba

Muhammad Chandra | 12 November, 2010 12:26 | [Reply]

muantaaap , kebetulan template saya udah langsung pkai link footernya sob . hehehe

Kukuh Cakra Darma | 12 November, 2010 18:01 | [Reply]

@Muhammad Chandra yoi gan.. terimakasih

MakSue | 21 January, 2011 13:33 | [Reply]

Terima kasih ye tutorial ini. Sangat berguna kepada saya.

I follow ur blog :)

MakSue | 21 January, 2011 13:36 | [Reply]

thanx a lot..
its work for me
http://blog.noorjannah.com/

Vimax Suplemen Pembesar Mr.P Pria | 11 September, 2015 08:07 | [Reply]

artikelnya sangat membantu thanks for sharing
kunjungi web kami gan => www.vimaxkapsuloriginal.com

Post a Comment | Classic Comment's Form