Blog Blogging. Tombol Back To Top atau kembali ke atas dalam sebuah halaman postingan atau halaman utama sebuah blog adalag merupakan sebuah fasilitas blog (sebut saja widget) yang kita pasang pada halaman blog dalam bentuk sebuah tombol yang berfungsi untuk mengembalikan pembaca ke bagian puncak sebuah halaman blog (bila tombol tersebut di tekan). Widget ini sangat membantu pengunjung manakala ia berkeinginan untuk melihat kembali bagian atas sebuah blog. Dalam artikel ini, penulis akan membahas pembuatan beberapa macam variasi tombol Back To Top tersebut.
Cara Kerja Tombol Back To Top.
Pada umumnya tombol Back To Top ini akan berfungsi secara otomatis manakala batas maksimal ukuran layar monitor telah terlewati, artinya tombol Back To Top ini akan muncul secara otomatis untuk memfasilitasi artikel atau halaman blog yang panjang, serta akan membawa pengunjung atau visitor blog kembali ke bagian atas sebuah halaman blog atau postingan tersebut. Sebaliknya, untuk postingan atau ukuran halaman blog yang tidak melebihi batas ukuran panjang layar monitor, tombol Back To Top ini tidak akan muncul.
Seiring dengan perkembangan kreatifitas para blogger dewasa ini, telah muncul banyak variasi atau model tombol Back To Top ini, mulai dari yang paling sederhana sampai kepada yang menambahkan efek-efek khusus semacam efek memantul, efek scrol halus dan lain-lain.
Untuk pembuatan widget ini, biasanya diperlukan paduan sinergis antara script CSS, Javascript atau Jquery dengan script HTML, yang mana ketiganya bekerja sesuai dengan fungsinya masing-masing untuk menciptakan sebuah widget yang lumayan keren. Script CSS berfungsi untuk mendekorasi atau mengatur tata letak setiap script HTML yang kita definisikan, script HTML untuk mendefinisikan tag-tag HTML sebagai pembungkus atau fondasi web yang akan dimanipulasi, sedangkan Javascript atau JQuery berfungsi untuk membuat tampilan menjadi lebih interaktif.
Back To Top dengan efek memantul (bounce).
Masuk ke template blog anda, edit HTML template dan cari kode </head>, kemudian letakkan script berikut ini.
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>
<script type='text/javascript'>
$(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#BounceToTop').slideDown(200); } else { $('#BounceToTop').slideUp(300); } });
$('#BounceToTop').click(function() { $('body,html').animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); });
</script>
Perhatikan script yang tercetak tebal, bilamana template anda sudah memiliki script tersebut atau dengan versi yang lainnya, maka anda tidak perlu mengcopy script itu.
Selanjutnya, letakkan script berikut ini di atas kode </body>
<style type='text/css' scoped='scoped'>
#BounceToTop{position:fixed; bottom:0px; right:3px; cursor:pointer;display:none}
</style>
<div id='BounceToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid3eKkbFdIR1qK7PiP1ibDrhLPB8_J5PyBHRWeUa5qKEfUzQokRJ4T30pIzSjdyXsygc7pTf2MOkZykB6ilJ9YJHPYAFxUcbp4f4oFoJf_jd1po85dIA17pKtxQiFcg8jd9YvNEQ0otOls/s1600/arrow-up_basic_blue.png'/></div>
Berikutnya, simpan template blog anda.
Back To Top dengan efek scrol halus ke atas.
Masuk ke template blog anda, edit HTML template dan cari kode </head>, kemudian letakkan script berikut ini.
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>
<script type='text/javascript'>
$(function() { $(window).scroll(function() {if($(this).scrollTop()>500) { $('#ScrollToTop').fadeIn()}
else { $('#ScrollToTop').fadeOut();}});$('#ScrollToTop').click(function(){$('html,body').animate({scrollTop:0},700);
return false})});
</script>
Selanjutnya, letakkan script berikut ini di atas kode </body>
<style type='text/css' scoped='scoped'> #ScrollToTop{position:fixed; bottom:0px; right:3px; cursor:pointer;display:none} </style> <div id='ScrollToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid3eKkbFdIR1qK7PiP1ibDrhLPB8_J5PyBHRWeUa5qKEfUzQokRJ4T30pIzSjdyXsygc7pTf2MOkZykB6ilJ9YJHPYAFxUcbp4f4oFoJf_jd1po85dIA17pKtxQiFcg8jd9YvNEQ0otOls/s1600/arrow-up_basic_blue.png'/></div>
Demikianlah uraian penulis tentang variasi pembuatan tombol Back To Top, semoga bermanfaat.
Baca Juga Artikel Terkait Lainnya: