jQuery Dock Footer

Langkah 1

Login ke Blogger

Langkah 2

Masuk ke "Tata Letak - Edit HTML"

Langkah 3

Jangan lupa klik "Expand Template Widget"

Langkah 4

Cari kode dibawah ini:

]]></b:skin>

Langkah 5

Masukan (copy paste) kode dibawah ini diatas kode pada langkah 4:

#fake-body { overflow:auto; z-index:1; }

#dock { background:#ccc; height:200px; z-index:100; width:660px; }

Langkah 6

Cari kode dibawah ini:

</head>

Langkah 7

Masukan (copy paste) kode dibawah ini diatas kode pada langkah 6:

<script src='http://yandex.st/jquery/1.5.1/jquery.js' type='text/javascript' />
<script src='http://yandex.st/jquery/easing/1.3/jquery.easing.js' type='text/javascript'/>
<script>
$(document).ready(function() {
var easing_type = 'easeOutBounce';
var default_dock_height = '20';
var expanded_dock_height = $('#dock').height();
var body_height = $(window).height() - default_dock_height;
$('#fake-body').height(body_height);
$('#dock').css({'height': default_dock_height, 'position':'fixed', 'top': body_height});
$(window).resize(function () {
updated_height = $(window).height() - default_dock_height;
$('#fake-body').height(updated_height);
$('#dock').css({'top': updated_height});
});
$('#dock').mouseover(function () {
expanded_height = $(window).height() - expanded_dock_height;
$(this).animate({'height':expanded_dock_height,'top': expanded_height},{queue:false, duration:800, easing: easing_type});
}).mouseout(function () {
body_height = $(window).height() - default_dock_height;
$(this).animate({'height':default_dock_height,'top': body_height},{queue:false, duration:800, easing: easing_type});
});
});
</script>

Silakan disimak dan dicermati :

• Klik button "Tutup" untuk menghilangkan area ini

Langkah 8

Cari kode dibawah ini:

</body>

Lalu scroll sedikit keatas sehingga ketemu kode dibawah ini:

 
</div><!--end of outer-wrapper-->

Jika tidak ditemukan cukup cari kode </div> yang pertama dari bawah.

Langkah 9

Masukan kode dibawah ini diatas kode pada langkah 8 (yaitu </div> pertama dari bawah):
<div id='dock'>

<!-- Masukan kode dock footer disini -->

<p><a href="http://agungcreator.blogspot.com/">Blogger Tune-Up</a></p>
</div>

Langkah 10

 Simpan Template dan Preview blog

Keterangan:
Perhatikan pada langkah 5, nilai 660 pada kode width:660px; silahkan diubah untuk menentukan lebar dari dock footer dan atau disesuaikan dengan Outer Wrapper. Ubah pula nilai 200 pada kode height:200px; untuk menentukan tinggi dock pada saat tidak diaktifkan.
Perhatikan pada langkah 8, yang dicari adalah kode </div> dari outer wrapper, sebenarnya diatas kode </body> juga bisa, tetapi mengalami error tampilan bagi browser yang memiliki versi rendah.
Perhatikan langkah 9, masukan kode yang kita inginkan, jika kita akan menggunakan kode yang sudah ada, silahkan anda perhatikan kode-kode template semisal; Lowerbar, Categori, Label, Link, Archives, Comments dan lain sebagainya. Setelelah itu copy kode tersebut mulai dari kode dibawah ini:

<b:section class='lowerbar' id='lowerbar14' preferred='yes'>
<!-- Kode-kode yang mengikutinya -->
</b:section>

Demo jQuery Dock Footer Klik Disini
Source : BLOGGER TUNE-UP