Salam.
Rasanya sudah terlalu lama aku tidak mengarang tutorial untuk kaki blogger. Untuk tutorial lama, sila rujuk di tab 'Tutorial Blog'. Di sana telah aku senaraikan tutorial-tutorial yang sangat berguna untuk pengguna platform Blogger. Untuk pengguna platform Wordpress, rasanya di sini bukan tempat yang sesuai untuk kalian. Maaf. Lagipun saya bukan pengguna Wordpress. Jadi saya kurang berkemahiran.
Untuk kali ini, saya bawakan kalian kepada pengguna Javascript jQuery bagi 'Back To Top'. jQuery membolehkan setiap elemen di page blog anda kelihatan cantik, menarik, dan smooth. Sebagai contoh, slideshow untuk imej, imej pop-up (seperti yang saya gunakan sekarang), menu tab slideshow, dan pelbagai method lain lagi. Mungkin ini agak sukar kepada blogger yang tidak biasa.
Saya lihat tidak ramai blogger yang menggunakan jQuery untuk Back To Top mereka. Jadi saya sediakan tutorial ini untuk anda.
Back To Top amat berguna sekiranya satu-satu page anda terlalu panjang, terutamanya entry anda yang terlalu panjang. Pembaca blog anda akan skrol makin ke bawah untuk membaca artikel anda. Jadi, untuk skrol naik semula ke atas yang menjadi masalah kepada pembaca. Jadi, Back To Top membantu pembaca untuk kembali ke paparan paling atas.
Apa beza Back To Top jQuery dengan yang biasa?
Pertama; sila lihat gambar di bawah ini untuk lihat perbezaan (klik untuk perbesarkan):
Perhatikan kotak yang bertanda merah. Ini sebelum kita skrol page ke bawah.
Perhatikan kotak yang bertanda merah. Ini selepas kita skrol page ke bawah. Imej 'Back To Top' automatik muncul setiap kali mana-mana page di blog kita di-skrol ke bawah. Untuk pra-tonton (preview), anda boleh cuba di blog ini. Cuba skrol ke atas terlebih dahulu, kemudian skrol ke bawah sedikit demi sedikit.
Kedua; cuba klik imej 'Back To Top' saya. Ia akan skrol secara smooth hingga ke paparan paling atas. Tidak seperti method 'Back To Top' yang biasa. Method 'smooth scroll' inilah yang dinamakan method jQuery.
Menarik, kan?
Bagaimana cara untuk memasangnya?
1 - Copy kod di bawah.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script type="text/javascript" >var scrolltotop={ //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top). setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]}, controlHTML: '<img src="http://blog-host.googlecode.com/files/back_to_top.gif" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol" controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links state: {isvisible:false, shouldvisible:false}, scrollup:function(){ if (!this.cssfixedsupport) //if control is positioned using JavaScript this.$control.css({opacity:0}) //hide control immediately after clicking it var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto) if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists dest=jQuery('#'+dest).offset().top else dest=0 this.$body.animate({scrollTop: dest}, this.setting.scrollduration); }, keepfixed:function(){ var $window=jQuery(window) var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety this.$control.css({left:controlx+'px', top:controly+'px'}) }, togglecontrol:function(){ var scrolltop=jQuery(window).scrollTop() if (!this.cssfixedsupport) this.keepfixed() this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false if (this.state.shouldvisible && !this.state.isvisible){ this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0]) this.state.isvisible=true } else if (this.state.shouldvisible==false && this.state.isvisible){ this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1]) this.state.isvisible=false } }, init:function(){ jQuery(document).ready(function($){ var mainobj=scrolltotop var iebrws=document.all mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body') mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>') .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'}) .attr({title:'Scroll Back to Top'}) .click(function(){mainobj.scrollup(); return false}) .appendTo('body') if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text mainobj.togglecontrol() $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){ mainobj.scrollup() return false }) $(window).bind('scroll resize', function(e){ mainobj.togglecontrol() }) }) }}scrolltotop.init()</script>
2 - Pergi ke 'Dashboard', klik 'Design', klik 'Add a Gadget', dan pilih 'HTML/Javascript'.
3 - Paste kod yang telah anda copy tadi.
4 - Jika anda telah apply jQuery sebelum ini di blog anda, pastikan anda buang (delete) kod yang berwarna kuning.
5 - Jika anda ingin menggunakan imej 'Back To Top' anda sendiri, ubah kod yang berwarna hijau. Jika tidak, anda boleh guna imej yang telah saya link ke server googlecode saya.
6 - Klik butang 'Save' dan cuba preview blog anda.
Kini blog anda mempunyai jQuery Back To Top!
Selamat mencuba.
PERHATIAN! Aktiviti PLAGIAT (copy & paste) sesuatu artikel tanpa pengetahuan dan kebenaran penulis adalah satu aktiviti/perbuatan yang TIDAK BERMORAL!
