Cara Membuat Back To Top

 contoh Punya saya yang udah saya buat ato agan2 mau punya seperti itu.. silakan di tiru :)


Lihat pict :




Fungsi:

Memudahkan kita khususnya para pengunjung blog untuk kembali ke halaman atas, jadi kita tidak perlu men-scroll secara manual menggunakan mouse untuk kembali keatas, cukup dengan mengklik tulisan "Back To Top".

Buat teman-teman yang ingin membuatnya silahkan ikuti langkah-langkah di bawah ini:

1. Login akun blogspot,
2. Klik Design/Rancangan >> Edit HTML >> klik Expand Templates Widget,
3. Cari kode berikut: </head> lalu copy kan script jQuery di bawah ini persis berada di atas kode tadi:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>
4. Lalu lanjutkan dengan menaruh kode javascript di bawah ini persis di bawah script jQuery tadi:

<!-- Back To Top -->
<script src='https://sites.google.com/site/anggasonaanotherbestblog/javascript/back-to-top.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery.fn.topLink = function(settings) {
settings = jQuery.extend({
min: 1,
fadeSpeed: 200
}, settings);
return this.each(function() {
var el = $(this);
el.hide();
$(window).scroll(function() {
if($(window).scrollTop() >= settings.min)
{
el.fadeIn(settings.fadeSpeed);
}
else
{
el.fadeOut(settings.fadeSpeed);
}
});
});
};

$(document).ready(function() {
$('#top-link').topLink({
min: 300,
fadeSpeed: 500
});
$('#top-link').click(function(e) {
e.preventDefault();
$.scrollTo(0,300);
});
});
</script>
<!-- End Back To Top -->

5. Terus cari kode <body> dan gantikan dengan <body id='top'>



6. Lanjutkan dengan mencari kode ]]></b:skin> dan masukkan kode CSS di bawah ini di atas kode ]]></b:skin>

#top-link {display:none;font-weight:bold;font-family:tahoma;font-size:10px;width:70px;background:#000;color:#fff;text-shadow:1px 1px 1px #666;font-size:11px;position:fixed;right:-20px;bottom:150px;padding:5px;-moz-transform: rotate(90deg);-webkit-transform: rotate(90deg);-webkit-border-radius: 4px;-moz-border-radius: 4px; border-radius: 4px;}

7. Terus cari kode </body> dan masukkan kode HTML di bawah ini persis ada di atas kode </body>


<a class="no-click no-print" href="#top" id="top-link" rel="nofollow" title="Back to Top Page">Back To Top</a>

8. Jika sudah dikerjakan dengan benar, maka klik Save Templates.


Note:

1. Apabila sudah ada Script jquery di dalam blog maka script jQuery di atas tidak usah di masukkan (biar tidak double), lanjutkan saja dengan langkah selanjutnya,
2. Untuk merubah warna, posisi dan tulisan cek di di bagian tulisan yang saya beri warna HIJAU.


Diposting oleh Kidznapperz di 00.53
Label: ,
Kamis, 27 Januari 2011

0 komentar:

Posting Komentar

    Imagenya Dalam PERBAIKAN ^_^

Muzik



Video Gallery

Killing me inside from iwankitty on Vimeo.

  • Street Kings 2 Motor City Unrated 2011
    Plot: Motor City moves the action to Michigan and explores the world of dirty cops on the violent streets of Detroit. Marty Kingston (Liotta) is an undercover narcotics detective who is shot and barely survives a drug bust gone wrong to save the life of his partner. When his partner is killed by a masked gunman four years later, Marty must team up with the hotheaded homicide detective Dan Sullivan (Hatosy) to investigate a string of brutal cop murders and hunt down the cop killer. The investigation that ensues is shrouded in deception and loaded with plot twists that question the line between the rules of law and justice.
  • The Killing Jar 2010
    Plot: A stranger armed with a shotgun takes seven patrons hostage in a remote roadside diner. But as the body count increases, the desperate survivors discover that one of the hostages may be even more dangerous than their captor
    • Ballistica 2010 DVDRiP AC3 XViD-Feel-Free
      Plot: A man has been trained in a deadly form of hand-to-hand combatusing ballistics and firearms. He is one of the few Americans whohas perfected it, which makes him the CIA’s best weapon againstInternational Terrorism