28 Maret 2009

Membuat Footer Bar Statis

Footer bar statis yang saya maksudkan adalah tampilan bar yang berada di paling bawah halaman blog ini dan tak tergeser(statis) ketika scroll digerakkan. Yang perlu anda ketahui adalah bahwa kode css di bawah adalah hasil copy-paste dari script css footer bar yang terpasang di blog ini, jadi tampilannya akan sama persis, keculai anda sedikit melakukan perubahan untuk link-linknya.
Baiklah langsung kita mulai, yang pertama anda copy kode css di bawah ini:

#navbar-footer p {
float: left;
margin: 0px;
padding-top:4px;
padding-left:10px;
vertical-align: middle;
line-height: 1.2;
}
#navbar-footer {
align: center;
position: fixed;
border-top: 1px solid #ddd;
border-bottom: 5px solid #ffffff;
background-color: #ddd;
width: 100%;
left: 0px;
text-align: left;
color: #888;
font-family: Verdana;
font-size: 10px;
z-index:10000;
opacity: 0.9;
filter: alpha(opacity: 90);
bottom:0;
}
#footer-right {
text-align:right;
font-family:verdana;
font-size:14px;
font-color:#000000;
padding-right:30px;
}
setelah itu paste-kan kode di bawah tag <![CDATA[

Kemudian copy lagi kode html di bawah ini:

<div id='navbar-footer'>
<p>
<table border='0' cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td align='left' valign='middle' width='40'>
<a href='#' title='Silahkan dibaca walaupun sebentar saja...'>
<img height='50' src='http://www.laymark.com/i/ch/ch011.gif' width='50'/>
</a>
</td>
<td align='left' valign='middle'>&#169; 2008 | <a href='http://yoyokr.purworejo.asia' title='Sebentar Saja'>yoyokr.purworejo.asia</a><br/>
Hosted by <a href='http://www.blogger.com' title='blogger'>Blogger</a><br/>
Subdomain by <a href='http://www.purworejo.asia/2008/12/cara-mendapatkan-subdomainpurworejoasia_17.html' title='Subdomain Gratis'>www.purworejo.asia</a>
</td>
<td align='left' valign='center'>
<div align='right' id='footer-right'>
<a href='http://yoyokr.purworejo.asia'>Home</a>
| <a href='http://draft.blogger.com/'>Login</a></div>
</td>
</tr>
</table>
</p>
</div>
<script type='text/javascript'>
var gaJsHost = ((&quot;https:&quot; == document.location.protocol) ? &quot;https://ssl.&quot; : &quot;http://www.&quot;);
document.write(unescape(&quot;%3Cscript src=&#39;&quot; + gaJsHost + &quot;google-analytics.com/ga.js&#39; type=&#39;text/javascript&#39;%3E%3C/script%3E&quot;));
</script>
<script type='text/javascript'>
try {
var pageTracker = _gat._getTracker(&quot;UA-6583208-1&quot;);
pageTracker._trackPageview();
} catch(err) {}</script>

Lalu paste-kan di atas tag </body>
Selesai...

30 Komentar:

  1. mas apik tenan...
    salam kenal, saya maung, saya newbie jd harus belajar sama yang pro...makasih banyak infonya..cuman kalo dipasang di blog saya kenapa ga statis ya??tapi ga apa-apa bagus buanget mas...makasih

    BalasHapus
  2. mungkin ada kode css nya yang kurang lengkap sob, coba diperiksa lagi...trims atas kunjungannya, saya mau kasih komen di blog antum kok nggak ada form komen nya ya? trims info domain tertuanya, saya posting ya

    BalasHapus
  3. aku newbie juga, ini dicopy kemana
    maksudnya di scriptnya template ya mas... aku ra ngerti ...

    BalasHapus
  4. Mas Nahar nih caranya: login ke blogger,klik: 'tata letak',klik: 'edit-html', contreng:expand template widget' lalu copy kan kode di atas pada temapt yang ditunjukkan, ok selamat mencoba

    BalasHapus
  5. Ini baru mantaff... yang lain ga pada ikhlas sih ngasihnya... OK sob makasih banyak...

    BalasHapus
  6. Sama-sama mas aang, saling berbagi info dan pengalaman supaya jadi sama-sama lebih baik, ok, trims kunjungannya

    BalasHapus
  7. kok yg aku mah ikut2 molo nav barnya BOS...hiks...:(

    BalasHapus
  8. susah jg klik isi yg paling bawahnya mas..itu kan kehalangin ama footbar statisnya, nih bebek lagiii (isi yg widget ama youtube)

    BalasHapus
  9. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  10. Thanks nice inpo mau coba

    BalasHapus
  11. Wah keren, ini yg lg sy cari, mksih ya

    BalasHapus
  12. @adedosol: silahkan dicicipi...

    BalasHapus
  13. wahh ...
    thanks ya !!!
    keren nechh !!!

    BalasHapus
  14. mas, koq punya saya jadi gag statis ?
    padhal kode css yg mas tulis diatas sudah saya copy paste semua ..
    tolong dungg ..

    BalasHapus
  15. keknya ada yg ngejiplak nih...hihihi
    http://thom-sharing.blogspot.com/2009/05/membuat-navbar-sendiri-transparan.html
    gak jantan tanpa cantumin sumber inspirasinya

    BalasHapus
  16. okelah kalau begitu aku terima petuah saudara.. semoga menjadi amal kebaikan kita..
    trims

    BalasHapus
  17. makasih banget nih tutornya... salam kenal...

    BalasHapus
  18. Makasih gan. Salam kenal @sunawang :)

    BalasHapus
  19. thanks banget bro, bermanfaat sekali

    BalasHapus
  20. Mas makasih ya sudah bagi2 ilmu, sangat bermanfaat nih bagi saya yang masih belajar tentang blog, salam kenal....:)

    BalasHapus
  21. untuk template downloadan bisa gak mas............

    BalasHapus
  22. kalau mau dipasang di atas header gimana ya mas?

    BalasHapus

 
Copyright © . Yoyok Rohani - Posts · Comments
Tanks to BT Designer · Blogger