Cara Membuat Footer Melayang Atau Strip Footer

Salah satu Tips untuk memikat pengunjung bukan hanya pada artikel kalian tapi penampilan Blog Kalian merupakan pandangan pertama yang dapat memikat mereka. Jika Kalian merasa Blog Kalian belum tampil menarik maka Tips yang satu ini akan membuatnya lebih menarik. Pada kesempatan ini Saya akan mengajarkan Tips untuk membuat Footer Bar yang statis. Footer Bar akan selalu muncul walaupun Kalian mengscroll ke bawah halaman. Pada Footer Bar atau strip Footer ini Kalian dapat memasang Iklan atau pun pesan kepada pengunjung. Tentunya pengunjung akan mudah melihat pesan tersebut apabila mereka mendatangi Blog Kalian.

Jika Kalian merasa tertarik untuk membuatnya. Maka ikuti langkah-langkah berikut :

[1]. Seperti biasa Login dulu ke Blog Kalian
[2]. Lalu pilih Tata Letak Klik Edit HTML
[3]. Centan Expand Widget Template
[4]. Cari Code "]]></b:skin>" (Tanpa Tanda Petik) dan Paste Code di bawah sebelum Code tadi

#navbar-footer p.info {

float: right;

padding-right:40px;

line-height: 1.2;

height: 100%;

vertical-align: bottom;

}

#navbar-footer p {

float: left;

margin: 0px;

padding-top:4px;

padding-left:40px;

vertical-align: bottom;

line-height: 1.2;

}

#navbar-footer a {

color: #333;

}

#navbar-footer {

align: center;

position: fixed;

border-top: 1px solid #ddd;

border-bottom: 10px 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]. Kemudian Copy dan Paste-kan Code di bawah sebelum Code "</body>" (Tanpa Tanda Petik)

<div id='navbar-footer'>

<p>

Agar <a href='http://www.blogger.com'>el arkaan</a> lebih bermanfaat dan menarik lagi,<br/> diharap anda dapat meninggalkan komentar....

</p>

<p class='info'>Powered by <a href='http://www.blogger.com'>Blogger</a> | Created by <a href='http://www.facebook.com/new surya computer?ref=profile' target='_blank'>blog untuk berbagi</a><br/>Copyright 2008 - 2009 All Rights Reserved: <a href='http://newsuryacomputer.blogspot.com/'>new surya computer</a>

<br/>

</p>

</div> 

[6]. Simpan Template Kalian dan Lihat Hasilnya...

- Ganti Tulisan Yang Berwarna Merah Dengan Kata-Kata Kalian, Profile Facebook Kalian, Nama Blog Kalian, dan URL Blog Kalian.

Selamat Mencoba...!!!