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/AVvXsEjqJQuppKJwpkaKYSXBSz-MMtH14Qg03io88G-mlsqywNR13-MW1fxxy3fWR8rZDkS7_OJL3iGQKTbtwm-b4sLkmiARsg-SbbvkFhiatV4F5B9L4IJAnGlwAbNkJkWO7mtNU5iEBBs55iOL/) 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/AVvXsEhfrqSC-ZNguKltn-cfT_O5YbWqF9XY4FpuoFI-OT2z5Im9uTyGPVoSBWDuPJCslnWVgO6AuvnQp_i3ADDaCK5VdDDgzzMMO4RE65u2uSh1C9MdRXf3JeK5eYsGeCApRWj1kaENKFIhMI7V/'/></a>
<a expr:href='data:blog.homepageUrl'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGq49JmofAu-rKhBLbHplYCp-UhZ_SrCrZ54nWaF-kvKmBN-b98M7FUr5euQXchTeZ1uSydFOIwyWnwBLAoCN69DOjHu-doaZ70CyfHpif4l1TZU6FFH8YISzraiEEPP50a35MgWw8zXCp/'/></a>
<a href='#' title='Ke Atas Halaman'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9o4qUMh9bfBQMX2lGvm3nqy7VdpWCrtA1m5G5wHBjHYcLAWUO8QcU8E7v9OR0dEd7JsJGy-yV2aV0e1rCCC5xGOPIbRq3-h2pE1Gy8najWUCrfvunbROI4pGUIfR4FmHf-Vg72W5zdCCN/'/></a>
<a href='#footbar' title='Ke bawah halaman'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGOCa4UzLJhwsP1F8Iw-DXnu-U7n1ofinJcTLnATz2uKpo21LFaN_ZPaWI7SOY5HccTufs6AWJ3M_nEIKVezeq976pH-X62LnvxjMdQanbXUT5iP2GmKbHdpvVBxzm_f7fnwOJ58lD73gQ/'/></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.

Salam senyum dariku untuk semuanya, tetaplah untuk bersemangat. Jangan lupa Comment atau isi buku tamu ya sob. Sedikit pemberitahuan untuk sobat yang ingin mengambil [Copy-Paste], Owner tidak melarang sobat untuk memperbanyak artikel namun Owner berharap sobat berlaku dengan bijak agar mencantumkan link active maupun yang tidak. Owner berharap partisipasinya ya sob.

---

---