Tutorial

  • Android
  • Blogger
  • Canon
  • Epson
  • Komputer
  • Laptop
  • MedSos
  • ByPass FRP Tools
  • Berbagi Tutorial in Google News
  • Berbagi Tutorial on Facebook
  • Berbagi Tutorial on Instagram
  • Berbagi Tutorial on Twitter
  • Berbagi Tutorial on Youtube
  • Berbagi Tutorial on Tumbrl
  • Berbagi Tutorial on Wix
  • Berbagi Tutorial on Linkdin
  • Berbagi Tutorial on KASKUS
  • Berbagi Tutorial on MEDIUM
  • List Blog Partner
  • Open Backlink DoFollow
  • Cara Membuat Navigasi Tombol Back to Top Blog

    Salah satu filture penting yang direkomendasikan ada dalam tampilan sebuah halaman utama dan postingan blog adalah adanya Tombol Navigasi Back to Top (Kembali ke Halaman paling Atas). Karena tidak semua themplate yang ada sudah menyertakan filture ini. Blog dengan Artikel atau postingan dengan pembahasan yang panjang lebar sangat direkomendasikan untuk menerapkan Tombol Navigasi Back to Top ini. Karena dengan adanya Tombol Navigasi ini pembaca akan lebih mudah mengulang kembali membaca isi dari postingan blog. Dengan adanya Tombol Navigasi ini pembaca akan semakin dipermudah dalam mengakses keseluruhan isi dari postingan yang panjang lebar.  



    Bagi sobat blogger yang kebetulan template yang dipakai untuk blog kesayangan belum memiliki filture ini dan ingin mencoba menerapkannya dapat mengikuti tutorial berikut ini: 
    DOWNLOAD SOURCE CODE Navigasi Tombol Back to Top

    Pertama-tama akses halaman Dasboard Blogger,  pilih menu Tema kemudian pilih Edit HTML. Cari kode </head> agar lebih mudah gunakan filture pencarian dengan cara menekan kombinasi tombol CTRL + F. 

    Setelah Kode </head> kalian temukan, pastekan code scrip HTML berikut ini diatas kode </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>
    

    Keterangan :
    Angka 500 = Letak atau Posisi tombol yang kalian inginkan
    Angka 700 = Kecepatan untuk kembali keatas

    Klick Save untuk Menerapkan dan menyimpan kode di atas ke dalam HTML Themplate
    Setelah itu buatlah Widget HTML/JavaScript melalui menu Tata Letak Dasboard Blogger
     
    <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='http://2.bp.blogspot.com/-MFhU3vLp5ho/UiaBZeA1McI/AAAAAAAAAQs/MrzW2ljP5mA/s1600/arrow-up_basic_blue.png'/></div> 
    

    Pastekan Code Scrip berikut ini pada kolom input HTML/JavaCrip, untuk judul widget abaikan kosongkan saja.

    Klick Save untuk menyimpan Add Widget. 

    Sekarang coba kalian test buka halaman Blog kalian, Tombol Navigasi Back to Top sudah muncul di sudut kanan bawah.

    Demikianlah Tutorial Cara Membuat Tombol Navigasi Back to Top pada halaman utama dan halaman postingan Blog, semoga bermanfaat dan terima kasih telah berkunjung.
    Ingin berlangganan Notifikasi Update Postingan Terbaru? Silahkan Gabung Berbagi Tutorial Online WhatsApp Grup atau Follow Berbagi Tutorial On Google News
    Artikel Terkait: