Rabu, 20 November 2019

Tutorial Menciptakan Tombol Kembali Ke Atas (Back To Top Button) Di Blogger

| Rabu, 20 November 2019
Cara Memasang, Menampilkan, ataupun Membuat Tombol Kembali ke Atas otomatis (Back to Top Button) Terbaru di Blogger.. di hariitu aku mau menjelaskan bagaimana tutor membikin tombol back to top nan biasanya terpasang di sebuah blog. Pernahkah kalian melihat sebuah button tanda panah keatas di sebuah blog nan apabila diklik button itu makanya mau membawa kami kehalaman atas di sebuah artikel ataupun homepage. Button back to top kembali keatas dipasang mempunyai tujuan , yaitu memudahkan para pengunjung sebagai kembali kehalaman atas di sebuah blog.

Cara memasangnya juga cukup mudah, tetapi tersedia sebagian hal ayng perlu kalian perhatikan, didalem membikin tombolitu sebaiknya pilihlah arahan script nan benar benar responsive semoga belommengganggu kinerja suatu blog.Dan tombolitu pun merupakan tombol tampilan web web ataupun blog kala kini, jadi apabila kalian ingin memasangnya silahkan simak tutornya berikut ini:

Untuk demonya kalian dapat melihat websiteitu DISINI

Atau teladan di gambar kurang lebih sepertiitu :



Cara Membuat Tombol Kembali ke Atas (Back to Top Button) di Blogger.

1. Silahkan buka dashboard blogger anda.
2. Kemudian pilih hidangan Tema/Theme.
3. Edit HTML
4. Copy arahan dibawahitu juga letakan diatas arahan </body>


<a href="javascript:" id="return-to-top"><i class="fa fa-chevron-up"></i></a>


5. Oke kini mari kami berikan tidak banyak sentuhan arahan CSS nya
6. Copy arahan dibawahitu kemudian letakan diatas kode ]]></b:skin>


#return-to-top { position:fixed; bottom:20px; right:20px; background:#000; background:rgba(0,0,0,0.7); width:50px; height:50px; display:block; text-decoration:none; -webkit-border-radius:35px; -moz-border-radius:35px; border-radius:35px; display:none; -webkit-transition:all .3s linear; -moz-transition:all .3s ease; -ms-transition:all .3s ease; -o-transition:all .3s ease; transition:all .3s ease }  #return-to-top i { color:#fff; margin:0; position:relative; left:16px; top:13px; font-size:19px; -webkit-transition:all .3s ease; -moz-transition:all .3s ease; -ms-transition:all .3s ease; -o-transition:all .3s ease; transition:all .3s ease }  #return-to-top:hover {background:rgba(0,0,0,0.9)}  #return-to-top:hover i{color:#fff;top:5px}

7. Setelah itu mari tambahkan javascriptnya
8. copy arahan dibawahitu kemudian letakan diatas arahan </body>


<script type='text/javascript'> //<![CDATA[ $(window).resize(function () { var w = $(window).width(); if (w > 800 && menu.is(':hidden')) { menu.removeAttr('style'); } }); }); $(window).scroll(function() { if ($(this).scrollTop() >= 50) { // If page is scrolled more than 50px $('#return-to-top').fadeIn(200); // Fade in the arrow } else { $('#return-to-top').fadeOut(200); // Else fade out the arrow } }); $('#return-to-top').click(function() { // When arrow is clicked $('body,html').animate({ scrollTop : 0 // Scroll to top of body }, 500); }); //]]> </script>

9. Lalu SAVE TEMPLATE juga lihat balasannya

Demikian tutor Membuat Tombol Kembali ke Atas (Back to Top Button) di Blogger. semoga berhasil :D

Related Posts

Tidak ada komentar:

Posting Komentar