Tuesday, February 16, 2010

Dock Footer JQuery

Geser mouse anda pada bagian bawah blog tersebut maka anda akan melihat bagian yg terangkat. Bagian tersebut bisa diisikan macam2, Contoh Categori, Label, Link, Archives dan lain2, Apabila isi bagian tersebut berupa Widget jangan lupa mengkopinya mulai dari bagian.. <b:section class='docksectclass' id='docksect' preferred='yes'> dengan memberi nama class dan id yg berbeda (class bisa diberikan sama dg contoh tapi ID wajib berbeda karena Id hanya satu dalam satu xml). Footer tersebut akan tetap di bawah walaupun kita scroll mouse kita, baiklah kita mulai cara membuat footer tersebut!!!
  1. Pertama masuk kebagian Edit HTML (Tata Letak - Edit HTML).
  2. Paste bagian Style berikut ini tepat sebelum tulisan ]]></b:skin>.
  3. /*untuk dock bottom */ #fake-body { overflow:auto; z-index:1; } #dock { background:#ccc; height:200px; z-index:100; width:100%; }
  4. Kemudian paste script berikut ini sebelum tulisan </head>.
  5. <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 $(document).ready(function() { //Transition you want var easing_type = 'easeOutBounce'; //The default height for the dock (on 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 = $('#dock').height(); //Fake body height var body_height = $(window).height() - default_dock_height; //Set the size of #fake_body $('#fake-body').height(body_height); //Set the CSS attribute for #dock $('#dock').css({'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 $(window).resize(function () { //Grab the updated height/top updated_height = $(window).height() - default_dock_height; //Set the updated height for #fake_body and top for #dock $('#fake-body').height(updated_height); $('#dock').css({'top': updated_height}); }); //The main event for the dock bottom menu $('#dock').mouseover(function () { //Recalculate expanded height (always get the latest height), in case user has resized the window expanded_height = $(window).height() - expanded_dock_height; //Animate the height change, set the height to expanded_dock_height and set the top value as well $(this).animate({'height':expanded_dock_height,'top': expanded_height},{queue:false, duration:800, easing: easing_type}); }).mouseout(function () { //Recalculate default body height (always get the latest height), in case user has resized the window body_height = $(window).height() - default_dock_height; //Animate the height change, set the height to default_dock-height and set the top value as well $(this).animate({'height':default_dock_height,'top': body_height},{queue:false, duration:800, easing: easing_type}); }); }); </script>
  6. Kemudian paste html berikut ini kesebelum </body>
  7. <div id='dock'> <!-- Put your dock in this section --> <p><a href="http://www.abu-farhan.com">Abu Farhan</a></p> <p><a href="http://www.radiorodja.com">Radio Rodja</a></p> <p><a href="http://www.hang106.or.id.com">Radio Hang</a></p> </div>
    Link di atas anda ganti sesuai keinginan anda, bisa juga diisi Widget yg bisa di ganti2 isinya kapan2 atau diisikan footer yg sudah ada CSS nya karena ada error pada IE posisi dari footernya berubah maka div di atas di pindah ke div Outer wraper (tepat sebelum </DIV>pada outer-wraper) , berikut posisinya
    <div id='dock'> <!-- Put your dock in this section --> <p><a href="http://www.abu-farhan.com">Abu Farhan</a></p> <p><a href="http://www.radiorodja.com">Radio Rodja</a></p> <p><a href="http://www.hang106.or.id.com">Radio Hang</a></p></div></div><!--end of outer-wrapper-->
    Dengan mengganti width dari style Dock disesuaikan dg width dari outer wraper 660px untuk contoh yg ada sebelumnya bernilai 100%
    /*untuk dock bottom */ #fake-body { overflow:auto; z-index:1; } #dock { background:#ccc; height:200px; z-index:100; width:660px; }
nah semoga bermanfaat ya.. selamat mencoba..

0 komentar:

Post a Comment

saran, komentar dan kritikan anda sangat berharga buat saya, terima kasih.