Make Dock or Footer With CSS3

Kayaknya postingan kali ini masih mengenai CSS3 nih sob ;)) Bagi sobat yang sudah membaca postingan Beben sebelumnya tools css by westciv. Kalau sudah mencoba tools yg ada di web itu mungkin sobat bisa melihat tulisan About... dipojok kiri bawah :-/ About... Tulisan tersebut jika disorot dengan cursor, maka akan terbuka footer yg tersembunyi :D Seperti postingan Beben mengenai Dock or Footer. Ternyata bisa menggunakan CSS3 dalam membuat trik ini sob. Serupa tapi tak sama ;))
Langkah-langkahnya :

1. Cari kode </b:skin>
2. Masukkan CSS berikut sebelum/diatas kode pada langkah pertama.

#bottom{position:fixed;bottom:0;background-color:#333;width:100%;color:#bfbfbf;font-size:.9em;text-shadow:none;z-index:10000;background-image:0 to(#444), color-stop(0.6,#000));opacity:.9;-webkit-transition:top 1s;-o-transition:top 1s;top:100%;left:0;padding:1em 0 0}
#bottom:hover{top:45%}
#bottom a:link,#bottom a:visited{color:#eee;text-decoration:none;font-weight:700;text-shadow:1px 1px 1px #fff}
#f00t{color:#fff;text-decoration:none;font-weight:700;position:absolute;top:-2em;background-color:#FF8640;font-size:1.3em;text-align:center;-webkit-border-radius:.5em;-moz-border-radius:.5em;border-radius:.5em;background-image:0;text-shadow:1px 1px 1px #444;margin-left:.1em;box-shadow:2px 2px 2px #bbb;-webkit-box-shadow:2px 2px 1px #bbb;-moz-box-shadow:2px 2px 1px #bbb;border-color:#e1563e;border-style:solid;border-width:2px;padding:.3em .7em}
#bottom>div{float:left;width:23%;padding:0 1%}
#bottom>p{clear:both;margin-top:3em;text-align:right;width:98%}

3. Masukkan kode HTML berikut sebelum/diatas kode </body>
<div id="bottom">
<div id="f00t">Your Title???</div>
<div>
<p>Lorem ipsum dolor sit amet <a href="/">Your title link</a> by <a href="/">Beben Koben</a> consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore.</p>
</div>
<div>
<p>At vero <a href="/">Style Master</a>, eos et accusam et justo duo dolores et ea rebum.</p>
</div>
<div>
<p>Stet clita kasd gubergren, <a href="/">your title</a> no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, <a href="/">your title</a>.</p>
<p>consetetur sadipscing elitr <a href="/">your title</a>.</p>
</div>
<p>© 2009—2010 <a href="/">your title</a> hacked by <u>Beben Koben</u></p>
</div>
4. Save.

Pada langkah kedua ada tulisan berwarna hijau. Itu rubah untuk mendapatkan tinggi hover sesuai yg diinginkan. Dapatkan panduan CSS gaya punya di Westciv Wiki. Selamat menyambut CSS3 dan HTML5 :x and happy blogging with me si bloglang ganteng kalem.
Inspiration by www.westciv.com