Cara Membuat Back To Top pada Blog

Lama nih aku tidak membuat tulisan. Karena sibuk mengikuti kepanitiaan Perkemahan ODT 2012/2013 di sekolahku πŸ˜€

Di sini aku mau sharing cara membuat tombol Back To Top.Back To Top

Back To Top sangat memudahkan pengunjung blog untuk menggulung halaman ke atas. Di google banyak tutorial yang menjelaskan tentang cara membuat widget keren tersebut. Namun kali ini saya menggunakan plugin UItoTop jQuery dynamic scroll-to-Top plugin. Demo bisa anda lihat di sini.

  1. Pertama kali buka file style.css atau file cssΒ anda. Sisipkan kode berikut
    #toTop {
    	display:none;
    	text-decoration:none;
    	position:fixed;
    	bottom:10px;
    	right:10px;
    	overflow:hidden;
    	width:51px;
    	height:51px;
    	border:none;
    	text-indent:100%;
    	background:url(https://lh4.googleusercontent.com/-XP_1RMgRMTU/UMXYWct5-PI/AAAAAAAAAoI/H_SnBIE5e4s/s102/ui.totop.png) no-repeat left top;
    }
    
    #toTopHover {
    	background:url(https://lh4.googleusercontent.com/-XP_1RMgRMTU/UMXYWct5-PI/AAAAAAAAAoI/H_SnBIE5e4s/s102/ui.totop.png) no-repeat left -51px;
    	width:51px;
    	height:51px;
    	display:block;
    	overflow:hidden;
    	float:left;
    	opacity: 0;
    	-moz-opacity: 0;
    	filter:alpha(opacity=0);
    }
    
    #toTop:active, #toTop:focus {
    	outline:none;
    }
  2. Kemudian sisipkan kode berikut di atas tag </body>
            <!-- jquery -->
            <script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
            <!-- easing plugin ( optional ) -->
            <script src="http://back-to-top-plugin.googlecode.com/files/easing.js" type="text/javascript"></script>
            <!-- BacktoTop plugin -->
            <script src="http://back-to-top-plugin.googlecode.com/files/totop.js" type="text/javascript"></script>
            <!-- Starting the plugin -->
            <script type="text/javascript">
    		$(document).ready(function() {
    			/*
    			var defaults = {
    	  			containerID: 'toTop', // fading element id
    				containerHoverID: 'toTopHover', // fading element hover id
    				scrollSpeed: 1200,
    				easingType: 'linear' 
    	 		};
    			*/
    			$().UItoTop({ easingType: 'easeOutQuart' });
    		});
    	</script>
  3. Jangan lupa hasil pekerjaan anda.

Untuk pengguna WordPress, untuk masalah ini sudah ada pluginnya, namanya Dynamic “To Top” Plugin. Tapi karena saya meminimalisir penggunaan plugin jadi menggunakan cara tanpa plugin πŸ˜€


