Cara Mudah Memasang Tombol Back to Top Responsive Di Blog

Rasman.web.id - malam sobat, apa kabar sobat semua, ketemu lagi kita ya. Dah lama nih saya ngak nulis di blog ini. kalau ngak salah tulisan terakhir saya adalah tentang :

Tips Biar Ngeblog Lebih Serius Dan Konsisten

Tapi, sobat jangan salah sangka dulu ya, saya lama ngak menulis, bukan karena saya ngak ada lihat ngotak-ngatik atau buka blog.

Saya juga masih sering buka blog ini, tapi belum dapat ide untuk menulis, lagian saya juga di sibukan dengan desain blog ini sob.

Selain itu, saya juga sibuk mengurus blog saya yang sedang dalam proses lounching. Tapi saya sendiri masih bingung sob.

soalnya banyak sekali yang harus saya setting, maklumlah karena saya pakai self hosting jadi saya pengennya tu tampilannya sempurna.

Ok lah sob, dari pada panjang lebar ceritanya, langsung aja ke topik kita ya. Kali ini saya mau share tentang Cara Mudah Memasang Tombol Back to Top  Responsive Di Blog

Mungkin artikel ini sudah banyak di postingan blog lain, namun kali ini saya mau share berdasarkan ilmu dan pengalaman saya sendiri, dan juga dengan gaya saya.

Sebelum kita mulai, kita harus tau apa itu tombol back to top . ?

TOMBOL Back to Top atau yang biasa disebut Scroll to Top adalah semacam menu navigasi yang memudahkan pengunjung untuk kembali ke bagian awal atas halaman blog atau postingan secara cepat, tanpa perlu harus mengscroll mouse atau usap-usap screen blog.

Nah untu melihatnya, kita harus mengscroll ke bawah dahulu, baru kemudian munculah tombol Back to Top ini. 

Dan apabila sobat klik tombol tersebut, maka tampilan postingan atau halaman yang sedang sobat buka akan otomatis bergerak ke bagian teratas ke halaman menu.

Sobat bisa melihatnya di sisi kanan bawah blog ini. Tombol ini baru saya buat barusan dengan searching di google dan membaca banyak panduan.

Lalu bagaimana cara memasangnya. ? 

Untuk tips yang kali ini, kita tidak akan atau tidak perlu masuk ke edit HTML, kita hanya akan menambahkan widget saja.

mengapa. ? 

Karena menurut saya, dengan hanya menggunakan widget html, ini akan menjadi lebih responsive dan ringan. Hal ini menurut saya dikarenakan kita hanya menempelkan saja di bagian luar, tanpa harus mengabungkan dengan html template.

Langsung saja sobat, kita bahas langkah-langkah Cara Mudah Memasang Tombol Back to Top  Responsive Di Blog

1. Masuk ke dashboard blog sobat, 

2. klik Layout/Tata letak

3. kemudian Add a Gadget dan Pilih HTML/JavaScript

4. Biarkan judul kosong, letakan kode berikut ini di kolom konten:

<script type="text/javascript" >
var scrolltotop={
    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 200]},
    controlHTML: '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf7a2PzQwUnJ7cLD48iBQdKC9U6_lGdWNnFqQ4KRr32TqMowZcbBZo0T4LdX3Zi4TQidaR-q17_3cXxsdY0fI5gCK-ct-qUkBpxJQPhWJR4UR01X9GbpKuD8DwzvHyDxuqfX3JVEJdlO8/s50/back+to+top+button.gif" />',
    controlattrs: {offsetx:5, offsety:5},
    anchorkeyword: '#top',
    state: {isvisible:false, shouldvisible:false},
    scrollup:function(){
        if (!this.cssfixedsupport)
            this.$control.css({opacity:0})
        var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
        if (typeof dest=="string" && jQuery('#'+dest).length==1)
            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()!='') //khusus versi IE6 ke bawah untuk loose check, juga untuk melihat apakah control mengandung teks
                mainobj.$control.css({width:mainobj.$control.width()}) //IE6- perlu diset witdh yang jelas agar kontainer text terbentuk dengan rapi
            mainobj.togglecontrol()
            $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
                mainobj.scrollup()
                return false
            })
            $(window).bind('scroll resize', function(e){
                mainobj.togglecontrol()
            })
        })
    }
}
scrolltotop.init()
</script>

5. kemudian Klik Simpan.

Silahkan sobat lihat di salah satu postingan sobat, Sudah muncul atau belum.

