Home disini
widget by sy@ms

Latest Posts

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.



6 komentar:

Tânjung Tânkiân mengatakan...

Gan, kalau efek gradientnya buat header bisa gk??

thanks before :D

sy@ms mengatakan...

Sebelumnya salam kenal sob, efek gradient bisa digunakan untuk header, namun ada yang harus dimodifikasi yaitu :
pada css, id #navbar-footer,
rubah bottom:0 menjadi top:0
terus ganti background dengan background gradien yang sudah dimodif yaitu berefek gradient untuk diatas, sobat bisa meodifikasi gambar sendiri.

Mungkin hanya itu sob, semoga dapat bermanfaat dam terus bersemangat sob.

23 Maret 2012 pukul 00.48
Tânjung Tânkiân mengatakan...

Wah, thanks petunjuknya kawan..

manjur sangat tips-nya :Dhahaha

sy@ms mengatakan...

Oke sob, trims kunjunganya sob.

29 Maret 2012 pukul 20.25
Id Bloger mengatakan...

klo buat background bisa kagak mas ...

sy@ms mengatakan...

Kalau background bisa aja tinggal sediain gambar yang berefek gradient lalu masukan ke dalam background tag <body>, namun hanya sebagai backgound dan tidak bisa menghilangkan setengah dari bagian footer.

15 Mei 2012 pukul 10.54

Jam Sekarang
Tanggal
Salam Sapa :
Status Blogging :

*ket. status : Terjadwal : Berarti yang punya blog tidak bisa berinternet [ More... ]





sy@ms
skyNET program


Join the conversation for skyNET program

 
 free web counter Counter Powered by  RedCounter

© 2011 || Copyright by sy@ms || Thanks for skyNET program All Reserved

Technology Blogs TopOfBlogs Top Blogs Internet Internet Blogs Phil Backlink Display Pagerank
Yahoo bot last visit powered by MyPagerank.Net
USA Backlinks Free Backlinks Service at USABacklinks.com! Auto Backlink Gratis Indonesia : Top Link Indo My Ping in TotalPing.com ping fast  my blog, website, or RSS feed for Free