Kali ini kita akan bahas tentang bagaimana cara membuat footer float atau juga dimaksud dengan footer melayang di blog, dan footer ini juga agak sedikit unik dengan kode html dan css yang sangat sederhana, contohnya bisa dilihat pada footer yang melayang pada blog ini...
Keistimewaan footer yang akan kita dibuat kali ini adalah seolah-olah footer ini dapat membaca pikiran orang yang sedang ada di blog kita, contohnya? yah liat aja tulisan You Reading: Membuat Footer Float Unik di Blog! yang ada di blog ini? bisa kan footer ini membaca pikiran? hahaha...
Bagaimana cara membuatnya? yah seperti yang udah ane bilang membuatnya hanya dengan menggunakan kode html dan css yang sangat sederhana untuk membuat footer ini. FOLLOW THIS:
- Login ke Blogger.
- Masuk ke Rancangan lalu ke Edit HTML.
- Copy Paste kode CSS dibawah ini tepat diatas kode ini ]]></b:skin>:
#navbar-footer p.info{float:right;height:13px;line-height:1.2;padding-right:10px;vertical-align:bottom}#navbar-footer p{float:left;line-height:1.2;margin:0;padding-left:40px;padding-top:4px;vertical-align:bottom}#navbar-footer a{color:#000}#navbar-footer{align:center;background-color:#4682B4;border-bottom:10px solid #4682B4;border-top:1px solid #ddd;bottom:0;color:#000;filter:alpha(opacity:90);font-family:Verdana;font-size:11px;left:0;opacity:0.9;position:fixed;text-align:left;width:100%;z-index:10000}
- Lalu Copy Paste juga kode HTML dibawah ini tepat diatas tag </body>
<div id='navbar-footer'><p><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIeG9lpcUg39FK40d2DGqvy5Iqrn3uPQvnYtS7_dT_vhvsIh3M8UabQqfBTBUlb_mwuFfgKALkXqbzFs2ge6PhFFdNcNgbn9yTW_KPOH6y2nhzOIGpeMq4lsjrAZsk4YWO0hjK9v2ynXNv/s1600/thefantasyblogromyrafaeldantvonlineicon.png'/>  <a href='http://www.fachrin.tk/index.html'>The Fantasy Blog</a> © 2010-Now </p><p class='info'>Powered by <a href='http://www.blogger.com'>Blogger</a> | Created by <a href='http://www.facebook.com/fachrin.co.cc?ref=profile' rel='nofollow' target='_blank'>Fachrin Bachdim Rafael</a>.<br/>You reading: <b><data:blog.pageTitle/></b>.</p></div>
- Lalu SAVE TEMPLATE .
Categories:
