Cara Membuat 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 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.

Cara Membuat Tombol Back To Top di Blog Dengan Mudah

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.

Baca juga "Cara Menyembunyikan Gambar pada Postingan Blog"

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.

<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" lalu klik "Tambahkan Gadget" > "HTML/JavaScript".
  3. Kemudian masukanlah kode 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 penjelasan bawah.

  5. Klik "Simpan" apabila Anda sudah memasukan untuk tombol yang diinginkan.
Baca juga "Cara Mudah Memasang Navigasi Page Number Pada Blog"

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

  1. Anda harus dalam keadaan login pada Blogger.
  2. Pada Dashboard Blogger Anda masuk ke "Tata Letak" lalu klik "Tambahkan Gadget" > "HTML/JavaScript".
  3. Setelah itu masukan kode 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 penjelasan bawah.

  5. Kemudian klik "Simpan" apabila sudah memilih tombol yang Anda inginkan.
Baca juga "2 Cara Menambahkan Tanda Admin/Author pada Komentar Blog"

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

<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 Mudah Membuat Daftar Isi Otomatis Super Filter di Blog"

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
Gambar Script Gambar (<img .. />)
back to top 1 <img src="https://4.bp.blogspot.com/-wGKEB6-UgDo/WBreH_qHDxI/AAAAAAAABvQ/E6TRl1puEhYW1dhu-41lHpGOqHTsazUTQCLcB/s1600/back%2Bto%2Btop%2Bbloggars%2B2.png" />
back to top 2 <img src="https://1.bp.blogspot.com/-HFAckw7GrhI/WBreH2o37iI/AAAAAAAABvY/5me93A8wxMs2yTTXJXFcRa2k00JTF-4iACLcB/s1600/back%2Bto%2Btop%2Bbloggars.png" />
back to top 3 <img src="https://4.bp.blogspot.com/-w3_BLjVFBto/WBreH_1z8nI/AAAAAAAABvc/DhbmNwASjkQ2DwCsXrUmm_Z3enylPGn7QCEw/s1600/back%2Bto%2Btop%2Bbloggars%2B3.png" />
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.

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

Related Posts:

0 komentar:

Post a Comment

Beri komentar dengan menggunakan Bahasa yang Baik dan Sopan!
Didalam komentar dilarang mencantumkan link hidup dan apabila Anda melakukannya maka Admin berhak menghapusnya.

Powered by Blogger.