Blog Personal tentang tips Blogging dan Internet Marketing

Cara Membuat tombol Back To Top

Tombol Back To Top atau tombol kembali ke atas, adalah sebuah fasilitas yang bisa kita pasang pada halaman blog atau web dalam bentuk sebuah tombol yang berfungsi sebagai fasilitas untuk kembali ke halaman atas atau menggulung layar ke atas secara otomatis.

Pada dasarnya fungsi back to top untuk memudahkan pembaca ke atas atau ke bawah pada halaman blog atau web dengan cepat tanpa merepotkan si pembaca sama sekali. Mungkin kurang lebih seperti itu fungsi ini diciptakan.


Cara Membuat tombol Back To Top

Buat yang ingin mencobanya bisa mengikuti langkah-langkah berikut ini :

  1. Login ke Blogger lalu pilih blog sobat yang akan dipakai untuk percobaan memasang widget back to top ini.
  2. Sudah dipilih blognya, lalu pilih "TEMPLATE" dan "EDIT HTML" kemudian copy kode CSS back to top ini di atas kode ]]></b:skin> dan Simpan.
    #BounceToTop {color:#555;background:#fff;text-align:center;position:fixed;bottom:50%;right:-125px;cursor:pointer;font-size:19px;font-weight:600;padding:0 12px;transition:all 400ms ease-in-out;border:1px solid #ddd;z-index:9;height:45px;line-height:45px}
  3. Selanjutnya cari kode </body> lalu copy kode Javascript di bawah ini di atas kode </body>
    <script type='text/javascript'>
      $(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#BounceToTop').css({'right':'0'}); } else { $('#BounceToTop').css({'right':'-125px'}); } });
    $('#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); }); var $elem = $('body');
    $('#GoToDown').click(function () {
    $('html, body').animate({scrollTop: $elem.height()}, 4000);
    $('#GoToDown').fadeOut()
    });
    $('#BounceToTop').click(function () {
    $('#GoToDown').fadeIn()
    });
     });
    </script>
    <div id='BounceToTop'><i class='fa fa-chevron-up fa-lg'></i></div>
  4. Terakhir sisipkan kode responsive di bawah ini dimana saja yang penting pada bagian @media screen
    @media screen and (max-width:550px) {
    #nav label span,#BounceToTop {display:none}
      }
  5. Lalu simpan pekerjaan Anda, selesai dan lihat hasilnya. Selamat mencoba.
Ayo Like Facebooknya
Tag : Blogging

Share this:

Share this with short URL: Get Short URLloading short url

Berlangganan :
Masukan e-mail Anda untuk mendapatkan kiriman artikel terbaru dari langsung di pesan kotak masuk.

feedburner


Anda telah membaca artikel :
Cara Membuat tombol Back To Top
Semoga bermanfaat, Terima kasih.
Cara style text di komentar Disqus:
  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

Tidak ada komentar

Back To Top