Nah bagi sobat yang ingin menganti Gambar Tombol Back to Top  itu, sobat bisa menganti tulisan berwarna merah itu dengan kode berikut : 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXTEldAAuo_eprHtEk9RQuGOFh4sJ8C7ncafDEqbMchzqfevchnp6IJToHT4TpGN3VGfb4F-a65Lu-qusJZ_6fq2ztatcL2DXlAAMVsUUMNiWljm8P7g1TNsDtvqUa9a4SVlCAf4fu8K0/s1600/back+to+top.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXWeBo5NagnbJ1RYJSwwoXlcRzj1VEcHTHJZyaf3Y0HJ8nr1s6gNv-EI9yEy0Qg4pYAZP73ShFJT2KyhTIGojUmTi8A6sHBC1nbprohWefzfmACqoWvP7858Nuz-vcLByc5dendGVHE6Q/s1600/back+to+top.png 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigfoiFBml6bmb9LRS93OWTrei4yr-miejnzb0BLJSzYJm4UU1BTr0BQJocXbJrcF8J2GW-udxxwfr0AeH3aI20GeqeHzhM4phLSX18pe2WzKPyKXca2kRsRtyjC4muwS2VQbDeEXu5CTI/s1600/back+to+top.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU7NjRAavyKuC_XkHioSV3tkRwacTd5Ddcg1xtYL001soJGcMBJm-XJsCY9lMCrg4KjbKj7zMqGLsQrVKZ-YGoaLq0V7szUqGJSxDbV6bM8t3CVTmAz2ErE2LEvjJep70hzsXqJ1mUH-s/s1600/back+to+top.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFzHodLSDj88TVWHtdakeN7yJ2hZYfAsVToDfv4R7Cfxq_MMUKO1afWzI6J_3ERCmGkYgQ9zZYuDWWsp9oo0y0FKgxGg_P4FE6kOjcId8ATe79RJmtmjJIwCyRpA5rzo_L7FL3_393h08/s1600/back+to+top+button.gif 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGxDJ2H9-evIJj0nNEhzy-ZDGEPHksctO_ylBK3i6X3wW0p1WFyVsu9sbk2QDnqt7KLjZt5gsLnC1Ob5gGYjYj_YfsFUjLkB1oAmBZwvYZ6idl3rc5dWSDrYZBQsXqH2vP8fnkUyaH2Kg/s1600/back+to+top+button.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1NunvZc3A-n9uWriOrV6dxx4SdeUeToJJXeHPvglCpaymk67gLmJ8ECiogIZKfwD7DPoHnXOORjcs9ij06IJmUeEz837RzBzDBoTiD6fTA9OQjzNe2NbrcBeB0lWFxannNYW5rM3BOiQ/s1600/back+to+top+button.gif 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp_w93Vx9FN4Ww4_8tiYLejvoQeobiySwJk0zymdT32laRHL6I04FqX80bQRgsz1vvBE8xlcBRP697rxRzNL7UxY0iSGghKWd8-JOnG6P3FMXQ4yCmx89QJwrgk7REbGQoxM24xVwfgYU/s1600/back+to+top+button.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0G9gIOfAjgeYCbxjDd4KJgAAOnZIkVW3ndoHvyqKpnvlZFsl2u9L4WIdnzHc7nxPqYxPH75o-D6HMhuyb-0m8ParrQkQ0M5Pq7ctN0ngjbdlsqE9oqQZBT0mI6-kj7M1cUat5EiwKn94/s1600/back+to+top.png 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-Yz_FeAr2lTiTU4OiTKWsCphA3DZLgCyu2CwBUrlB3T-8sh6F_qIAyJ6S_OULzLmG5W1BF4LFxKnr-ZAEurHWnyWxA55b8eKfsTlrCgxqU_o8adawtL0453ax6HzBXEoYyWds-IOmn4c/s1600/Back-To-Top.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivAKgl5BiifKnHlc0rjlaJHweh8ajW6svbvBcKOUlYjFfkSplEbx1L-c0q9bAJffyZKycDz6ijMoHIEQQrjHhY88Pidj3uzhKKDN2XpdRBdWWoCQl2xx2kU5JuexsrufoZ1Pjl2zB2bfg/s1600/back-to-top-button.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8osg5dE-u1bUTHejCdxs9FWpdbMme0WAIfuPtMQ0AFrbGfPm6JjLuDVjWjdaNNu05oYOqxr01OAOJvxYLvEIn5OTQwUiqBKCkpIooodg8PQWSs-ewux9Jbb1m5wRcmbPZfYxLn22Yznc/s1600/back-to-top-button.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb9oc0L5iHVLlTnPByGYNrtWOvwOkQ9QvvBOHjk_fEyLnBC4aM9AuAiLsa3LTo6W0pPlDzp1DzwxM_YgVg1IHPk4hzDQMdQy34DH0oFw9g_bkgEy-S3-jP22soft_E_54g4gVAAbvJ81k/s1600/back-to-top-button.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT1uYXXf7vt_SBgs7uJShrC-SdKdvmqGNotVh-ZPbkGR7R0LKl9q7DU6wusjdwbPHU5j14oqYEsS97HD27_olY1SoyOuCzsuACg_cZWkSepWVm5iwvPjW15K0r_HQf6O6WUykMraFH8fY/s1600/Back-To-Top.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO7xykwgWNRc4Ny7cE8jItrQ7GnaamvsNY4vwGhBbYCcPvb034TtzTJ8-9qpPI1gt9SQQohX-VqXYzwhlatgMWqb37P5xG9MYKppVZlpvDHlCkDRAYgJc_r-IrD2h8JrziQLokiEx-G8Y/s1600/back_to_top_button.png

Gambar diatas saya dapat dari salah satu blog terkenal di indonesia yaitu Contoh Blog. 

Silahkan sobat pilih mana yang sesuai dengan selera sobat.

Oh ya, jangan lupa untuk memindahkan kode tadi di sidebar paling bawah sobat. Ini agar tampilannya lebih sempurna sobat.

Ok itu saja dari saya tentang Cara Mudah Memasang Tombol Back to Top  Responsive Di Blog.

Semoga Bermanfaat....