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

Contoh spoiler Anu Ka II

Contoh spoiler Anu Ka II

Cekidot







Silakan disimak dan dicermati :



Di sini lu bisa memasukkan teks, kode, atau script
lu  juga bisa memasukkan image di sini

Klik button "Tutup" untuk menghilangkan area ini





Mau scriptna ?

Mau ?

Klo mau we kasih ni HARATIS wakwakwak

Yeuhh dari pada lu nangis gak dapetin script,mening gw kasih aja dah.


<div style="text-align: center;">

<div class="button-spoiler">

<input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka Lagi'; }" type="button" value="Contoh Penggunaan Spoiler" /></div>

<div class="spoiler">

<div style="display: none;">

<div style="border: 3px inset #333; font-size: small; padding: 10px; text-align: left;">

Silakan disimak dan dicermati :

<br />

<ul>

<li>Di sini lu bisa memasukkan teks, kode, atau script</li>

<li>lu juga bisa memasukkan image</li>

<center><img alt="U Comments I Follow" border="0" src="http://i647.photobucket.com/albums/uu191/ariamsi/Icon%20Blog/follow2.jpg" /></center>

<li>Klik button "Tutup" untuk menghilangkan area ini</li>

</ul>

</div>

</div>

</div>

</div>



Ganti warna Hejo Sakarep Anjeun.

Cara Membuat Spoiler di Blogger

CONTOH SPOILER NA:

Cuman contoh aja mang :D

Okok Klo Ente Mau AinK Kasih Code'a Copy Wae Langsung Kode Di Handap Ieuu



<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;">
<b>Judul Spoiler</b>: <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Open" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">


Masukkan isi spoiler didieu, dapat diisi gambar, kode html, paragraf dan lain2


</div>
</div>
</div>


Keterangan : Warna Hejo Ganti Sesuai Kahayang Maraneh.