May 30, 2014

Cara Membuat Footer Statis (Melayang)

May 30, 2014

Tutorial membuat Footer Statis, Footer Mengapung, atau Menu Footer Melayang (Floating Footer) ini terinspirasi trik My Blogger Lab tentang Floating Sticky Footer. Namun, di sana cara membuatnya menggunakan tiga kode, plus Javascript.

CB coba modif aja tanpa Javascript. Tenyata... bisa!

Footer Statis yaitu footer blog yang tetap muncul (mengapung/melayang) saat user men-scroll mouse ke atas ataupun ke bawah.

Footer Statis ini bisa diisi menu, iklan, atau informasi apa saja. Bebas! Tentu, memerlukan penyesuaian kalau mau diutak-atik lagi. 

Cara Membuat Footer Statis

Cara membuat footer statis ini hanya dua langkah, setelah Anda masuk dulu ke Template > Edit HTML seperti biasa.

1. Copy & Paste kode berikut ini  di atas kode ]]></b:skin>

<!--CB Static Footer Starts-->
#static-footer p {
float: center;
margin: 0px;
padding-top:10px;
padding-left:40px;
vertical-align: bottom;
line-height: 1.2;
}

#
static-footer a {
color: #fff;
}

#
static-footer {
height: 40px;
align: center;
position: fixed;
border-top: 1px solid #ddd;
border-bottom: 10px solid #f5f5f5;
background-color: #111;
width: 100%;
left: 0px;
text-align: center;
color: #fff;
font-family: Verdana;
font-size: 11px;
z-index:10000;
opacity: 0.9;
filter: alpha(opacity: 90);
bottom:0;
}
<!--CB Static Footer End-->


2. Copy & Paste kode berikut ini di atas kode </body>

<!--static footer start-->
<div id='static-footer'>
<p>
Powered by <a href='http://www.blogger.com'>Blogger</a> | Created by <a href='#' target='_blank'>CB Design</a>. Copyright 2014 All Rights Reserved: <a href='#'>CB Design™</a></p>
</div>
<!--static footer end-->


Catatan: tulisan atau kode yang berwarna orange bisa diubah sesuai dengan selera Anda. Di situ pula jika mau menyimpan gambar atau kode iklan. Tapi jangan lupa, atur atau sesuaikan ketinggian footer statisnya di kode pertama (kode: height: 40px;).

Setelah itu? Tentu saja.... Save Template! 

Selamat... ! Blog Anda sudah punya footer statis yang fleksibel dan bisa diisi apa saja asal proporsional.*

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

7 comments on Cara Membuat Footer Statis (Melayang)

  1. Mas bro, ada demonya tidak?

    ReplyDelete
    Replies
    1. Dibaca tidak tulisannya? Kalo dibaca pasti ketemu link demonya :)

      Delete
  2. Mantep tutor nya mas. Langsung saya coba.. tks

    ReplyDelete
  3. kalo di pasang kode adsense aman ga ni mas ??

    ReplyDelete
  4. Sayangnya no demo.. Foto kek.. Hadeh..

    ReplyDelete
    Replies
    1. Sayangnya, bacanya gak teliti dan tuntas, itu ada link di alinea awal, hadeuh.... :)

      Delete

Contact Form

Name

Email *

Message *