Home / WordPress / Cara Membuat Tombol Back To Top Di WordPress

Cara Membuat Tombol Back To Top Di WordPress

Cara Membuat Tombol Back To Top Di WordPress – 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.

Baca Juga : Begini Cara Memasang Favicon di Blog WordPress

Tombol Back To Top atau Go Top atau Kembali Ke Atas agar lebih menarik tampilannya menggunakan gambar format .png dan dipasang dengan efek Javascript/jQuery. Untuk WordPress.com atau WordPress yang masih gratisan, tombol back to top dengan efek javascript atau jquery sayangnya tidak bisa dipasang. Tapi jangan khawatir disini saya akan memberi solusinya dan tampilannya juga tidak kalah menarik dengan tombol back to top efek javascript atau jquery.

Cara-Membuat-Tombol-Back-To-Top-Di-WordPress

Jika Anda tertarik dan ingin mempraktekkan di blog Anda caranya mudah, pertama Anda buat gambar untuk dijadikan icon tombol back to top dengan program pengolah gambar seperti Adobe Photoshop, CorelDRAW, dan lain-lain. Format yang direkomendasikan agar background tidak terbawa atau transfaran, Anda buat gambar icon dengan format .png.

Cara Membuat Tombol Back To Top Di WordPress.com

Untuk WordPress.com karena tidak bisa menggunakan efek Javascript atau jQuery, maka kita akan sedikit mengakalinya. Sebelum menginjak ke langkah cara pasang tombol go top di WordPress gratisan, seperti yang sudah saya 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.

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>

Cara Membuat Tombol Back To Top Di WordPress.org

Dengan cara diataspun untuk WordPress.org bisa menerapkannya. Tapi agar tombol back to top terlihat lebih menarik, kita tambah Javascript atau jQuery pada stylenya. Contoh di blog ini, saya menggunakan tombol back to top dengan efek jQuery juga. Ketika halaman blog berada di bagian atas, maka tombol back to top tidak terlihat, tapi ketika halaman blog di scroll ke bawah tombol back to top baru terlihat dan bisa Anda klik untuk mempercepat proses kembali ke atas halaman blog.

Cara Membuat Tombol Back To Top Di WordPress Dengan jQuery

Maka langkah-langkahnya adalah sebagai berikut : Download script Javascriptnya dan upload melalui cPanel hosting Anda  dan tempatkan di folder Javascript (js) themes yang Anda gunakan.

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

<a id="top" href='#'><i class="icon-up-bold"></i></a>
 <script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
 <script type="text/javascript">
 var toper = $('a#top');
 $(window).scroll(function(){
 if ($(this).scrollTop() > 100) {
 toper.fadeIn( 200 );
 } else {
 toper.fadeOut( 200 );
 }
 });
 toper.click(function(){
 $('html, body').animate({scrollTop:0}, 500);
 return false;
 });
 </script>
 <script type="text/javascript">
 var s = skrollr.init();
 </script>

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

a#top {
 height: 40px;
 width: 40px;
 position:fixed;
 bottom:45px;
 right:20px;
 text-indent:-9999px;
 display:none;
 background: url("images/scrolltop.png");
 -webkit-transition-duration: 0.4s;
 -moz-transition-duration: 0.4s; transition-duration: 0.4s;
 }
 a#top:hover {
 -webkit-transform: rotate(360deg) ;
 background: url("images/scrolltop.png") no-repeat;
 }

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.

About InfoMenarik

Berbagi Info & Tips Trik Menarik tentang Seputar EPS-Topik Korea, Kesehatan, Microsoft Office, Pendidikan, Photoshop, Software, Teknologi, WordPress Terlengkap dan Gratis.

8 comments

  1. bang bagi plugin popular ama fvaorti postnya dong :) ke email [email protected][dot]com ya, makasih

    • Coba cari dideretan plugin mas dengan kata kunci “Popular Post”. Disitu banyak pilihannya, malah lebih keren daripada popular post web ini.

  2. Kalo icon diganti dengan tulisan bisa gk? artinya tulisan di klik nnti langsung scroll ke atas, yang perlu diubah bagiana manaya yaa?mohon penjelasannya

    • Jika ingin menggunakan teks biasa, mas tinggal memasang tulisan “Back To Tp” di file footer.php tempalte yang digunakan.

  3. excelent….bagus artikelnya dan mudah dicerna…
    ada artikel masukin script iklan di wordpress gratisan nggak…makasih

  4. ASK
    Gan cara pasang kodenya gimana ya? Yang selain pasang di cpanel? saya pasang di css kustom kok nggak bisa ya?
    Thanks sebelumnya

    • Saya rasa artikelnya sudah jelas gan. Jika tidak mau pasa kode melalui cpanel, bisa juga pasang kode melalui dashboard wp-admin. Pasang kode di style footer dan untuk memperindah tampilan pasang juga kode di style.css.

  5. Berhasil… cakep… terima kasih petunjuknya…..ada ga yang efek menggulungnya terlihat ? tadi saya memekai yang

    .

Leave a Reply

Your email address will not be published. Required fields are marked *