58 Comments

  • jonibalbo

    December 21, 2012

    bagus mas, kembangkan terus ngeblok juga belajar banyak hal yang positif, mumpung masih muda. ok sukses untuk Dimas πŸ™‚

    Reply
  • r10

    December 21, 2012

    pengen banget blogspot tinggal pasang plugin

    males pasang script soalnya :p

    Reply
  • arif

    December 22, 2012

    theme yg saya pake ada fasilitas back to top,
    makasih infonya πŸ™‚

    Reply
  • Yusron Krista

    December 22, 2012

    nanti deh saya coba pasang dihalaman postingan (soalnya di homepage gak terlalu panjang2 amat) :p
    makasih mas dhimas

    Reply
  • risyadsamawa

    December 22, 2012

    terima kasih informasinya, dik Dhimas. Namun saya pengguna blogspot, agak berbeda script dan cara menggunakannya πŸ™‚

    Reply
  • Salim

    December 22, 2012

    dulu sulit cari tutorial scroll top pake jquery seperti ini, dunia tutorial makin berkembang yah … πŸ˜€

    Reply
  • Leo Ari Wibowo

    December 24, 2012

    Kalau bisa buat sendiri, kenapa harus pakai plugin? πŸ™‚

    Reply
    • Dhimas Kirana

      December 27, 2012

      ini buat sendiri tapi dengan “plugin” orang lain, bukan plugin dari wordpress direktori. hehehe :p

      Reply
  • Alid Abdul

    December 24, 2012

    Kayaknya emang penting neh tombol back to top, tapi ribet ah, nanti saya cari pluginnya aja deh πŸ™‚

    Reply
    • Dhimas Kirana

      December 27, 2012

      ribet gimana, mudah kok, ane aja bisa. wkwkwk
      kalah nih sama anak SMA seperti aku :p *piss mas πŸ˜€

      Reply
  • alief

    December 25, 2012

    wah, mantab ini tutorialnya. pasti akan sangat berguna

    Reply
  • ndaroini

    December 25, 2012

    langsung praktek ah, biar lebih gampang lagi kalau mau kembali ke header, gak perlu lagi geser mouse

    Reply
  • SIge

    December 26, 2012

    HI salam kenal, postingan yang informatif..

    Reply
  • Mas Adi

    December 27, 2012

    Tutorial mantabs… thanks om… πŸ˜€

    Reply
  • Je-Fry | Pray To Beloved God

    December 27, 2012

    Heheheh sebenernya sama ajah sie plug in dengan manual. πŸ˜€

    Reply
    • Dhimas Kirana

      December 28, 2012

      iyaa mas, bener. tapi kalau plugin gag perlu utak-atik karena plugin nya yang telah bekerja “utak-atik” nya πŸ˜€

      Reply
  • Putra Eka

    December 27, 2012

    Udah dicoba dan tak berhasil wkwkwk.. mungkin ada yang salah. Nanti tak coba lagi πŸ˜€

    Reply
    • Dhimas Kirana

      December 27, 2012

      semangat mas, trial dan error. saya pertama nyoba juga gagal tapi akhirnya berhasil, mungkin jquery nya bentrok..

      Reply
  • AhSyai

    December 28, 2012

    keren neh.. boleh lah tar dicoba..hihi..

    Reply
  • aqomadin

    December 28, 2012

    bikin back to top nyari theme yg udah dipasang aja πŸ™‚
    Pernah nyoba utak-atik eh yg ada error trus skrg msh trauma πŸ™

    Reply
    • Dhimas Kirana

      January 1, 2013

      wkwkw, kalau saya mah gag trauma, trial dan error itu buat aku semangat utak-atik.. kalau mentok error ya mulai dari awal lagi πŸ˜€

      Reply
  • Rifqi

    December 28, 2012

    Hmmn, keren ni bisa hemat waktu 0.03s daripada harus naikkan scroll. nice kk

    Reply
  • Virmansyah

    December 30, 2012

    wah kebetulan sekali saya sedang mencari ini, πŸ™‚ terima kasih

    Reply
  • sakura suri

    December 30, 2012

    bisa nggak milih warna back to topnya ga item? biru atau pink gitu?
    *dikasih hati minta jantung*
    btw gimana kemahnya? seru tak? πŸ˜€

    Reply
    • Dhimas Kirana

      January 1, 2013

      bisa mbak, tapi ya harus bikin css sprites untuk mengganti. hehehe..
      seru banget kok, asyik pokoknya πŸ˜€

      Reply
  • Ichink

    December 30, 2012

    Kalo aku gak pake j-query kaya gitu, cukup kode html biasa ja. Akibatnya ya tampilannya seadanya saja. Blogku yang satu lagi malahan gak dikasih tombol back to top xixixi

    Reply
    • Dhimas Kirana

      January 1, 2013

      wah, kurang keren tuh mas, gag smooth scrollingnya πŸ˜€

      Reply
  • Ummulnurien

    December 31, 2012

    kalau pake laptp, insya Allah akan dicoba,
    Terimakasih ilmunya

    Reply
  • Blog nova13

    December 31, 2012

    jadi kalo pake plugin ini, lebih smooth gitu pas di klik dan naik ke atas πŸ™‚

    Reply
  • I Putu Giovanni Eliezer

    December 31, 2012

    thanks info nya broo
    wajib itu minimalisir plugin buat meningkatkan page speed nya hhe πŸ˜€

    Reply
    • Dhimas Kirana

      January 1, 2013

      memang mas, google menyukai blog dengan speed cepat πŸ˜€

      Reply
  • Je-Fry | Hati

    January 7, 2013

    Heheheh kalau saya menggunakan plug in kang jadi lebih simpel, kagak usah ribet ribet….. πŸ˜€

    Reply
    • Dhimas Kirana

      January 12, 2013

      yap, tiap orang beda-beda cara tetapi tujuannya sama. wkwkwk πŸ˜€

      Reply
  • HALAMAN PUTIH

    January 22, 2013

    Ngeblog adalah sesuatu yang positif, daat berbagi ilmu yang bermanfat bagi kita semua.

    Reply
  • dzikrul akbar

    January 31, 2013

    file css tuh apa?

    Reply
    • Dhimas Kirana

      February 6, 2013

      file css tuh untuk memberi style pada tampilan website mas πŸ˜€

      Reply
  • satriyanews

    February 27, 2013

    nemu juga tutorialnya, lengkap dengan css dan htmlnya,. ijin nyoba dulu gan. πŸ™‚

    Reply
  • rere

    April 6, 2013

    thx bang infonya bisa mempercantik blog ane ni
    laraknlirik.blogspot.com

    Reply
  • Blog Banyak Pengunjung

    November 22, 2014

    pake plugin “dynamic to top” rupanya, nemu juga πŸ™‚ makasih mas dhimas

    Reply
  • exsanyes

    September 16, 2015

    gan mautanya itu html sudah tdk akan pengaruh tampilan web ya gan, dan pasti support atau gimana gan, thanks.

    Reply
    • Dhimas Kirana

      October 15, 2015

      ya cuma pengaruh di style back to top nya, dan pasti support..

      Reply

Kebijakan Komentar (Mulai 16 Oktober 2015)

**Komentar akan ditampilkan setelah disetujui oleh admin.

**DILARANG MENGGUNAKAN FITUR KOMENTAR UNTUK PROMOSI. SEKALI PROMOSI AKAN LANGSUNG DIHAPUS.

**Mohon berkomentar yang bermutu sesuai dengan isi tulisan.

Leave a Reply