Malam yang sunyi gak bisa tidur, dari pada nganggur saya posting ajah biar blog ini ada isinya, oke kali ini saya akan bikin Back to Top, apa maksudnya Back to Top...? yaitu navigasi yang ada dibawah apabila di klik maka secara tidak sengaja dan memang sengaja mungkin itu kembali kebagian halaman paling atas, kalau mau lihat demonya coba sobat lihat blog ini, ada navigasi kecil dibagian kanan paling bawah klik aja, bagaimana balik keatas gak..? kalau balik lanjutin bacanya soale kalau gak mau bali keatas berarti tips ini gak benar dong, iya gak he..he...!
Oke langsung saja ini cara membuatnya, oiya jangan lupa bahan-bahannya, seperti secangkir kopi sepiring kacang tekur dan beberapa rokok, kalau gak suka ngerokok bisa isap jempol ajah he...he...! becanda.
Untuk Blogger.
Pertama-tama masuk keakun blogger
Layout / Tata letak Edit Html dan janga lupa centang Expan winget Template
Lalu masukkan kode dibawah ini diatas kode:</head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(function(){
$('a[href*=#top]').click(function() {
if (location.pathname.replace(/^//,'') == this.pathname.replace(/^//,'')
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body').animate({scrollTop: targetOffset}, 1000);
return false;
}
}
});
});
//]]>
</script>
[Peringatan..!]
Bagi yang templatenya sudah ada kode jquery nya seperti dibawah ini, hapus saja alias tidak usak dipasang, soale entar kalau dobel bisa gak jalan semua jquery nya dengan alasan dia cemburu dan ngambek karena di duakan kalau gak salah menurut A'a Gim poligami.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
Sekarang masuk ke tahap dua yaitu memasukkan kode CSS untuk navigasinya sekarang masukkan kode dibawah ini di atas kode:]]></b:skin>
#backtop{bottom:10px;position:fixed;right:10px}
#backtop img{border:solid 1px #FFF}
#backtop a:hover img{border:solid 1px #ffcc00}
Setelah itu mari kita minum kopi dulu, soale capek, kalau capek tapi tetep dilanjut bisa salah entar, kalau udah selesai ngopinya ayo lanjut maneh, Sekarang cari kode ini:<body> Lalu hapus dan ganti dengan kode dibawah ini :
<body id='top'>
<div id='backtop'>
<a href='#top' title='Back To Top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ9xe5nUDUhPBr_i1q-0Vp4JcJDaRvkT1eMN3r5EsCTeCtYFeZIfxs1B3FLaqwKnhptM1D0rbacJCJXDd-j4T-td1BBtp8vAo4XwYknfpd6KuHaQ4dILg7BH1gDvymOHytTe9UjzAAZJq6/'/></a>
</div>
Sepertinya udah capek yah, yaudah sekarang selesai ajah, dan simpan templatenya di kantong sobat biar hasilnya tersimpan lalu sekarang coba lihat hasil dari kerja keras sobat tadi.
Semoga ini bisa berguna dan bermanfat untuk kalian semuanya yang mempraktekkannya, bila ada yang mau menambahkan cara ini silahkan tinggalkan komentar entar kita bahas sama-sama, biar saya banyak tau, soale masih newbie kok.
1 comments:
kepada admin http://ilmu-reparasi-komputer.blogspot.com .
tolong yah artikel yang kopasan dari http://www.niamblog.co.cc di kasih sumbernya. soalnya banyak banget. makasih
Post a Comment