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
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: Tips and Tricks Blogger, Widget
Tags: Blogger, tips dan trik
Related Articles :
- Inline MP3 Player (Easy way to embed Flash mp3 player in your blog) (45)
- Masonry Blogger template (23)
- Google Font API in blogger (17)
- Accordion Template for Blogger (23)
- Table of Contents for Blogger new style (45)
- The Best Accordion for Blogger user (129)
- Numbered Page Navigation For Blogger New Script (219)
20 Responses to “Animation jquery Dock footer for Blogger”
Leave a Reply
Categories
-
Recent Posts
My Twitter
- Check out the spots available on abu-farhan.com over at @buysellads http://bsa.ly/4kv about 3 months ago from Power Twitter
- Make Your Own Bookmarklets With jQuery http://bit.ly/aabeNC about 9 months ago from Snaptu
- Adobe Fireworks: Is It Worth Switching to CS5? http://bit.ly/bb1koh about 9 months ago from Snaptu
- HTML5 And Flash: Why It’s Not A War, And Why Flash Won’t Die http://bit.ly/ciy6u6 about 10 months ago from Snaptu
- Top 50 Web Graphics, Admin Skins and Scripts to Accelerate Development http://bit.ly/bHUole about 10 months ago from Snaptu
Archives
Blog Catalog
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 .
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
maaf mau nanya plugin wordpress buat repply comment kaya diatas pake apa yah ??
adakah tutorialnya ??
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
Asalam O Alaikum
Please post this in english too..
thanx
Asalam O Alaikum
Please Post this tutorial in English..
thanks..
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.
tutornya keren banget..
bisa dicoba nih.. :D
makasih om tutorialnya
tapi kenapa pas aku coba kok ga jalan pada halaman mukanya..
tapi klo di halaman berikutnya baru bisa
wah cara copy dari blognya gimana ya mas??
saya uda coba mencari tapi ga ketemu ne mas. mohon bantuannya neh. trima kasih
Coba ikuti dari Kang rohman aja http://kolom-tutorial.blogspot.com/2007/11/tips-membuat-multi-kolom.html , masukkan pada bagian Animasinya
kang abu emang keren atu….
ada FB gak kang
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
wah maaf udah lupa dulu ambil dari mana, coba aja copy langsung dari blog ku aja html dan css nya
nice info mas, bisa ngga tampilannya seperti yg mas punya titlenya teratur/rata tengah, thanks sebelumnya
Cari aja footer dari template lain copy isi dan css nya Insya Allah bisa kayak itu. saya juga pake footer theme lain.
kalo buat j-query yang di sidebar gimana y abu..?
koq gak diposting artikelnya?? =)
wah belum sempat, nantikan aja di http://www.bloggertuts.com disana aja nanti postingnya
nah yg ini blon ada komentarnyah nih…xixixi…yg penting koment ah…hohohooh JQuery emg asik (bagi yg ngerti), q nggak ngerti BOS :(
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