Membuat Tombol Back To Top Di CMS WordPress

MreneSinau – Kembali lagi nihhh, Admin hari ini akan membagikan Tips dan TrikMembuat Tombol Back To Top Di CMS WordPress“.  Bagi anda yang memiliki website menggunakan CMS WordPress Tips dan Trik ini wajib anda coba. Tidak usah panjang lebar berikut adalah artikelnya, simak baik – baik yaa,,,

Diantara navigasi yang akan memudahkan pengunjung blog adalah dengan dipasangnya tombol back to top atau tombol perintah kembali ke atas di blog. Fungsi tombol back to top atau kembali ke atas adalah untuk memudahkan jika kita ingin kembali ke halaman atas blog dengan cepat tanpa harus menggeserkan scroll mouse.

Lebih jelasnya Anda bisa lihat di halaman blog ini, geser scroll mouse kebawah maka akan tampak sebuah tombol panah dan ketika kita klik maka halaman blog akan otomatis kembali ke atas dengan cepat. Tombol Back To Top atau Kembali Ke Atas agar lebih menarik tampilan nya jika menggunakan gambar format .png dan dipasang dengan efek Javascript/jQuery.

Berikut adalah Cara Membuat Tombol Back To Top Di CMS WordPress : 

1. Hanya menggunakan Script HTML
Sebelum menginjak ke langkah cara pasang tombol go top di WordPress, seperti yang sudah admin terangkan diatas Anda harus mempersiapkan gambar icon format .png sebagai tampilan tombol back to top. Untuk memudahkan bisa memanfa’atkan web online penyedia khusus tombol icon. Untuk dijadikan tombol back to top WordPress Anda, seperti Findicons dengan URL findicons.com/search/back-to-top. Atau anda juga bisa meng upload gambar icon format .png di hosting anda.
Setelah menemukan gambar yang tepat, upload gambar dan Anda copy URL-nya. Berikut adalah kode HTML untuk dipasang di blog Anda. Silakan copy dan paste di Widget Text WordPress.

<div style=”display : scroll; position : fixed; bottom : 10px; right : 10px; “>
<a href=’#’ title=’Top’> <img src=’http://alamat URL gambar icon back to top’ /></a></a>
</div>

2. Membuat Tombol Back To Top Di WordPress menggunakan jQuery
Langkah-langkahnya hampir sama seperti cara sebelumya hanya. cara ini hanya di tambahkan sedikit Script jQueri dan Javascript. Sebelum melakukan cara ini silahkan anda download script Javascriptnya dan upload melalui cPanel hosting Anda. Kemudian tempatkan di folder Javascript (js) themes yang Anda gunakan. Link download JQUERY SCROLL BACK TO TOP.

Setelah Anda sukses menempatkan script jQuery diatas, selanjutnya tambahkan juga script berikut di footer.php WordPress Anda.

Langkah terakhir tambahkan juga style berikut dan tempatkan di style.css WordPress Anda.

Style diatas hanya contoh saja, silahkan Anda modifikasi lagi sesuai kebutuhan dan pada background: url(“images/scrolltop.png”); silahkan Anda ganti dengan URL gambar icon back to top yang Anda upload. Dalam contoh tersebut, saya mencantumkan gambar icon back to top .png di folder images themes yang saya gunakan.

Demikian sedikit Artikel mengenai Membuat Tombol Back To Top Di CMS WordPress. Semoga tulisan singkat ini bisa memberikan manfaat bagi anda semua para pembaca. Jangan lupa tinggalkan komentar anda  di kolom bawah ini

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *