Tombol kembali ke atas atau back to top umumnya sering kita lihat pada situs situs tertentu, menyerupai situs portal info online, blog dan lain sebagainya. Ditambahkannya tombol kembali keatas ini tentunya bertujuan untuk mempermudah pengunjung website itu sendiri, misalnya dikala seorang pengunjung melaksanakan scroll kebawah dikala membaca artikel yang memang panjang kemudian dikala ingin kembali mengakses sajian yang berada diatas maka pengunjung cukup menekan satu kali tombol kembali keatas dan secara otomatis pengunjung pribadi bisa mengakses sajian atau melihat sajian yang ada diatas tanpa harus repot repot melaksanakan scrolling keatas secara manual
Baca juga : Membuat Tombol Share Sosial Media di Drupal Tanpa Module
Umumnya cms cms populer dan besar menyerupai halnya wordpress ataupun drupal menyediakan plugins/module untuk memenuhi banyak kebutuhan website menyerupai salah satunya yaitu kebutuhan akan plugins yang bisa memperlihatkan kemudahan tombol kembali keatas atau back to top yang bisa dipasang secara gampang pada situs. Tapi terkadang mungkin seseorang tidak terlalu ingin mengandalkan sebuah plugins dan lebih menentukan untuk membuatnya sendiri secara manual.
Menambahkan Tombol Kembali Ke Atas di Drupal Secara Manual alias tanpa pinjaman module sangatlah mudah, sama halnya menyerupai menambahkan tombol kembali keatas pada sebuah template blogspot, yang kita butuhkan hanyalah sebuah file Jquery/javascript, css, dan sedikit menciptakan fungsi dari Javascript yang bisa memperlihatkan dampak pada tombol kembali keatas yang dibuat. Namun perlu diingat hal ini tidak bisa dilakukan secara asal asalan, alasannya yaitu di drupal ada hukum sendiri dalam melaksanakan custom/theming, kita tidak bisa pribadi seenaknya menambahkan file tertentu pada template, Anda perlu membuatnya pada subtheme sehingga tidak mengganggu template utamanya.
Kaprikornus sebelum melaksanakan praktik ini Anda sudah paham ihwal bagaimana cara theming/templating yang baik di drupal dikala ingin menambahkan fungsi atau kostum tertentu. Caranya kita cukup menciptakan sebuah sub theme, kemudian mengcopy beberapa file pendukung menyerupai file page.tpl.php, html.tpl.php, node.tpl.php, dan block.tpl.php, tekning theming ini sudah pernah saya jelaskan pada artikel/tutorial video yang berjudul “Membuat Website Cantik Dengan Drupal & Bootstrap”
Menambahkan Tombol Kembali Ke Atas di Drupal Secara Manual
- Buat class css dan id untuk menciptakan tampilan/gaya dari tombol kembali keatas, kemudian tambahkan ke custom file style.css pada template masing masing, pola stylenya bisa menyerupai ini :
/* Tombol Kembali Keatas */ #back-to-top { background:#337ab7; color:#fff; padding:8px 10px; font-size:20px; } .back-to-top { position:fixed !important; position:absolute; bottom:18px; right:20px; z-index:999; } - Selanjutnya tambahkan pemanggil div class serta baris javascript dibawah ini ke file html.tpl.php sempurna diatas tag body
<div class='back-to-top'><a href='#' id='back-to-top' title='back to top'><i class='fa fa-chevron-up'/></i></a></div> <script type="text/javascript"> jQuery(document).ready(function(){ jQuery("#back-to-top").hide(); jQuery(function () { jQuery(window).scroll(function () { if (jQuery(window).scrollTop() > 400) { jQuery('#back-to-top').fadeIn(); } else { jQuery('#back-to-top').fadeOut(); } }); // scroll body to 0px on click jQuery('#back-to-top').click(function () { jQuery('body,html').animate({ scrollTop: 0 }, 800); return false; }); }); }); </script> - Terakhir, Save semua file kemudian reload situs Anda, maka nanti pada situs Drupal Anda akan melihat tombol back to top
Sampai disini, Anda sudah berhasil Menambahkan Tombol Kembali Ke Atas di Drupal Secara Manual. Untuk variasi (gaya) lainnya dari tombol kembali keatas silahkan berkreasi sendiri sesuai dengan kemampuan css masing masing.
Video Cara Menambahkan Tombol Kembali Keatas di Drupal Secara Manual
