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



https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB-ULyO1NFZNxvlJGQJHtk3ZDPOM4egwptm-kH3BsSapnvOksQIITOO1c3aOf7SYSyqURqGl-aewMUQEpOCrngarPQmr_RR8aXf7GBqlu6BNTOfcDlG3b8D8zim7RCwBf-6ytHgCUwku4/s1600/TOP1.png



https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTU_EuT9R0yXN1-5bAxsmkRUby9JnRVHaleJYky6UonMrPqqnWsi_sPEXVvO2ezFaZJfBadqL0W3q6DlKfmS7-s3V3cZV1gczWJWBO7maL9BINweghLz3EyCYCI9HhZxwpJ88lpRbdnJU/s1600/top2.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1Bh8cV4ns3x-93WwlOcABex8aGBwDQsD2wHKTlxptYuztbuV2sB_wEReMwqYUKfsYs7dcMHmd8vjRd2nHzXQNudC1F71yvZv5zpxMCkGTU465KRKyP5sm7EqVfkw0Qff4oy0cMh0Y-N8/s1600/top3.png


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVFpOFmsh7HqkyUqDxApWlR-Y2nHxuB4fXXw1uoIM9pBTrs2li4q120LRqWAVNm-uj54VWtKA7UlPgz76-0sNUOGrX4Fua4qDzn8lot7JpzEiM76EAZQxH-T79y4ALz_60CWRtwHO5rEQ/s1600/top4.png



-kalau nak ambik pape,sila tinggalkan comment k-

125 comments:

  1. klau x de code 2 ???

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

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

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

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

    ReplyDelete
  6. 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
  7. mariah,thanks soo much dear!!

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

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

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

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

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

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

    ReplyDelete
  14. 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
  15. menjadi. tapi tak keluar gmbar. then kat bwah sekali ade text yg pnjg2-.-'

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

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

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

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

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

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

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

    ReplyDelete
  23. Thnaks so much akak . Love you . Muah

    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
  39. saya curi satu yaa, yg Hitam tu...

    ReplyDelete
  40. thanks for this useful tuto

    ReplyDelete
  41. jzzk for the tuto. Its really helpful

    ReplyDelete
  42. Banyak kali dah try nak buat top button tu. Semua tak menjadi. Bila ada akak punya tutorial, jelas and jadi sangat! Terima kasih kak ^^ Tak curi akak punya pun. Ambik orang lain punya. Apapun, pergi blog adik ya!

    http://mrscutiehannie.blogspot.com/

    ReplyDelete

What do you think? Leave a comment :)