Cara Memasang Widget Back to Top Untuk Memudahkan Pengunjung Blog

Widget yang satu ini biasanya sudah terpasang di template-template yang sudah mendukung fasilitas  Responsive. Fungsi dari tombol ini sesuai dengan namanya Back = Kembali to = ke Top = Atas, jadi untuk memudahkan pembaca ketika ingin kembali ke bagian menu atas.
Namun, untuk template-template yang memiliki fasilitas Sticky Menu Navigasi, tidak perlu lagi memasang widget ini.

Kali ini saya akan membagikan bagaimana Cara Memasang Widget Back to Top Untuk Memudahkan Pengunjung Blog kita dengan bantuan javascript fontawesome.io.
Silahkan anda masuk dulu ke blogger.com, lalu :

• Pilih Tema 

• Pilih Edit Html

• Masukan Kode Script jQuery dan Font Awesome-nya diatas kode </head>

Kode Scipt jQuery

<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>

Kode Font Awesome

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

*Jika anda menemukan kode-kode diatas, didalam template anda. Maka lewati saja langkahnya.*

• Lalu masukan kode CSS berikut ini diatas kode ]]></b:skin> atau kode </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}

• Kemudian masukan kode HTML dan Javascript berikut ini diatas kode </body>

<div class='back-to-top'><a href='#' id='back-to-top' title='back to top'> <i class='fa fa-arrow-circle-o-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>

Anda bisa mengganti icon yang saya block dengan warna "merah" sesuai dengan selera anda, untuk mengganti iconnya anda bisa langsung kunjungi website resmi "Font Awesome" di : http://fontawesome.io/icons


Mungkin sekian dulu dari saya, jika nanti ada kendala silahkan tinggalkan pesan di kolom komentar.
Terima kasih telah meluangkan waktunya untuk melihat-lihat widget di blog saya ini.

Jangan lupa cek dulu widget-widget yang lainnya, siapa tahu ada widget lain yang anda sukai.