• Breaking News

    Sunday, February 5, 2017

    Membuat Tombol "Back To Top" di Blog

    Tips & Trik : Cara Mudah Membuat Tombol "Back To Top" di Blog

    Tombol "Back To Top" di Blog
    Hallo sobat blog my-seven7ash. Kali ini saya ingin share tutorial Cara Mudah Membuat, Menampilkan dan Memasang Tombol "Back To Top" di blog sobat. Fungsi dari Tombol "Back To Top" adalah membuat sebuah blog agar memudahkan pembaca blog tersebut.

    Salah satu kemudahan pembaca dalam menelusuri blog kita dalam hal desain adalah adanya tombol back to top. Tombol ini akan berfungsi sebagai scroll yang akan membantu memindahakan scroll dari bawah ke atas halaman awal blog

    Beberapa Tips dan Trik tutorial dari rekan-rekan blog lain mungkin sudah banyak yang memberikan cara mudah guna memasang tombol back to top ini. So, mari kita simak lebih lanjut tips kali ini.

    Tombol "Back To Top"

    Cara Memasang Tombol "Back to Top"

    1. Tempate > Edit HTML
    2. Copy Paste kode CSS berikut ini di atas kode ]]</b:skin>


    3. #MD-StoTop {padding:12px;position:fixed;bottom:5px;right:3px;cursor:pointer;z-index:999}


    4. Pasang kode Javascript berikut ini di atas kode </head>


    5. <script type='text/javascript'>
      $(function() {
          $.fn.scrollToTop = function() {
          $(this).hide().removeAttr(&quot;href&quot;);
          if ($(window).scrollTop() != &quot;0&quot;) {
              $(this).fadeIn(&quot;slow&quot;)
          }
          var scrollDiv = $(this);
          $(window).scroll(function() {
              if ($(window).scrollTop() == &quot;0&quot;) {
              $(scrollDiv).fadeOut(&quot;slow&quot;)
              } else {
              $(scrollDiv).fadeIn(&quot;slow&quot;)
              }
          });
          $(this).click(function() {
              $(&quot;html, body&quot;).animate({
              scrollTop: 0
              }, &quot;slow&quot;)
          })
          }
      });
      $(function() {
          $(&quot;#MD-StoTop&quot;).scrollToTop();
      });
      </script>


    6. Pasang kode HTML berikut ini di atas kode </body>


    7. <a href='#' id='MD-StoTop'><img alt='back to top' src='http://2.bp.blogspot.com/-USm_7qiKVXc/UxUYG09tz_I/AAAAAAAACTA/6BRDkVAwLek/s1600/backtotop.PNG'/></a>


    8. Save Template
    Catatan:
    1. Kita bisa mengganti gambar panah (Tombol "Back to Top" ) dengan gambar pilihan sendiri dengan cara mengganti URL Gambar yang berwarna merah.


    Kini Tombol "Back to Top" sudah terpasang di Blog Blogspot Anda! Good Luck! 
    Terima Kasih Telah Membaca Artikel : Membuat Tombol "Back To Top" di Blog
    Add a Comment. Read Comment Policy ▼
    Please Note
    - No live link
    - Pergunakan bahasa baku dan tanpa singkatan serta sesuai dengan topik pembahasan
    - Komentar yang relevan akan saya balas dan kunjung balik secara otomatis (tanpa meminta)
    - Tekan "subscribe by email" untuk mengetahui balasan dari saya
    - Untuk mendapatkan BACKLINK, gunakan OpenID. Baca --> Cara mengaktifkan OpenID

    No comments:

    Post a Comment

    + Follow
    Join on this site

    with Google Friend Connect

    COPYRIGHT

    Seluruh artikel atau konten yang ada di blog MY-SEVEN7ASH ini sifatnya adalah Open Source.

    Artinya, Anda boleh mengcopy sebagian artikel yang ada di blog ini, tapi kami mohon untuk tidak melakukan copy paste melalui feeds (xml) karena itu bisa menghancurkan blog ini.

    Mencantumkan sumber atau tidak itu merupakan hak Anda.
    back to top