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

Abu Farhan

I'm an Owner of this blog and it's always been a passion of mine to write about Blogger. I like to make original script for blogger. I also run the awesome Website at The Best Lists.

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

35 Responses to “Animation jquery Dock footer for Blogger”

  1. "advice" says:

    “advice”

    “[...]o wireless headphones are the best because they do not have those bulky wires iy[...]“

  2. expressen says:

    expressen…

    [...]o I discovered your blog site web site on the search engines and appearance a eo[...]…

  3. dub-step says:

    ways in which a subject may be…

    presented to viewers, and hence, his experience can only be of significant help. if you have a blog to deal with the expert deals with a good number of them day in and day out. but of course it is his…

  4. people everywhere. for others it plays a…

    critical roll in creating income streams.take for example the rapid growth of internet writing jobs. these kind of jobs are gaining in popularity. many people working within the writing industry are switching to these online jobs and taking advantage o…

  5. Interesting Blog…

    [...]below you’ll find the link to some sites that we think you should visit[...]…

  6. I like this post, enjoyed this one regards for posting.

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

  8. ijobunglon says:

    bagus infonya, tp bikin lambat ga ?

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

  9. Breana says:

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

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

  11. 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!.

  12. Micreipse says:

    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

  13. h3ri says:

    bisa di gunakan di wordpress ga ya ?

  14. story says:

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

  15. CrudiS says:

    how align the dock to center ?

  16. Mohamed says:

    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 .

  17. bella says:

    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

  18. ahmed says:

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

    adakah tutorialnya ??

  19. sman1 gangga lombok utara says:

    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

  20. Munir Shah says:

    Asalam O Alaikum

    Please post this in english too..

    thanx

  21. Munir Shah says:

    Asalam O Alaikum

    Please Post this tutorial in English..

    thanks..

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

  23. asal-klik says:

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

  24. curuupkami says:

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

  25. hawdy says:

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

  26. hawdy says:

    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

  27. evan says:

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

  28. tianz88 says:

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

    koq gak diposting artikelnya?? =)

  29. BEBEN says:

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

    • admin says:

      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

Leave a Reply


seven − = one

Dbestlists Dbestlists

Copyright 2009 - 2010  Choen