Menambahkan Tombol Kembali Keatas Di Drupal Secara Manual

Tombol kembali ke atas atau back to top umumnya sering kita lihat pada situs – situs tertentu, menyerupai situs portal diberita online, blog dan lain sebagainya. Dimenambahkannya tombol kembali keatas ini tentunya bertujuan untuk mempergampang pengunjung website itu sendiri, misalnya saat seorang pengunjung melaksanakan scroll kebawah saat membaca artikel yang memang panjang kemudian saat 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 mempersembahkan akomodasi tombol kembali keatas atau back to top yang bisa dipasang secara simpel pada situs. Tapi terkadang mungkin seseorang tidak terlalu ingin mengandalkan sebuah plugins dan lebih menentukan untuk menciptakannya sendiri secara manual.

Menambahkan Tombol Kembali Ke Atas di Drupal Secara Manual alias tanpa menolongan module sangatlah gampang, sama halnya menyerupai menambahkan tombol kembali keatas pada sebuah template blogspot, yang kita butuhkan spesialuntuklah sebuah file Jquery/javascript, css, dan sedikit membuat fungsi dari Javascript yang bisa mempersembahkan 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 menciptakannya pada subtheme sehingga tidak mengganggu template utamanya.

Makara sebelum melaksanakan praktik ini Anda sudah paham wacana bagaimana cara theming/templating yang baik di drupal saat ingin menambahkan fungsi atau kostum tertentu. Tekniknya kita cukup membuat 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 melaluiataubersamaini Drupal & Bootstrap”

Menambahkan Tombol Kembali Ke Atas di Drupal Secara Manual

Buat class css dan id untuk membuat tampilan/gaya dari tombol kembali keatas, kemudian menambahkan 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 menambahkan 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 tiruana 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 Teknik Menambahkan Tombol Kembali Keatas di Drupal Secara Manual