Membuat Footer Berefek Gradient

Nah setelah sekian lama tidak update, sekarang ane akan postingin artikel membuat Footer dengan efek gradien. Seperti gambar disamping. Sebetulnya ini merupakan perminta'an dari sobat ane tapi ini ane postingin biar bisa bermanfa'at untuk semuanya

Pada dasarnya sama dengan kebanyakan footer ang digunakan oleh para blogger mania. Hanya saja ane menggunakan backgrund yang sudah saya buat dengan efek gradient. Sehingga akan nampak seperti hilang sebelum menyentuh bagian bawah browser. Biar ga penasaran yuk coba codingnya.......

Ni codingnya......

<style type='text/css'>
#navbar-footer p.info {
float: right;
padding-right:40px;
line-height: 1.2;
height: 40px;
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;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilMmmGkzMT6paflVI5UcoLcGOylv1cC1uox4OepmJKIiRSt6eYPOats5tbZ4UszfKlQCQdW2dGEpDIz69dhTh6nY1fhBPWR7_SHepAmQmHM72VPSCTrsTY4TbC9-kPxuovH8oLQN9y9LRt/) repeat-x left bottom;
width: 100%;
height: 100px;
left: 0px;
text-align: left;
color: #888;
font-family: Verdana;
font-size: 11px;
z-index:10000;
filter: alpha(opacity: 90);
bottom:0;
}

#iconfooter{display:scroll;position:fixed;bottom:10px;right:20px;z-index:99}
#iconfooter a{filter:alpha(opacity=65);-moz-opacity:0.65;opacity:0.65;border:0}
#iconfooterr img{border:0}
#iconfooter a:hover{filter:alpha(opacity=100);-moz-opacity:1;opacity:1}

</style>

<div id='navbar-footer'>
<p class='info'> <br/>  </p><br/>
<div id='iconfooter'>
<a href='#' onClick='window.location.reload()' title='Reload page'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib71SXBMfwHbutHqdmb3YrFvIWSsIejXe7GtRXNWIAW09jQZBwiBnE8vRG1hbnMjGDmIeT6tfm6sYq6MMjtDK0OZMyWzmcLmPa-Z8d7joFPcMUYHz90W434TwfkKvkhdgupebJquARsYdX/'/></a>
<a expr:href='data:blog.homepageUrl'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeJ5hbB6YyfdpZwUMos7zmwuvB0soFft7um6u0EDJigG-CYWX8vQz7U3cMonnDUwhAlCgNT78Xf4roh6Xj-ZOmP8noZ5dIwBOjPk5r4EjcuQVDOSDcHxVOuURQ36JmvV3v7PIrd4TPf98K/'/></a>
<a href='#' title='Ke Atas Halaman'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2hiXLKrJiVAPmwWvAe1c-SRc7HQEK4DpsTMK4JQipUJhhGI85hLm-U5hn8RH3mft3HKnBDJg8oFiJTVSzU0obAh5Cl0ISJDBA1yrnJmtr0uQzpn-6hl_SHiT63VOFvZu21eiTcJU-5OIt/'/></a>
<a href='#footbar' title='Ke bawah halaman'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVeIIeOiEF6dHQnOe5WmWsgOT769uUsu-2SXuL1F2qVrm6_jCgNs6mJZ0hHMIU5Sci5mDuAmfNxYE6Wv7Ev945r4ijT6QV4sCGm3jlv9Y-k_cQ-SqUWgBdaOgb_DHyrlAxMfhR2FMIg8nf/'/></a>
</div>
       </div>

Untuk pemasangan, sobat dapat mengikuti step-stepnya......

1. Login ke akun bloger sobat....
2. Pilih Rancangan, disini sobat bisa meletekan pada dua tempat, yang pertama pada Edit Laman dan Edit HTML terserah sobat lebih mudah yang mana.
3. Jika sobat pilih Edit Laman, tambah gadget pilih Html/Javascript, lalu copy pastekan kode di atas kedalamya, setelah itu simpan.
4. Jika sobat pilih Edit Html, cari kode </body> lalu letakan script tersebut diatasnya. setelah itu klik simpan.
5. Klik lihat blog untuk melihat....

Gimana, sobat tinggal menyesuaikan backgroun sesuai dengan selera sobat.
Ok teruslah berkreasi dan terus bersemangat.

Judul : Membuat Footer Berefek Gradient
Rating : 4.5
Ditulis Oleh : sy@ms

Jika mengutip harap berikan link yang menuju ke artikel Membuat Footer Berefek Gradient ini. Sesama blogger mari saling menghargai. Terima kasih atas perhatiannya