Cara Membuat Tombol Keren Go Up Dan Go Down Di Blog

Apa itu tombol go up dan go down dan apa fungsinya ?, tombol go up dan go down adalah salah satu widget yang biasa digunakan dalam sebuah website. Fungsi tombol ini pada dasarnya adalah untuk loncat ke bagian bawah atau atas pada sebuah halaman blog dengan cepat dibanding dengan menggunakan bantuan mouse/ cursor. Kelebihan lainnya disamping mempercantik tampilan namun lebih memberikan kemudahan pada pengunjung pada saat membaca blog, khususnya blog yang memiliki konten yang panjang, karena dengan tombol ini pengunjung akan cukup mudah menelusuri setiap konten-konten dari blog sahabat dengan cepat.

Masih belum terbayang ? 🤔. Baiklah, mungkin sahabat bisa lihat Demo biar gak gagal paham 😬.

Gimana kerenkan ?, terus gimana cara membuat dan memasangnya di blog?, berikut

Tutorial Cara Membuat Tombol Keren Go Up Dan Go Down Di Blog.

Budayakan membaca dan mencoba sebelum sahabat berkomentar.

Tutorial yang saya bagikan sudah 100% berfungsi di template Blogger bawaan ataupun template modifikasi pada umumnya (tergantung pada template yang sahabat gunakan).

Selamat mencoba dan tetap semangat...

Direkomendasikan ikuti langkah demi langkah terlebih dahulu tanpa harus merubah/ mengganti sebagian atau seluruh kode CSS, JS atau HTML. Modifikasi dilakukan setelah kode tersebut berhasil ditempatkan pada template.

Backup Template sebelum merubah sebagian atau seluruh dari isi template, guna menghindari terjadinya kesalahan / ketidak sesuaian/ erorr saat merubahnya nanti. Berikut dibawah ini cara backup template bagi yang belum mengetahuinya.

Login Blogger > Menu Theme > Edit HTML
JQuery Dan Font Awesome pasang kode ini pada template tepat dibawah <head>. Jika sudah ada lewati dan tutup langkah ini.

 <link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/> <script src='https://cdn.rawgit.com/agun82/jQuery321/843cfadc/jQuery321%20Optimized.js'/>

Login Blogger > Menu Layout > Add A Gadget > Pilih HTML/ Javascript
Copy kode HTML dibawah Pilih Salah Satu Versi dan Paste tepat pada kolom content.


<a href='#' id='tothetop' title='back to top'><i class='fa fa-chevron-circle-up' style="font-size:30px;color:#3589C3"/></i></a>	<ul id='scrollToTop'> <li><a href='#top'><i class='fa fa-chevron-circle-up' style='font-size:30px;color:#3589c3;' title='Go up'/></a></li> <li><a href='#bottom'><i class='fa fa-chevron-circle-down' style='font-size:30px;color:#3589c3;' title='Go down'/></a></li> </ul><div id='top'/> <div id='bottom'/>

Save template dan langsung langkah selanjutnya.
Modifikasi untuk ukuran dan warna pada style="font-size:30px;color:#3589C3" dan untuk model gambar 'fa fa-chevron-circle-up' referensi gambar bisa lihat Disini..

Login Blogger > Menu Theme > Edit HTML
Cari kode </style> atau </body> pada template, untuk mempercepat dan mempermudah gunakan shortcut Ctrl + F

Copy kode CSS dibawah ini Pilih Salah Satu Versi , kemudian

#tothetop {
  background: white(body-background color);
  padding: 5px 6px;
  color: #fff;
  text-align: center;
  box-sizing: border-box;
  border: 1px solid #3589c3;
  border-radius: 8px;
  position: fixed;
  bottom: 18px;
  right: 25px;
  cursor: pointer;
}
a:hover#tothetop {
  opacity: 0.8;
  box-shadow: 1px 2px 0px 1px #666;
}

#scrollToTop{display:none;list-style:none;position:fixed;bottom:0px;right:0px;cursor:pointer;}
#scrollToTop a{display:inline-block;background:$;(body.background.color);color:#fff;font-size:.8rem;margin:5px auto;padding:5px 6px;border-radius:99em;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1);box-sizing: border-box;border: 1px solid #3589c3;border-radius: 8px;}
#scrollToTop a:hover{opacity:0.5;box-shadow:1px 2px 0px 1px #666;}
#top{position:absolute;top:0}

Paste tepat diatas atau sebelum kode </style> atau </body> tersebut.
Save Template dan langsung langkah selanjutnya.
Modifikasi untuk bentuk, ukuran dan warna hover atau border.

Login Blogger > Menu Theme > Edit HTML
Cari kode </head> pada template, untuk mempercepat dan mempermudah gunakan Ctrl + F

Copy kode JS dibawah ini, kemudian

<script async='async' type='text/javascript'>
jQuery(document).ready(
  function() {
    var offset = 300;
    var duration = 500;
    jQuery(window).scroll(
      function() {
        if (jQuery(this).scrollTop() > offset) {
          jQuery('#tothetop').fadeIn(duration)
        } else {
          jQuery('#tothetop').fadeOut(duration)
        }
      });
    jQuery('#tothetop').click(
      function(event) {
        event.preventDefault();
        jQuery('html,body').animate({
          scrollTop: 0
        }, duration);
        return !1
      })
  })
</script>

 <script async='ayncs' type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function(){var o=300,r=500;jQuery(window).scroll(function(){jQuery(this).scrollTop() > o?jQuery("#scrollToTop").fadeIn(r):jQuery("#scrollToTop").fadeOut(r)})});
$(function(){$("a[href*=#]:not([href=#])").click(function(){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")&&location.hostname==this.hostname){var t=$(this.hash);if(t=t.length?t:$("[name="+this.hash.slice(1)+"]"),t.length)return $("html,body").animate({scrollTop:t.offset().top},500),!1}})});
//]]>
</script>

Paste tepat diatas kode </head>tersebut.

Save Template dan langsung langkah selanjutnya.

Modifikasi untuk tombol saat muncul dan hilang var offset=300 var duration=500, semakin kecil angka semakin cepat.

Silahkan sahabat memodifikasi lanjut untuk penempatan, ukuran, warna, dan model gambar disesuaikan dengan gaya template sahabat. Hindari memodifikasi yang berlebihan terkadang malah jadi menggangu baik tampilan maupun fungsi.

Demikian semoga membantu...

Please Share

style='margin-right: 30px' target='-blank'>

agun82 I Blog Tutorial Blogger

20 June 2018

Cara Membuat Tombol Keren Go Up Dan Go Down Di Blog

Tutorial Cara Membuat Tombol Keren Go Up Dan Go Down Di Blog.

Artikel Lainnya Terkait Costumized

0 komentar:

Post a Comment

Recent Posts

Categories

Subscribe

agun82 I Blog Tutorial Blogger

20 June 2018

Cara Membuat Tombol Keren Go Up Dan Go Down Di Blog

Tutorial Cara Membuat Tombol Keren Go Up Dan Go Down Di Blog.

Artikel Lainnya Terkait Costumized

0 komentar:

Post a Comment

My Social Profiles

Recent Posts

Categories

Subscribe