Tutorial Back To Top button di Blogskin






Hey hey there!! Kembali lagi di segmen Blogskin Tutorial..Kali ni jom kita belajar cara nak buat Button Back To Top pulak .

1.Firstly bukak Template Korang

2.Click F3 dan search </head>
.
3. Copy and paste code ini di bawah /head>





<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type='text/javascript' language='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 (1=top).
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 500]},
controlHTML: '<img onmousedown="event.preventDefault ? event.preventDefault() : event.returnValue = false" src="URL IMAGE"/>', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ center 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:'Fly To The Sky'})
.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>


4.Replacekan kan URL IMAGE dengan URL button bawah ni



http://1.bp.blogspot.com/-vDQ-zadNcw4/Tv1mD5PThfI/AAAAAAAAAeY/olpBvf1OKTs/s1600/TOP1.png



http://3.bp.blogspot.com/-QaSiYxdnBC0/Tv1mEvpXgyI/AAAAAAAAAeg/76T_gp3aXq0/s1600/top2.png

http://2.bp.blogspot.com/-ui0WVdjhMBQ/Tv1mFhP1rxI/AAAAAAAAAeo/INzdcotCfU4/s1600/top3.png


http://3.bp.blogspot.com/-zNYRWiDzb9I/Tv1mGvaq7sI/AAAAAAAAAew/7gH5PaFqhRI/s1600/top4.png



-kalau nak ambik pape,sila tinggalkan comment k-

113 comments:

  1. thanks diya . amek satu taw :D

    ReplyDelete
  2. saya ambil satu...=) thanks!

    ReplyDelete
  3. The Blue One thanks <3 it =D

    ReplyDelete
  4. Sy nak yang biru tu ye?
    Thank You!

    ReplyDelete
  5. saye nk yg pink boleh ?
    terima kasihh :D

    ReplyDelete
  6. Saya ambik satu. Thanky you akak :)

    ReplyDelete
  7. This comment has been removed by the author.

    ReplyDelete
  8. Akak, saya nak beri tutorial free untuk akak. This is what I discovered myself. :)

    Kalau nak buat ayat bergerak-gerak di welcome sidebar box, pergi kat template, cari ayat 'welcome' dekat welcome box contohnya 'Hello! Welcome to this blog. Replace this with your own words.' Cari ayat2 macam tu. Okey, camni eh saya tunjukkan:

    Hello! Welcome to this blog. Replace this with your own words.


    AYAT KORANG

    this is a really beautiful tutorial so, create it :D Harap menjadi okey!

    ReplyDelete
  9. ummu amekk satuu yee :) thanks3...

    ReplyDelete
  10. kita amek satu:))
    mcm ne nak follow blog awk ni...knp kita tkn ats tu tak leh??

    ReplyDelete
  11. Saya amek yang ni : http://2.bp.blogspot.com/-ui0WVdjhMBQ/Tv1mFhP1rxI/AAAAAAAAAeo/INzdcotCfU4/s1600/top3.png
    Terima Kasih Kak Diya :')

    ReplyDelete
  12. amek satuu yee kak . terima kasih kak diyaa comel :)

    ReplyDelete
  13. saye amek satu ye kak :3 tengs kak diya comel :D

    ReplyDelete
  14. amek satu yaa kak :3 tengs kak diya comel :D

    ReplyDelete
  15. Akak , nape saye buat tutorial ni , dye adi lebar pangjang sangat ~ , tolong ajar buat toturial dye macam mne nk bagi okay balik >? Plzz , tngok blog saye , http://alkisahnajwan07.blogspot.com/

    ReplyDelete
  16. menjadi. tapi tak keluar gmbar. then kat bwah sekali ade text yg pnjg2-.-'

    ReplyDelete
  17. ambik icon purple, thanks.. your tutorials help me a lot.. feel like wanna hugs youu :'D

    ReplyDelete
  18. Ambek datu tautau ? Btw , thnk's ntok tutorial nih ;)

    ReplyDelete
  19. syaza ambik satu tau kak diya :) tenkiuuuu !

    ReplyDelete
  20. thanks diya . semua tutor awak sgt membantu sy :)

    ReplyDelete
  21. nape tak leh !!! ke saya salah buat???????? BTW i take ONE

    ReplyDelete
  22. hye akak comel, sye ambk satu ye ..tengs kak !

    ReplyDelete
  23. kita amik satu tau. Thanks. Tutorial awak semua senang nak paham. Hehehe

    ReplyDelete
  24. saya ambik satu yg kaler biru tenkiu very much XD

    ReplyDelete
  25. darl, saye amik satuu :D thanks for the tutoo.

    ReplyDelete
  26. macammana nak masukkan? kite ambil satu yeH?susahnye

    ReplyDelete
  27. Sangat membantu . irah amik satu taw :D

    ReplyDelete
  28. boleh x sya nk minta kebenaran tuk copy url tu

    ReplyDelete
  29. thanks dear.ni lah tuto plg mnjadi aina prnah try ;) big hugg for you !

    ReplyDelete
  30. Nk share freebies n tutorial..nnti sye Creditkan

    ReplyDelete
  31. nak satu yea ^^ thanks for the tuto :)

    ReplyDelete
  32. AWK PUNYA SAYA PAKAI JADI ORG LAIN PUNYA SAYA PAKAI LANGSUNG TAK JADIK...TQ AWAK PUNYA TOTURAL AMAT BERGUNA BUAT SAYA

    ReplyDelete
  33. Terimakasih...:)

    http://andestory.blogspot.com

    ReplyDelete
  34. salam.. saya amek 1 ye.. yg merah tu.. hehe.. thanks..^_^

    ReplyDelete
  35. Hi akak , saya dah ambik satu auw auw xD thanks :*

    ReplyDelete
  36. menjadi.. thank for the tutorials and sya ambik satu kak :)

    ReplyDelete
  37. saye amik satu k ^^ thanks for this toturial :D

    ReplyDelete
  38. kite amek satu thanks a lot ! xoxo

    ReplyDelete

Hey hey there!! Do spread some loves up there.
Sorry kalau tak dibalas.