Cara Membuat Tombol Back To Top Rocket Terbaru

Pada kali ini ada trik seputar blogger yang harus kamu terapkan di blog kamu. Dengan trik ini kamu bisa membuat tampilan blog lebih cantik dan fast loading. Nah, trik kali ini adalah cara membuat tombol back to top rocket fast loading. Trik dan kode tombol back to top rocket ini lebih cepat dan tidak memberatkan loading blog kamu.

Back to top adalah sebuah tombol pada tampilan blogger/blogspot yang berfungsi untuk mengembalikan tampilan web blog kamu ke atas halaman. Dengan adanya tombol tersebut, kamu tidak perlu repot-repot menscroll halaman. Hanya dengan satu klik, kamu otomatis bisa kembali ke halaman paling atas.

Cara Membuat Tombol Back To Top Rocket Terbaru Fast Loading

Step 1, Buka dashboard blogger di alamat www.blogger.com kemudian masuk ke menu Theme→Edit Html

Step 2, Cari tag berikut dengan cara tekan CTRL + F, ketik </style>

Step 3, Silahkan Copy dan Paste kode berikut ini kemudian letakkan di antara kode <style> dan </style>

.back-to-top svg {width:24px;height:24px;vertical-align: middle}
.back-to-top svg path {fill: #4d90fe;}
.back-to-top:hover svg path{fill: #f95b41}
.back-to-top:hover{transform: rotate(-45deg);}
.back-to-top {background:#fff;padding:9px 9px;font-size:24px;border-radius: 100px;transition:all .30s ease-in-out;;border:2px solid #4d90fe;position: fixed !important;position: absolute;bottom: 20px;right: 20px;transition:transform .5s ease-out;z-index: 999;box-shadow:0px 2px 10px 0px #aaaaaa}

Step 4, Cari tag berikut dengan cara tekan CTRL + F, ketik </head>

Step 5, copy dan paste kode berikut setelah tag </head>


<div class="back-to-top">
<a href="" title="Back To Top">
<svg viewBox="0 0 24 24">
<path d="M7.961 17.563c-.182-.037-.366.044-.461.203-.475 1.02-1.576 1.592-2.684 1.395-.203-1.108.373-2.213 1.397-2.681.204-.125.271-.392.146-.597-.067-.111-.182-.188-.311-.205-1.577-.297-3.193.262-4.252 1.469C.545 18.865.074 21.03.5 23.113c.031.185.175.329.359.359.498.081 1.002.12 1.508.12 1.834.102 3.625-.581 4.931-1.873.89-1.054 1.259-2.452 1.007-3.808-.021-.187-.161-.337-.345-.375l.001.027zM23.778.203c-.171-.169-.522-.089-.522-.089C22.621.04 21.98.003 21.339.001c-4.154-.043-8.153 1.576-11.106 4.497-.36.362-.7.742-1.02 1.139-1.402-.65-3.008-.709-4.455-.165-2.287.984-3.623 3.787-4.729 6.671-.087.224.025.476.249.562.144.055.304.031.425-.064 1.566-1.163 3.618-1.445 5.44-.749L5.6 13.856c-.05.184.026.377.187.479 1.466 1.096 2.767 2.395 3.863 3.857.103.163.298.239.482.188l1.963-.539c.719 1.826.436 3.893-.749 5.456-.148.188-.116.463.071.61.121.096.285.12.428.064 2.883-1.109 5.686-2.443 6.665-4.722.544-1.446.487-3.049-.161-4.451.395-.326.772-.672 1.133-1.036 3.381-3.44 5-8.241 4.392-13.026 0 0 .076-.352-.096-.524V.203zM21.339.87c.563 0 1.127.029 1.688.088.079.771.103 1.548.07 2.322-.611-.066-1.184-.34-1.623-.771-.438-.437-.713-1.009-.777-1.623.209-.011.422-.018.636-.018l.006.002zM10.846 5.112C13.262 2.716 16.438 1.24 19.828.94c.07.677.33 1.318.749 1.855l-2.698 2.697c-1.529-1.203-3.742-.939-4.946.59-1.005 1.278-1.005 3.078 0 4.356l-3.147 3.147c-.811-.785-1.689-1.498-2.626-2.131.662-2.394 1.932-4.58 3.686-6.342zm7.524 3.159c.001 1.469-1.188 2.66-2.657 2.66-1.469.002-2.659-1.188-2.66-2.656 0-1.47 1.189-2.66 2.657-2.661h.003c1.467 0 2.656 1.19 2.657 2.657zM1.314 11.269c.941-2.254 2.09-4.268 3.779-4.994 1.154-.428 2.428-.396 3.559.09C7.639 7.78 6.871 9.36 6.387 11.033c-1.645-.667-3.498-.581-5.074.233l.001.003zm8.891 6.19c-1.074-1.37-2.311-2.604-3.683-3.677l.395-1.434c1.845 1.275 3.444 2.874 4.722 4.718l-1.434.393zm7.508 1.425c-.727 1.698-2.737 2.848-4.989 3.789.811-1.578.893-3.432.225-5.074 1.677-.488 3.259-1.26 4.679-2.278.484 1.134.515 2.412.083 3.566l.002-.003zm-5.186-2.06c-.629-.937-1.34-1.816-2.123-2.628l3.147-3.148c1.528 1.203 3.743.939 4.945-.59 1.006-1.278 1.006-3.078 0-4.356l2.698-2.698c.535.418 1.177.677 1.85.75-.299 3.387-1.772 6.563-4.166 8.979-1.763 1.754-3.947 3.022-6.343 3.684l-.008.007zZ" fill="#f95b41"></path>
</svg>
</a>
</div>

Step 6, Cari tag kode berikut ini dengan cara tekan CTRL + F, ketik </body>

Step 7, Copy dan pastekan kode berikut ini tepat diatas kode </body>


<script>
$(document).ready(function(){
 //Check to see if the window is top if not then display button
 $(window).scroll(function(){
  // Show button after 100px
  var showAfter = 100;
  if ($(this).scrollTop() > showAfter ) { 
   $('.back-to-top').fadeIn();
  } else { 
   $('.back-to-top').fadeOut();
  }
 });
 
 //Click event to scroll to top
 $('.back-to-top').hide().click(function(){
  $('html, body').animate({scrollTop : 0},800);
  return false;
 });
 
});
</script>

Step 8, silahkan klik simpan dan terapkan ke blog kamu.

Akhir kata, itulah tutorial cara membuat tombol back to top model rocket terbaru. Semoga bermanfaat untuk kamu yang sedang mencari tutorial artikel seputar tombol back to top. Sekian dan jika ada pertanyaan bisa kamu ajukan di kolom komentar ya.

Leave a Reply

Your email address will not be published. Required fields are marked *