Bismillah, Alhamdulillah

Skip to Content

Animation jquery Dock footer for Blogger

July 7th, 2009

Bismillah

Use of jquery now more widely to enhance your Web site or Weblog, here’s a tutorial to use jquery Dock taken from this tutorial jQuery Dock Menu Tutorial Revisit – Dock at Bottom

You can see the result here

Demo

Drag your mouse at the bottom of the blog then you will see part of footer lifted

In that part you can put many think

If that part is widget in blogger, don’t forget to copy from this part

<b:section class='docksectclass' id='docksect' preferred='yes'>

Give class and id with different name (class can use same with the example but the id have to different in one xml)

Follow this tutorial :

In blogger dashboard choose “Edit HTML” (Layout –> Edit HTML)

Paste this style before 

]]></b:skin>


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

and than paste this script before 

</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
$(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>

and than paste this html before 

</body>


<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>

Above links that I used, you can change with anythink that you want. You can add widget also thta part.

Because error in IE the position of the footer we have to move at div outer wraprer before </DIV> , 


<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-->

Change the width of Dock base on Outer wrapper. for this example use 660px


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

Categories: Blogger Tricks, Widget

Tags: ,

Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or Comments RSS Feed

Donate towards my web hosting bill!

Trackback
Leave a response

30 Responses to “Animation jquery Dock footer for Blogger”

  1. slacker meaning says:
    December 15, 2011 at 7:50 am

    Hello there you big blog owner!What’s up? :p I’m happy that you are still around “the internet” :P How did you pass the latest Google update? It seems that your blog is one of the strongest in the current SERP’s! Keep that up and don’t forget to msg me when you catch some free time :) Hope to see you soon!

    Reply
  2. 5 dumb mistakes says:
    December 8, 2011 at 7:04 pm

    Your site is pretty cool to me and your subject matter is very relevant. I was browsing around and came across something you might find interesting. I was guilty of 3 of them with my sites. “99% of website owners are doing these 5 mistakes”. http://tinyurl.com/d8r7ejo You will be suprised how fast they are to fix.

    Reply
  3. ijobunglon says:
    November 14, 2011 at 2:55 pm

    bagus infonya, tp bikin lambat ga ?

    info:
    kalo mau pasang iklan di ijobunglon.blogspot.com aja
    mumpung lagi PROMO PASANG IKLAN GRATIS 2 minggu

    Reply
  4. Breana says:
    September 16, 2011 at 4:49 am

    Why do you exagerate proper right here? Its not so complicated after you know the subject appropriately.

    Reply
  5. Rachelle Tazelaar says:
    June 23, 2011 at 8:38 pm

    I can create images on photoshop and work has asked me to create a html header for their email newsletter ( that is one made from an image) How do I do this please? Thanks..

    Reply
  6. Naida Wolcott says:
    June 22, 2011 at 4:49 pm

    What I have tried so far is: copy pasting from googledocs to Notes to wordpress, and copy pasting from googledics into HTML tab in wordpress. Neither tries retained the boldface text. Thanks in advance!.

    Reply
  7. Micreipse says:
    June 20, 2011 at 7:23 pm

    Thanks for your marvelous posting! I definitely enjoyed reading it, you are a great author.I will remember to bookmark your blog and may come back someday. I want to encourage one to continue your great writing, have a nice day!

    Mate@ Bella

    Reply
  8. h3ri says:
    February 2, 2011 at 8:14 pm

    bisa di gunakan di wordpress ga ya ?

    Reply
  9. story says:
    November 1, 2010 at 7:06 pm

    I’ve seen the demo, I like this tutorial. hopefully I can practice it.

    Reply
  10. CrudiS says:
    August 4, 2010 at 3:28 pm

    how align the dock to center ?

    Reply
  11. Mohamed says:
    July 17, 2010 at 10:36 am

    THx Alot Bro .

    can u make it like that

    http://danmoldovan.blogspot.com/2010/07/automotive-video-inc-youtube-channel.html

    plz contact me if you did it .

    Reply
  12. bella says:
    May 24, 2010 at 2:54 pm

    hi…. what if we want to make two docks in footer in one page. so it will only show up if we hover in each dock. do u understand what i mean?

    thx in advanced

    Reply
  13. ahmed says:
    May 1, 2010 at 10:27 pm

    maaf mau nanya plugin wordpress buat repply comment kaya diatas pake apa yah ??

    adakah tutorialnya ??

    Reply
  14. sman1 gangga lombok utara says:
    April 13, 2010 at 2:54 pm

    hay gue baru di dunia blog,,, bagus skali blogya,,, salam kenal.. sahabat baru,,, komen jugaya biar tambah akrab,,, dari guru sman1 gangga… ni alamatnya… http://www.sman1ganggalombokutara.blogspot.com

    Reply
  15. Munir Shah says:
    February 21, 2010 at 7:08 pm

    Asalam O Alaikum

    Please post this in english too..

    thanx

    Reply
  16. Munir Shah says:
    February 21, 2010 at 7:06 pm

    Asalam O Alaikum

    Please Post this tutorial in English..

    thanks..

    Reply
  17. WareHack™ Admin says:
    February 4, 2010 at 10:26 pm

    Assalamualaikum….
    akhi… saya cukup berminat dengan entry anta berkaitan Jquery Dock Menu ini… Namun saya paling berminat dengan Dock Menu yang ada dilaman anda ini… boleh kah saya dapatkan code nya….. email saya di: warehack@gmail.com syukran akhi.

    Reply
  18. asal-klik says:
    January 2, 2010 at 5:16 am

    tutornya keren banget..
    bisa dicoba nih.. :D

    Reply
  19. curuupkami says:
    December 24, 2009 at 8:59 pm

    makasih om tutorialnya
    tapi kenapa pas aku coba kok ga jalan pada halaman mukanya..
    tapi klo di halaman berikutnya baru bisa

    Reply
  20. hawdy says:
    December 22, 2009 at 9:36 pm

    wah cara copy dari blognya gimana ya mas??
    saya uda coba mencari tapi ga ketemu ne mas. mohon bantuannya neh. trima kasih

    Reply
  21. hawdy says:
    December 22, 2009 at 6:13 pm

    mas makasih wat dock nya neh. keren bgt. Btw tolong kasih tau dong mas pake footer dri template apa ya? soalnya saya mau yg teratur n rapi kayak mas punya. thx ya

    Reply
  22. evan says:
    November 9, 2009 at 9:52 pm

    nice info mas, bisa ngga tampilannya seperti yg mas punya titlenya teratur/rata tengah, thanks sebelumnya

    Reply
  23. tianz88 says:
    October 19, 2009 at 11:06 pm

    kalo buat j-query yang di sidebar gimana y abu..?

    koq gak diposting artikelnya?? =)

    Reply
  24. BEBEN says:
    September 30, 2009 at 6:44 am

    nah yg ini blon ada komentarnyah nih…xixixi…yg penting koment ah…hohohooh JQuery emg asik (bagi yg ngerti), q nggak ngerti BOS :(

    Reply
    • admin says:
      September 30, 2009 at 7:08 am

      Ia ya ini ga ada komentarnya, mungkin karena bahasa indonesia, dan ribet ngaturnya, ada org dari yunani yg coba tapi akhirnya dihapus lagi agak susah ngaturnya emang, apalagi masalah sama IE

      Reply

Leave a Reply

Copyright 2009 - 2010  Choen