Cara Menciptakan Tombol Kembali Ke Atas Di Blog


Membuat tombol kembali keatas (back to top) pada blog dengan memakai isyarat HTML, Javascript, CSS atapun jQuery. Fungsi dari tombol ini ialah apabila pengunjung blog scroll kebawah maka akan muncul tombol back to top yang memudahkan pengunjung untuk kembali pada posisi atas dari posting blog tanpa susah memakai mouse untuk keatas.
Fungsi dari tombol ini ialah apabila pengunjung blog scroll kebawah maka akan muncul tom Cara Membuat Tombol Kembali ke Atas di Blog

Memasang Tombol Kembali ke Atas

Pada dashboard blog, pilih Template --> Edit HTML --> Klik pada area kosong kotak Edit HTML dan Cari (CTRL+F) isyarat berikut:
</head>
Fungsi dari tombol ini ialah apabila pengunjung blog scroll kebawah maka akan muncul tom Cara Membuat Tombol Kembali ke Atas di Blog
Selanjutnya ikuti langkah dibawah ini. Silahkan anda pilih salah satu efek dari tombol ke atas berikut:

1. Membuat Tombol Kembali ke Atas dengan Efek Halus

Langkah 1. Letakkan isyarat berikut diatas </head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>
<script type='text/javascript'>
$(function() { $(window).scroll(function() {if($(this).scrollTop()&gt;500) { $(&#39;#ScrollToTop&#39;).fadeIn()}
else { $(&#39;#ScrollToTop&#39;).fadeOut();}});$(&#39;#ScrollToTop&#39;).click(function(){$(&#39;html,body&#39;).animate({scrollTop:0},700);
return false})});
</script>
          Simpan Template

Langkah 2. Tata Letak --> Tambahkan Gadget --> HTML/JavaScript. Masukkan isyarat berikut di dalamnya.
<style type='text/css' scoped='scoped'> #ScrollToTop{position:fixed; bottom:0px; right:3px; cursor:pointer;display:none} </style> <div id='ScrollToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhekIdbp5-qFDDMqn0xFktqn3Yw9Kn6F2LZJHKkzKomrjGTj4bjr6XGos34ik7dYocPNGgpVAw93zP_5_-5GBq7W8w5SmwbuWoJhuogGJlbdmOQm-OwjroQa1gDivFTPT4HjRkDgfb7W0aY/s1600/arrow-up_basic_blue.png'/></div>
          Simpan

2. Membuat Tombol Kembali ke Atas dengan Efek Memantul

Penjelasan dari efek memantul ini ialah ketika tombol back to top di klik maka layar akan terlihat memantul sesaat layaknya menyerupai bola.

Langkah 1. Letakkan isyarat berikut diatas </head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>
<script type='text/javascript'>
$(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#BounceToTop').slideDown(200); } else { $('#BounceToTop').slideUp(300); } });
$('#BounceToTop').click(function() { $('body,html').animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); });
</script>
          Simpan Template

Langkah 2. Lihat ke Tata Letak --> Tambahkan Gadget --> HTML/JavaScript. Letakkan isyarat berikut didalamnya.
<style type='text/css' scoped='scoped'>
#BounceToTop{position:fixed; bottom:0px; right:3px; cursor:pointer;display:none}
</style>
<div id='BounceToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhekIdbp5-qFDDMqn0xFktqn3Yw9Kn6F2LZJHKkzKomrjGTj4bjr6XGos34ik7dYocPNGgpVAw93zP_5_-5GBq7W8w5SmwbuWoJhuogGJlbdmOQm-OwjroQa1gDivFTPT4HjRkDgfb7W0aY/s1600/arrow-up_basic_blue.png'/></div>
          Simpan

3. Membuat Tombol Kembali ke Atas dengan Efek Fading

Penjelasan dari efek fading ini ialah ketika tombol di klik maka visibilitas dari objek akan secara perlahan muncul. Biasa pada editing video kita mengenal fade in dan fade out.

Langkah 1. Letakkan isyarat berikut diatas </head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>
          Simpan Template
Langkah 2. Pilih Tata Letak --> Tambahkan Gadget --> HTML/JavaScript. Letakkan isyarat berikut didalamnya.
var scrolltotop={
    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 200]},
    controlHTML: '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhekIdbp5-qFDDMqn0xFktqn3Yw9Kn6F2LZJHKkzKomrjGTj4bjr6XGos34ik7dYocPNGgpVAw93zP_5_-5GBq7W8w5SmwbuWoJhuogGJlbdmOQm-OwjroQa1gDivFTPT4HjRkDgfb7W0aY/s1600/arrow-up_basic_blue.png
" />',
    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 terang biar 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>
          Simpan

 Catatan: Text Merah ialah gambar tombol yang sanggup anda ganti sesuai keinginan.
               Text Biru ialah isyarat jQuery, cukup anda tambahkan 1 kali apabila menggunakannya.
Tips: Anda sanggup mengkompres isyarat diatas sebelum diaplikasikan pada template blog.

Selamat Mencoba..

Komentar

Posting Komentar

Postingan populer dari blog ini

Kualitas Solar Sangat Mempengaruhi Kinerja Mesin Diesel

Gambar
Kualitas materi bakar solar - Kualitas dari materi bakar solar di Indonesia ini masih sangat jauh dari kata bagus, terlebih lagi jikalau solar tersebut dari hasil produksi penyulingan yang menggunakan medote tradisional yang ketika ini menjadi gosip di cepu. yang nantinya akan menciptakan kinerja mesin kendaraan diesel menjadi tidak maksimal. Pada sebuah materi bakar terdapat banyak sekali kandungan menyerupai kandungan welirang yang tentunya berbeda beda tergantung jenis solarnya, semakin sedikit kandungan welirang yang terdapat pada materi bakar solar, tentu hal ini juga akan menciptakan harganya lebih mahal dibandingkan dengan solar yang kandungan belerangnya banyak. Untuk mengetahui seberapa elok kualitas solar kita sanggup melihat kadar cetane yang ada didalamnya, semakin tinggi kadar cetane yang ada didalam solar, hal ini mengatakan kualitas materi bakar tersebut semakin baik. Silahkan anda baca kembali goresan pena kami lainnya mengenai angka cetane yang ada di materi b...
Baca selengkapnya

Fungsi Defogger Garis Coklat Di Beling Mobil

Gambar
Fungsi garis garis coklat beling mobil - pernahkah anda melihat sebuah kendaraan beroda empat yang di bab beling samping belakang maupun di beling bab belakang yang terdapat menyerupai sebuah garis garis coklat dengan banyak sekali model, ada yang melingkar, ada juga yang berbentuk menyerupai garis garis ? Garis coklat yang ada di bab beling kendaraan beroda empat ini ialah sebuah perangkat atau fitur perhiasan yang terdapat pada sebuah kendaraan beroda empat yang dinamakan DEFOGGER. Perangkat ini yaitu sebuah fitur perhiasan yang mempunyai fungsi hampir sama dengan wiper mobil. Bedanya kalau wiper dipakai pada kondisi suaca biasa untuk menghapus bubuk dan kotoran dari luar, sedangkan defogger ini berfungsi untuk menjaga biar beling bab dalam kendaraan beroda empat tidak berembun yang nantinya akan mengganggu pandangan mata ketika si pengemudi melihat kebelakang memakai cermin dasboard. Cara kerja dari defogger ini ada yang di setting secara otomatis dengan memakai sensor, a...
Baca selengkapnya

Benarkah Memoles Body Kendaraan Beroda Empat Bikin Cat Jadi Tipis ?

Gambar
Detailing mobil - salah satu hal yang sanggup kita lakukan untuk mengembalikan detail exterior kendaraan beroda empat yang paling murah dan cepat pengerjaannya ialah melaksanakan poles body mobil. Pemolesan pada bab permukaan at body kendaraan beroda empat ini fungsinya yakni mengembalikan warna cat body kendaraan beroda empat yang kusam supaya nantinya menjadi mengkilap dan kinclong ibarat cat kendaraan beroda empat baru. Diluar sana berbagai pro dan kontra mengenai poles atau polish body kendaraan beroda empat ini, dan rata rata orang yang kontra ini menyampaikan bahwa melaksanakan poles body kendaraan beroda empat ini akan menciptakan lapisan pengkilap cat atau pernis menjadi semakin tipis. Apakah memang benar demikian, kalau memoles body kendaraan beroda empat sanggup menjadikan lapisan vernis ini semakin menipis ? Baca juga : Belajar detailing kendaraan beroda empat sendiri untuk pemula Polis berbeda dengan Wax, kalau Wax lebih ke arah sumbangan cat body, maka poles b...
Baca selengkapnya