Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Optimasi Blog / Script dan HTML

Cara Menciptakan Tombol Back To Top Di Blog Dengan Mudah

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 sebab ingin ke navigasi blog yang biasanya terdapat diatas ataupun sebab ingin membaca artikel yang terdapat diatas akan lebih gampang dengan hanya mengklik atau tap pada tombol back to top tersebut.

akan mempermudah pengunjung terutama yang menggunakan handphone Cara Membuat Tombol Back To Top di Blog Dengan Mudah
Dalam menciptakan tombol back to top pada blog ada beberapa cara alternatif yang mungkin sudah banyak tutorialnya pada pencarian google. Namun disini saya akan menawarkan dua alternatif yang keduanya dengan cara menambahkan pada widget blog. Sebenarnya sanggup dimasukan pada HTML namun untuk menyimpannya cukup rumit maaf untuk seorang pemula. Maka dari itu saya akan menawarkan 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 menggunakan gambar atau icon awesome untuk menjadi tombol pada back to top tersebut. Langsung saja simak klarifikasi berikut.

Baca juga "Cara Menyembunyikan Gambar pada Postingan Blog"

Sebelum masuk ke cara pertama dalam menciptakan back to top, pastikan terlebih dahulu apakah template blog Anda sudah terdapat javascript jQueri menyerupai berikut. Apabila belum maka simpan script dibawah instruksi <head>, kemudian Simpan template.
 <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js' type='text/javascript'/>

#1 Membuat Tombol Back To Top di Blog

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

    4. Script 1#
    <style type="text/css">
    .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>
    <script type="text/javascript">
    /***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 klarifikasi bawah.

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

Baca juga "Cara Praktis Memasang Navigasi Page Number Pada Blog"

#2 Membuat Tombol Back To Top di Blog

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

  1. Anda harus dalam keadaan login pada Blogger.
  2. Pada Dashboard Blogger Anda masuk ke "Tata Letak" kemudian klik "Tambahkan Gadget" > "HTML/JavaScript".
  3. Setelah itu masukan instruksi script berikut.

    4. Script 2#
    <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: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 klarifikasi bawah.

  4. Kemudian klik "Simpan" apabila sudah menentukan tombol yang Anda inginkan.

Baca juga "2 Cara Menambahkan Tanda Admin/Author pada Komentar Blog"

Kumpulan Tombol Back To Top Design

Seperti yang saya jelaskan pada catatan kedua script diatas ialah 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 menawarkan 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 instruksi <head>.
 <link href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>
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 Icon
Icon Script Icon
<i aria-hidden="true" class="fa fa-arrow-circle-up" style="color: #fff; font-size:36px; padding-top:7px;"></i>
<i aria-hidden="true" class="fa fa-arrow-up" style="color: #fff; font-size:30px; padding-top:9px;"></i>
<i aria-hidden="true" class="fa fa-arrow-circle-o-up" style="color: #fff; font-size:36px; padding-top:7px;"></i>
<i aria-hidden="true" class="fa fa-chevron-circle-up" style="color: #fff; font-size:36px; padding-top:7px;"></i>
<i aria-hidden="true" class="fa fa-chevron-up" style="color: #fff; font-size:30px; padding-top:6px;"></i>

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#.

Artikel sebelumnya "Cara Praktis Membuat Daftar Isi Otomatis Super Filter di Blog"

2. Tombol Back To Top Menggunakan Gambar

Dalam menciptakan tombol kembali keatas pada blog, Anda juga sanggup menggunakan gambar yang sesuai dan yang Anda inginkan. Pada kesempatan kali ini pun akan menawarkan beberapa gambar yang cocok untuk dibentuk tombol back to top yang dibentuk oleh saya sendiri Istimewa buat Anda pembaca artikel di blog saya ini.

Kedua script yang saya berikan diatas keduanya sanggup 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
Gambar Script Gambar (<img .. />)
akan mempermudah pengunjung terutama yang menggunakan handphone Cara Membuat Tombol Back To Top di Blog Dengan Mudah <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCm3VZiDeygIKteWmQdsWtiCVroscq2deM4Va34FwmZQpiJ5e_KPcnhxeUoKioiulOWbr8zCximSHI2j8WFN39Bax8OqKl9R1JEh8flsChiAJcqIEQxOwYpm2a9nVTYDGSiEcwI97G1d4/s1600/back+to+top+bloggars+2.png" />
akan mempermudah pengunjung terutama yang menggunakan handphone Cara Membuat Tombol Back To Top di Blog Dengan Mudah <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy-0y-cILFdQHmlNZlaQdQC2F5C36fjS5CV6R1gGbhvBzLiks4dSwYjPE9x5As1ixurC1nq1ZMYlfrG6oTuWCAjIRZ85fy9csEg50v5jNHCKhz9GXGAtLMLAqbd-qrRRXGrZijIbFUWoU/s1600/back+to+top+bloggars.png" />
akan mempermudah pengunjung terutama yang menggunakan handphone Cara Membuat Tombol Back To Top di Blog Dengan Mudah <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixslrZ_0xtSfwCDM7-9hRMV8sy7lVTfw7XWHKmwhZv0UVkZZZCGJys_XmPCSWQu9rmo9qrPwVDh-uteCSlQh5ewqLFu3WWhZ-PjY7aVpFlXWv5s-reWQg3k2Fu5ZGO3S4lmpuq9Yjvmdw/s1600/back+to+top+bloggars+3.png" />

Catatan: Pilih salah satu gambar yang Anda inginkan kemudian 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 menciptakan tombol back to top, apabila Anda kurang suka dengan desain yang saya berikan diatas Anda sanggup untuk mengeditnya sendiri sesuai yang Anda inginkan dan yang harmonis dengan template blog Anda.

Baca juga "Cara Memasang Back To Top pada HTML Blog"

Begitulah artikel kali ini yang membahas mengenai Cara Membuat Tombol Back To Top di Blog Dengan Mudah. Apabila Anda kurang mengerti sebab klarifikasi yang saya berikan pada artikel ini cukup rumit, baca kembali dari atas hingga Anda paham dan mengerti sebab bekerjsama cukup gampang 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.
Sumber http://www.bloggars.com/