Cara Membuat Tombol Back To Top Dengan Css

Cara Membuat Tombol Kembali Keatas di blog Dengan Jquery - Ke bayakn oarang yang ingin memasang menu back to top/Kembali Keatas ini yang sering dan wajib bagi blog harus memasang Back to Top/Kembali Keatas ini agar mempermudah si pengunjung blog kita tidak per repot-repot untuk memutar Scroll pada muse, jadi agar lebih baik anda memasang menu Back to Top/Kembali Keatas bukan hanya menu Back to Top/Kembali Keatas yang bisa yasa kara kode Css yang saya akan kasih ke pada anda Back to Top/Kembali Keatas Jquery ,

Pasti anda belum tau. pada suwatu anda memasung blog yang memasakai temlate prenium pasti di lengkapi dengan back to top dengan persi Jquery karna Jquery ini sangat terpercaya dan banyak di gunakan para blogger karan Jquery ini bukan hanya bagus tapi tidak terlalu berat pada loading blog kita anda bisa lihat gambar di bawah ini.


Jika kamu minat pasang pada blog anda sekrang kita mulay saja pada tutorialnya kali ini karan saya tidak mau panjang lebar kita lanjut saja pada tutorial Cara Membuat Tombol Kembali Keatas di blog Dengan Jquery di bawah ini.

Langkah Awal
1. Pilih menu Template >> dan pilih menu Edit Hml
2. Tean Kibot pada Pc CTRL+F kemudian kamu cari saja kode ]]></b:skin> jika sudah ketemu anda bisa anda copykan saja kode di abwah di atas kode ]]></b:skin> ini.

/*----------------------------------------------------------------
Blog Tutorial Yang Mebahas Tentang, Blog, Template,Android, Komputer Dll.
Oleh: AdaniBlog
Blog: Adani -:[TUTORIALCID]:-
URL : http://tutorialcid.blogspot.co.id
Link Tutorial :
-----------------------------------------------------------------*/
/* Back To Top */
#back-to-top{visibility:hidden;background-color:#4c4c4c;color:#fff;width:42px;height:42px;text-align:center;line-height:42px;position:fixed;bottom:20px;right:20px;z-index:90;cursor:pointer;opacity:0;border-radius:3px;-webkit-transform:translateZ(0);transition:all .4s}
#back-to-top .fa{font-size:22px;}
#back-to-top:hover{background-color:#46a3fa;color:#fff;opacity:1;}
#back-to-top.show{visibility:visible;opacity:1;}

3. Jika sudah kamu Save dulu saja kemduian masih dalam Edit Html kamu cari lagi kode </body> dan letakan kode di bawah di atas kode tersebut.

<script type='text/javascript'>
//Back To Top jQuery
if ($('#back-to-top').length) {
    var scrollTrigger = 200, // px
        backToTop = function () {
            var scrollTop = $(window).scrollTop();
            if (scrollTop > scrollTrigger) {
                $('#back-to-top').addClass('show');
            } else {
                $('#back-to-top').removeClass('show');
            }
        };
    backToTop();
    $(window).on('scroll', function () {
        backToTop();
    });
    $('#back-to-top').on('click', function (e) {
        e.preventDefault();
        $('html,body').animate({
            scrollTop: 0
        }, 700);
    });
}
</script>

Keterangan 

• Berikut ini penjelasan angka yang ada di dalam jQuery :
• 200 = Jarak dari atas saat tombol muncul(dalam pixel)
• 0 = Posisi akhir dari atas saat akan back to top/kembali(dalam pixel)
• 700 = kecepatan kembali ke atas (dalam milisecond)

4. Langakah Terakhir masih dalam EDIT HTML kamu cari lagi kode </body> dan letkan kode di bawah di atas kode </body>

<a href="#" id="back-to-top" title="Back to top"><i class='fa fa-chevron-up'></i></a>

5. Langkah Terkhir kamu tinggal copy kan saja ini di bawah dan tempatkan kode di bawah di atas kode </Head> ini.

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

 6. Jika sebaliknya pada tempalte sudah anda kode CSS Font Awesome ini anda ga usah pakai ,demikianlah pada tutorial Cara Membuat Tombol Kembali Keatas di blog Dengan Jquery ini semoga bisa bermanpaat bagi anda ,jika kamu suka pada psotingan yang saya buat ini ? anda bisa like dan shree pada teman-teman blogger anda wasalam.

Lokasi:

Berbagi :