Cara Menciptakan Tombol Back To Top Responsive Fast Loading

Baca Juga

Tombol "Back To Top" yaitu Tombol yang mengarahkan kita untuk kembali ke atas. Back to Top yaitu fitur yang wajib ada di blog anda. Hal ini semoga memudahkan pengunjung dalam kembali ke bab atas halaman blog sehabis scroll kebawah untuk membaca postingan.

Tombol back to top ini dapat dibilang User Freandly alasannya ramah dalam pengguna dan memudahkan pengunjung yang membuka halaman atau postingan blog anda. Tombol kembali ke atas ini merupakan demam isu dan desain website dari situs-situs ternama juga menggunakannya, menyerupai Yahoo dan situs-situs informasi lainnya.
alasannya Tombol kembali ketas ini alasannya memakai arah panah mengatakan keatas, jadi kita perlu memasang Font Awesome di blog kita. Oke pribadi saja ikuti langkah-langkah berikut ini.

Cara Pertama :

1. Buka Blogger - Kemudian Login

2. Dashboard - Template.
3. Silakan Edit HTML.

Prosese Pembuatan dan Pemasangan :

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

/* Back To Top */ #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}

3. Jika sudah? Selanjutnya kita pasang Font Awesome. Karena tombol kembali ke atas ini arah ke atas.
4. Temukan arahan </head>
5. 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>

Catatan :

Kode </link> berwarna merah bila diletakkan diatas arahan </head>, Namun hal itu tidak dilema dan tidak ada kesalahan arahan XML.

Screenshoot :

6. Terakhi, Temukan (CTRL+F) kode </body>

7. 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 -->

8. Simpan Template.

Demikian Tutorial Blogger kali ini, bila terjadi kesalahan silakan jangan sungkan untuk berkomentar dibawah ini. Terakhir silakan lihat postingan anda. Sekian dari saya, Semoga Bermanfaat! Thanks for Reading & Sharing : Cara Membuat Tombol Back to Top Responsive Fast Loading