Make Sticky Footer Column (Use Hover Trick)

Apa yang mesti dilakukan jika blog kita kehabisan lahan. Membuat divisi daerah baru tentunya dong ;)) Salah satu contoh yaitu dengan membuat footer 3 kolom (3 column footer) Pada kasus sekarang, Koben akan berbagi cara membuat 3 kolom footer dengan modus sticky and hover Kolom berada pada posisi diam di bawah, disembunyikan dengan membatasi tinggi, dan akan muncul ketika kita mengarahakn cursor di area kolom tersebut! Demo silahkan lihat pd blog official google berikut Official Google Blog
Itu mah versi canggih, gue buat versi sederhananya saja. Entar bikin canggih² malah pusing (emang nggak bisa buatnya bos) :D Kode CSS pembatas divisi konten footer

    #foot_bawah {
        background-color: #fff;
        border-top: 1px solid #333;
        bottom: 0px;
        font-size: 12px;
        max-height: 10px;
        padding: 8px 0 10px;
        position: fixed;
        width: 100%;
        opacity: .7;
        transition: max-height 0.5s ease-in-out 0s;
    }
    #foot_bawah:hover {
        position: fixed;
        bottom: 0px;
        opacity: 1;
        max-height: 150px;
    }

Kode CSS 3 footer kolom

#foot_bawah h3 {
text-align: center;
margin: 0 0 15px;
padding-bottom: 10px;
font-size: 12px;
}
#foot_bawah h2 {
margin: 0 0 5px;
padding: 0;
text-align: left;
color: #f0f;
font: bold 15px Arial, Tahoma, Verdana;
border-bottom: 1px solid #333
}
#foot_b {
margin: 0 auto;
padding: 0;
width: 999px;
}
#footer_b {
float: left;
margin: 0 5px auto;
width: 32%;
text-align: justify;
line-height: 1.9em;
overflow: auto;
max-height: 125px;
word-wrap: break-word;
}
#footer_b:hover {

}

Gabungkan deh kedua kode-kode diatas menjadi satu kesatuan utuh :D Kode gabungan...Click to expand

#foot_bawah {
background-color: #fff;
border-top: 1px solid #333;
bottom: 0px;
font-size: 12px;
max-height: 10px;
padding: 8px 0 10px;
position: fixed;
width: 100%;
opacity: .7;
transition: max-height 0.5s ease-in-out 0s;
}
#foot_bawah:hover {
position: fixed;
bottom: 0px;
opacity: 1;
max-height: 150px;
}
#foot_bawah h3 {
text-align: center;
margin: 0 0 15px;
padding-bottom: 10px;
font-size: 12px;
}
#foot_bawah h2 {
margin: 0 0 5px;
padding: 0;
text-align: left;
color: #f0f;
font: bold 15px Arial, Tahoma, Verdana;
border-bottom: 1px solid #333
}
#foot_b {
margin: 0 auto;
padding: 0;
width: 999px;
}
#footer_b {
float: left;
margin: 0 5px auto;
width: 32%;
text-align: justify;
line-height: 1.9em;
overflow: auto;
max-height: 125px;
word-wrap: break-word;
}
#footer_b:hover {

}

Jadi deh bumbu CSS-nya, tinggal kita buat ramuan HTML-nya deh ;)

Ramuan HTML

<div id="foot_bawah">
<h3>More blogs from Google</h3>
<div id='foot_b'>
<div id='footer_b'>
<h2>Title 1</h2>
---------- CONTENT1 HERE ----------
</div>
<div id='footer_b'>
<h2>Title 2</h2>
---------- CONTENT2 HERE ----------
</div>
<div id='footer_b'>
<h2>USEFULLY STUFF & LINKS</h2>
<ul>
<li><a href="http://undercover-blogger.blogspot.com/2012/01/live-html-editor.html">Live HTML Editor</a></li>
<li><a href="http://undercover-blogger.blogspot.com/p/redirect_04.html">Easy To Read</a></li>
<li><a href="http://undercover-blogger.blogspot.com/p/simple-css-compressor.html">CSS Compressor</a></li>
<li><a href="http://undercover-blogger.blogspot.com/p/add-to-blogger-button-creator.html">Add To Blogger Button Creator</a></li>
<li><a href="http://ben-tools.blogspot.com/2010/03/rgb-color-code.html">Table Color</a></li>
<li><a href="http://undercover-blogger.blogspot.com/p/look-feed-atom-rss-autodiscovery.html">Look Feed Atom RSS (Autodiscovery)</a></li>
<li><a href="http://embah-google.blogspot.com/2011/01/all-about-blogger-blogspot.html">All About Blogger Blogspot</a></li>
<li><a href="http://undercover-blogger.blogspot.com/p/from-our-google-blogs.html">From our Google Blogs</a></li>
</ul>
</div>

</div>
</div>

Selesai. Good luck :)
www.htmldrive.net/edit_media/2011/201108/20110819/stickey_footer/
www.lanrenzhijia.com/yulan/169/
preview.zcool.com.cn/code/2012060601/
filamentgroup.com/lab/socialcount/
2 web dari negeri tirai bambu, the great resource place my bro.
Happy coding \m/