JQuery Pada Multi Kolom Footer

Tutoril berikut adalah kelanjutan dari tutorial kemarin yang membahas tentang Cara Membuat Multi Kolom Pada Footer yang mana pada note-nya saya berjanji untuk posting artikel yang membahas tentang JQuery pada Multi Kolom Footer, Akhir2 ini jquery memang sudah membuat para blogger jadi ngiler untuk mencobanya, akan tetapi karena caranya yang lumayan sulit sedikit sekali blogger yang mencobanya.

Oleh karena itu saya mencoba untuk membahas jquery ini ke dalam bahasan yang mudah dimengerti tapi langsung berhasil. Artikel berikut diambil dari  jQuery Dock Menu Tutorial Revisit – Dock at Bottom

Berikut Langkah2nya:

• Login ke Blogger.com
• Kemudian Tata Letak
• Pilih Edit HTML
• Centang Expand Widget
• Copas kode berikut diatas kode ]]></b:skin>

/*untuk dock bottom */  #fake-body {  overflow:auto;  z-index:1; }   #dock {  background:#ccc;  height:200px;  z-index:100;  width:100%; } 

• Selanjutnya copas kode berikut diatas kode </head> 

  <script src="http://www.sigmirror.com/files/23924_ndaws/jquery.js" type="text/javascript" />
<script src='http://www.sigmirror.com/files/23965_5kf1u/jqueryeasing.js' type='text/javascript'/>
<script>
//http://webtips.dan.info/graceful.html
$undefineddocument).readyundefinedfunctionundefined) {
    //Transition you want
    var easing_type = 'easeOutBounce';
    //The default height for the dock undefinedon mouse out)
    var default_dock_height = '20';
    //Expanded height, the height of the dock on mouse over, you have to set it in CSS
    var expanded_dock_height = $undefined'#dock').heightundefined);
    //Fake body height
    var body_height = $undefinedwindow).heightundefined) - default_dock_height;
    //Set the size of #fake_body
    $undefined'#fake-body').heightundefinedbody_height);
    //Set the CSS attribute for #dock
    $undefined'#dock').cssundefined{'height': default_dock_height, 'position':'fixed', 'top': body_height});
    //In case the user resize the browser, we will need to recalculate the height and top for #fake_body and #dock
    $undefinedwindow).resizeundefinedfunction undefined) {
        //Grab the updated height/top
        updated_height = $undefinedwindow).heightundefined) - default_dock_height;

        //Set the updated height for #fake_body and top for #dock
        $undefined'#fake-body').heightundefinedupdated_height);
        $undefined'#dock').cssundefined{'top': updated_height});
    });
    //The main event for the dock bottom menu
    $undefined'#dock').mouseoverundefinedfunction undefined) {
        //Recalculate expanded height undefinedalways get the latest height), in case user has resized the window
        expanded_height = $undefinedwindow).heightundefined) - expanded_dock_height;
        //Animate the height change, set the height to expanded_dock_height and set the top value as well
        $undefinedthis).animateundefined{'height':expanded_dock_height,'top': expanded_height},{queue:false, duration:800, easing: easing_type});

    }).mouseoutundefinedfunction undefined) {
        //Recalculate default body height undefinedalways get the latest height), in case user has resized the window
        body_height = $undefinedwindow).heightundefined) - default_dock_height;
        //Animate the height change, set the height to default_dock-height and set the top value as well
        $undefinedthis).animateundefined{'height':default_dock_height,'top': body_height},{queue:false, duration:800, easing: easing_type});
    });
});
</script>

• Kemudian copas kode berikut setelah kode </div></div> <!-- end outer-wrapper -->

<div id='dock'>

• Selanjutnya Save Template

Untuk melihat hasilnya: DEMO 

Geser mouse anda pada bagian bawah blog tersebut maka anda akan melihat bagian yang terangkat. Bagian tersebut bisa di isi berbagai macam widget Contoh Categori, Label, Link, Archives dll.

Note:

• Untuk menggunakan tutorial berikut harus mempunyai multi kolom dulu pada footer-nya
• Bagi yang belum punya, silahkan (Baca: Cara Membuat Multi Kolom Pada Footer)

Share on Google Plus

About Admin

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.