Membuat Tombol Back To Top Responsive dan Fast Loading

Oleh Blogger Kode

Kamis, 26 Mei 2016

Bagikan :

Tweet

"Mas, saya udah buat banyak postingan dan artikelnya panjang banget, jadi bosen pakek scrool manual buat menuju tampilan atas blog?"

"Mas, saya cari di internet belum ada yang cocok, rata-rata scriptnya berat untuk template?"

"Mas, saya cari script yang fast loading dan responsive, kasih tutornya Mas?"

Untuk solusi sobat di atas, nah saya punya tutor yang cocok untuk semua versi template yaitu Tombol Back To Top Responsive Ala Mas Fatkhun Blog. Gadget berbentuk tombol jika diklik akan membawa sobat ke tampilan paling atas blog.

Banyak sekali script back to top yang lebih keren, tapi script ini saya buat supaya lebih cepat loadingnya dan SEO tentunya. Tombol back to top digunakan untuk mempermudah pengunjung sobat supaya tidak menggunakan scrool manual tapi secara otomatis satu klik langsung menuju tampilan atas blog.

Selain fungsinya mempercantik tampilan sekaligus menjadi alat yang user friendly lho!!!
Berikut tutorial membuat Tombol Back To Top Ala Mas Fatkhun Blog :

#1. Log in ke Blogger 
#2. Pasang css font awesome, karena tombol back to top ini menggunakan font awesome. Pasang kode javascript berikut dan letakkan di atas kode </head>.

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

#3. Selanjutnya, pasang scc berikut di atas kode ]]></b:skin>.

/* Back To Top */
#back-to-top{background:rgba(28, 142, 188, 0.6) none repeat scroll 0% 0%;color:#ffffff;padding:10px;font-size:20px .back-to-top{position:fixed!important;position:absolute;bottom:20px;right:20px;z-index:999}

#4. Kemudian, sobat panggil tombol back to top dengan kode HTML dan javascript berikut lalu letakkan di atas kode </body>.

<div class='back-to-top'><a href='#' id='back-to-top' title='back to top'> 
<i class='fa fa-chevron-up'/> 
</a></div> 
<script>
           $(window).scroll(function() {  
      if($(this).scrollTop() &gt; 200) {  
           $(&#39;#back-to-top&#39;).fadeIn();  
      } else {  
           $(&#39;#back-to-top&#39;).fadeOut();  
      }  
  });  

$(&#39;#back-to-top&#39;).hide().click(function() {  
           $(&#39;html, body&#39;).animate({scrollTop:0}, 1000);  
       return false;  
  });
</script>

#5. Terakhir simpan Template.

Sekian tutor buat tombol back to top responsive yang saya berikan. kapan-kapan akan saya share trik lainnya, udah capek ngetik kode css, HTML, maupun javascriptnya. Jika ada kesulitan dalam pemasangan komen saja di kotak komentar yang tersedia atau via email.

Terima Kasih

Tag : Tutorial Blog