Sedikit Info Seputar
Cara Mudah Memasang Tombol Back to Top Smooth di Blog
Terbaru 2017
- Hay gaes kali ini team Free Template BLogspot.Com, kali ini akan membahas artikel dengan judul Cara Mudah Memasang Tombol Back to Top Smooth di Blog, kami selaku Team Free Template BLogspot.Com telah mempersiapkan artikel ini untuk sobat sobat yang menyukai Free Template BLogspot.Com. semoga isi postingan tentang
Artikel desain,
Artikel tips trik blogging,
Artikel Widget Blog, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul:
Berbagi Info Seputar
Cara Mudah Memasang Tombol Back to Top Smooth di Blog
Terbaru
link: Cara Mudah Memasang Tombol Back to Top Smooth di Blog
Berbagi Cara Mudah Memasang Tombol Back to Top Smooth di Blog Terbaru dan Terlengkap 2017
Ada 2 jenis tombol back to top. Yang pertama menggunakan perintah # (hastag) (saya pernah membahas tombol back to top dengan hastag sebelumnya), dan yang kedua menggunakan JavaScipt. Perbedaan diantara keduanya adalah efek yang dihasilkan. Pada tombol back to top pertama, efek yang dihasilkan cenderung kaku. Sedangkan, pada model yang kedua, saat tombol di-klik akan terlihat efek scroll yang lembut. Jika Anda ingin melihat efek tersebut, klik link berikut :
Berikut ini langkah – langkah memasangnya :
1. Login ke Blogger.com, lalu masuk ke Tata Letak.
2. Pilih Tambahkan Gadget, lalu pilih HTML/Javascipt.
3. Copy dan pastekan kode berikut (pada window yang muncul)
<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="Ganti dengan url gambar back to top" />', //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:'Balik Ke Atas'})
.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. Kosongkan isian Judul, dan, klik Simpan.
5. Buka blog Anda untuk melihat hasilnya.
Catatan :
1. Anda dapat mengganti gambar tombol back to top, dengan cara mengganti url yang berwarna merah. Pilih salah satu gambar dibawah ini, dan salin url-nya untuk menggantikan url yang berwarna merah. Atau, Anda dapat mencarinya di Iconfinder dan Google.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT2JXTCN1l2-gY_7J1ZtCh1cPQdyVvytp40sAsV7moIPDovbCCV8L2N-AffiTcj0iHJsqdwu2NoajrJVSRLioaAYkPQY31Z-7meMThtbSOomhAxflN76dnkn4G_jWy1t_m-n4-8vMJ5YY7/s1600/back.to.top.5.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWG4P6p8w8LLgfRgOUrbxk51K5nQwGt-OX08PCUhqLMwcKg2g58QTQA1l81ZcwW5_3XZs5sXSssOly7LarshFKeOJiX72DelMESXqkl6twIEBohQCjFKus8ekHCSGQxvhJfS8HYKBU4Pzu/s1600/back.to.top.2.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFKSWvaQ6UdyTO6KkgURUspCyG6bs0onWoWJgD1OnIGCdDmfL6EHtzsXTSr2x2tCoswpaKWEZEyUHVTkV48kIHVFQJ69Cwct-NjKRewHU-6IcRFJE_eIBXZwRV90FFE6xuiLyXT1VNSn8B/s1600/back.to.top.1.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmkACm1a7i2lRoWuaZvIApdJN4JeM51XRww0zeVl-u0V0iXj3RyX49ywrF2qOj8clYPoKH1mDvyNq8-rBrP8V_39t_OH0IVEkn_VwvQEH6gdTHlQcgeid9aGwMbudx_MGMKhPMmAVP0QE/s1600/back+to+top+green.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlKakQYK67QTTLCz4SN2kdOw0qUFl_KdBYE7meuqVUvaEBJ1dNzMt2xUpdRdraK5EGPCv7X2liFfRXBK7fpDW88GlqviPo0Tna6EZGhL8IJZQeZugvnoQuuodJPmuQYOVJjsDqA4wHUgk0/s1600/back.to.top.4.png
2. Hapus script yang berwarna ungu, jika blog Anda telah menggunakan JQuery. Untuk mengetahui, apakah blog Anda telah menggunakan JQuery, serta berapa versinya, silahkan klik disini. Jika Anda menggunakan JQuery dibawah versi 1.3.2, klik disini untuk mengupdatenya. Widget ini tidak akan berfungsi jika blog Anda menggunakan JQuery dibawah versi 1.3.2. Jika tombol back to top tidak muncul, coba kembalikan script yang berwarna ungu ini.
3. Ganti tulisan Balik Ke Atas menjadi tulisan yang Anda inginkan. Tulisan ini akan tampil saat pointer mouse diletakkan diatas tombol back to top.
3. Ganti tulisan Balik Ke Atas menjadi tulisan yang Anda inginkan. Tulisan ini akan tampil saat pointer mouse diletakkan diatas tombol back to top.
Bagaimana? Mudah bukan? Selamat mencoba, dan salam Blogger! Tolong pula tambahkan saya ke lingkaran Anda di Google +, dan share artikel ini. Terima kasih!
Itulah sedikit Artikel Cara Mudah Memasang Tombol Back to Top Smooth di Blog terbaru dari kami
Semoga artikel Cara Mudah Memasang Tombol Back to Top Smooth di Blog yang saya posting kali ini, bisa memberi informasi untuk anda semua yang menyukai Free Template BLogspot.Com. jangan lupa baca juga artikel-artikel lain dari kami.
Terima kasih Anda baru saja membaca Cara Mudah Memasang Tombol Back to Top Smooth di Blog