Cara Membuat Tombol Back to Top (Kembali ke Atas) pada Blog ~ Aan Channel

Membuat tombol kembali ke atas (back to top) pada blog akan mempermudah pengunjung terutama yang menggunakan handphone (mobile) dan juga pada artikel yang sangat panjang. Dengan adanya tombol back to top pengunjung yang ingin kembali keatas tampilan blog karena ingin ke navigasi blog yang biasanya terdapat diatas ataupun karena ingin membaca artikel yang terdapat diatas akan lebih mudah dengan hanya mengklik atau tap pada tombol back to top tersebut.

Dalam membuat tombol back to top pada blog ada beberapa cara alternatif yang mungkin sudah banyak tutorialnya pada pencarian google. Namun disini saya akan memberikan dua alternatif yang keduanya dengan cara menambahkan pada widget blog. Sebenarnya bisa dimasukan pada HTML namun untuk menyimpannya cukup rumit maaf untuk seorang pemula. Maka dari itu saya akan memberikan cara dengan hanya menambahkan script pada widget blog.

Membuat Tombol Back To Top di Widget Blog

Sesuai yang saya jelaskan dalam membuatnya ada dua alternatif yang akan saya jelaskan disini dan perbendaanya hanya pada script jQuerinya saja. Disini pun saya akan menjelaskan cara menggunakan dengan memakai gambar atau icon awesome untuk menjadi tombol pada back to top tersebut. Langsung saja simak penjelasan berikut.

Sebelum masuk ke cara pertama dalam membuat back to top, pastikan terlebih dahulu apakah template blog Anda sudah terdapat javascript jQueri seperti berikut. Apabila belum maka simpan script dibawah kode <head>, kemudian Simpan template.

#1 Membuat Tombol Back To Top di Blog

Pertama Anda harus dalam keadaan login pada Blogger.
Pada Dashboard Blogger Anda masuk ke "Tata Letak" lalu klik "Tambahkan Gadget" > "HTML/JavaScript".
Kemudian masukanlah kode script berikut tanpa menggunakan judul pada "HTML/JavaScript" tersebut pada widget sidebar ataupun dimanapun.

Script 1#

HTML

.back-to-top{background:#ff6550 none repeat scroll 0 0;border:medium none;border-radius:50%;bottom:10px;cursor:pointer;display:none;height:50px;opacity:1;position:fixed;right:10px;text-align:center;width:50px;}

.back-to-top:hover{box-shadow:1px 2px 3px 0 #666;}

</style>

<div class="back-to-top">Ganti Dengan Tombol Back To Top yang Anda Inginkan</div>

/***www.bloggars.com-style***/

jQuery(document).ready(function() {

var offset = 1000;

var duration = 700;

jQuery(window).scroll(function() {

if (jQuery(this).scrollTop() > offset) {

jQuery('.back-to-top').fadeIn(duration);

} else {

jQuery('.back-to-top').fadeOut(duration);

}

});

jQuery('.back-to-top').click(function(event) {

event.preventDefault();

jQuery('html, body').animate({scrollTop: 0}, duration);

return false;

})

});

</script>

Catatan: Ganti kata yang berwarna merah dengan tombol yang Anda inginkan yang akan diberikan dalam artikel ini di penjelasan bawah.

4. Klik "Simpan" apabila Anda sudah memasukan untuk tombol yang diinginkan.

#2 Membuat Tombol Back To Top di Blog

Alternatif kedua ini bisa Anda lakukan apabila script diatas tidak berhasil. Sama halnya seperti cara pertama diatas namun perbedaanya hanya pada scriptnya saja.

Anda harus dalam keadaan login pada Blogger.
Pada Dashboard Blogger Anda masuk ke "Tata Letak" lalu klik "Tambahkan Gadget" > "HTML/JavaScript".
Setelah itu masukan kode script berikut.

Script 2#

HTML

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:1000, scrollto: 0, scrollduration:700, fadeduration:[500, 100]},

controlHTML: 'Ganti Dengan Tombol Back To Top yang Anda Inginkan', //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>

Catatan: Ganti kata yang berwarna merah dengan tombol yang Anda inginkan yang akan diberikan dalam artikel ini di penjelasan bawah.

Kemudian klik "Simpan" apabila sudah memilih tombol yang Anda inginkan.

Kumpulan Tombol Back To Top Design BloggARs

Seperti yang saya jelaskan pada catatan kedua script diatas yaitu mengenai tombol yang akan Anda pasang pada blog sebagai tombol back to top. Ada dua alternatif juga yang akan saya berikan dalam tombol back to top ini antara lain sebagai berikut.

1. Tombol Back To Top Menggunakan Icon Awesome

Saya akan memberikan beberapa tombol kembali keatas dengan memanfaatkan icon awesome. Namun sebelumnya pada blog Anda harus terdapat stylesheet css font awesome dengan disimpan pada HTML blog, simpanlah script berikut dibawah kode <head>.

Setelah terdapat stylesheet css font awesome diatas, pilihlah beberapa icon dibawah untuk dijadikan tombol back to top dengan meyimpan scriptnya untuk menggantikan pada kata yang berwarna merah.

#1 Script Icon

Catatan:

Script Icon sangat cocok untuk back to top dengan Script 1#. tetapi tidak salah apabila ingin memasukannya pada Script 2#.

Masukanlah Script Icon pada Script 1# untuk menggantikan kata yang berwarna merah tersebut.

Apabila icon ingin kotak (tidak bulat) hapus css dengan nana "border-radius: 50%;" pada Script 1#.

2. Tombol Back To Top Menggunakan Gambar

Dalam membuat tombol kembali keatas pada blog, Anda juga bisa menggunakan gambar yang sesuai dan yang Anda inginkan. Pada kesempatan kali ini pun BloggARs akan memberikan beberapa gambar yang cocok untuk dibuat tombol back to top yang dibuat oleh saya sendiri spesial buat Anda pembaca artikel di blog saya ini.

Kedua script yang saya berikan diatas keduanya bisa untuk menggunakan gambar sebagai tombolnya. Anda hanya tinggal memasukan script <img .. /> yang saya berikan disini dan menggantikannya kata yang berwarna merah pada script.

#2 Gambar

Script Gambar (<img .. />)

Catatan: Pilih salah satu gambar yang Anda inginkan lalu gantikan kata-kata yang berwarna merah pada Script 1# maupun Script 2# dengan Script Gambar yang ada diatas.

Begitulah yang saya berikan pada Anda pengunjung blog ini untuk membuat tombol back to top, apabila Anda kurang suka dengan desain yang saya berikan diatas Anda bisa untuk mengeditnya sendiri sesuai yang Anda inginkan dan yang serasi dengan template blog Anda.

Begitulah artikel kali ini yang membahas mengenai Cara Membuat Tombol Back To Top di Blog Dengan Mudah. Apabila Anda kurang mengerti karena penjelasan yang saya berikan pada artikel ini cukup rumit, baca kembali dari atas sampai Anda paham dan mengerti karena sebenarnya cukup mudah dalam membuatnya. Anda hanya perlu menyimpan Script 1# atau Script 2# yang sudah diberikan tombol icon awesome maupun gambar dan menyimpannya pada widget blog Anda.

Baca Sumber di sini

HALAMAN SELANJUTNYA:

About Aan Channel

Blog channel yang sekedar ingin berbagi, mohon maah jika terdapat kesamaan isi postingan, hal itu tidak terlepas dari hasil pencarian saat membutuhkan, dan saya share ulang.

Aan Channel

Cara Membuat Tombol Back to Top (Kembali ke Atas) pada Blog

About Aan Channel

Related Post