✔ Cara Menciptakan Tombol Back To Top - Kembali Ke Atas Responsive Fast Loading Di Blog

Cara Membuat Tombol Back to Top - Kembali ke Atas Responsive Fast Loading Di Blog-Fungsi Back to Top button ini memudahkan pengguna kembali ke halaman atas dalam satu klik atau satu sentuhan (tap).menu navigasi yang memudahkan pengunjung untuk kembali ke bab atas halaman blog secara cepat, tanpa perlu scroll mouse atau "usap-usap" screen.

Jika halaman discroll ke bawah, tombol Back to Top ini gres muncul. Begitu diklik, maka halaman yang sedang dibuka akan otomatis bergerak ke bab teratas.

Back to Top

yakni fitur atau widget yang "wajib" ada di blog Anda. Hal ini semoga memudahkan pengunjung dalam kembali ke bab atas halaman blog sesudah scroll ke bawah untuk membaca postingan.

Tombol Back to Top ini dapat dibilang ramah pengguna (User Friendly) alasannya yakni ramah dalam pengguna dan memudahkan pengunjung yang membuka halaman atau postingan blog Anda. Untuk Contoh Bisa dilihat Di https://jalan-top.blogspot.com

Baiklah Langsung saja menuju Cara Membuat Tombol Back to Top - Kembali ke Atas Responsive Fast Loading Di Blog

Langkah Pertama :

1. Buka Blogger - Kemudian Login / Masuk

2. Dashboard - Klik Template.

3. Silakan Edit HTML.

4.Temukan (CTRL+F) kode </body>

5. Copy&Paste arahan berikut ini, dan letakkan diatas arahan </body>

<!--Back To Top Ready Start--> <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> <!--Back To Top End -->

6.Temukan kode ]]></b:skin> atau </style>

7. Copy&Paste arahan berikut ini, dan Letakkan diatas kode  ]]></b:skin> atau </style>

 #back-to-top{background:#E73037;color:#ffffff;padding:8px 10px;font-size:24px} .back-to-top{position:fixed!important;position:absolute;bottom:20px;right:20px;z-index:999}

8. Selanjutnya kita pasang Font Awesome.

Karena tombol kembali ke atas ini arah ke atas.

Temukan arahan

</head>

Copy&Paste arahan berikut ini, dan Letakkan diatas kode

</head>

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

9. Simpan Template.

Demikian Tutorial Blogger Cara Membuat Tombol Back to Top - Kembali ke Atas Responsive Fast Loading Di Blog kali ini, jikalau terjadi kesalahan / Masih Bingung silakan jangan sungkan untuk berkomentar dibawah ini. Sekarang anda Buka postingan yang mana saja dan srool e bawah dan apakah sudah muncul tombol back to top.

sekian semoga bermanfaat

Sumber http://inirifany.blogspot.com

Berlangganan Informasi Terbaru: