Skip to main content

Cara Buat Tombol Back To Top di Blogger

Cara Buat Tombol Back To Top di Blogger
Back To Top
XDTPD Blogs | Hallo sahabat blogger berjumpa lagi di artikel terbaru ini, kali ini saya akan membagi sebuah cara ataupun tutorial tentang bagaimana cara but tombol back to top di blogger dengan menggunakan Javascript dan jQuery. Pasti sudah taukan apa itu tombol back to top ?

Back To Top adalah sebuah tombol yang akan muncul saat pembaca telah membaca artikel yang sangat panjang sehinnga melebihi batas layar di laptop maupun komputer sobat. Dengan adanya tombol back to top ini, pembaca blog kita akan lebih mudah untuk menscroll kembali keatas hanya dengan sekali klik pada tombol back to top tersebut. Biasanya banyak para blogger ataupun pembuat template yang sudah menggunaka tombol back to top ini pada blog maupun template yang mereka buat.

#CARA BUAT TOMBOL BACK TO TOP DI BLOGGER


Adapun caranya akan saya jelaskan dibawah ini. Sebelum saya ingin memberitahukan kepada sobat blogger semuanya bahwa disini kita akan membuat dua versi tombol back to top dengan menggunakan Javascript dan jQuery dan sedikit design dengan menggunakan CSS. Baiklah, silahkan ikuti lang-langkah yang ada dibawah ini dengan sesama.

1. Tombol Back To Top Bounce ( Efek Memantul)


Silahkan masuk terlebih dahulu ke Dashboard Blogger sobat dan klik pada menu Template dan pilih Edit HTML. Kemudian cari kode </head> dan masukkan kode dibawah ini tepat diatas kode </head> tersebut.

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>

Kode diatas adalah kode Framework jQuery, jika pada template yang sobat pakai sudah terdapat kode tersebut maka silahkan lewati saja langkah tersebut.

Selajutnya, silahkan masuk ke menu Tata Letak kemudian pilh tambahkan widget pilih HTML/Javasript dan masukkan kode dibawah ini.


<style type='text/css' scoped='scoped'>
#BounceToTop{position:fixed; bottom:0px; right:3px; cursor:pointer;display:none}
</style>
<div id='BounceToTop'><img alt='Back to top' src='http://2.bp.blogspot.com/-MFhU3vLp5ho/UiaBZeA1McI/AAAAAAAAAQs/MrzW2ljP5mA/s1600/arrow-up_basic_blue.png'/></div> 

Langkah berikutnya, masukkan juga Javascript dibawah ini juga tepat diatas kode </head> pada HTML templae sobat.

<script type='text/javascript'>
$(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#BounceToTop').slideDown(200); } else { $('#BounceToTop').slideUp(300); } });
$('#BounceToTop').click(function() { $('body,html').animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); });
</script>

2. Cara Buat Tombol Back to Top dengan Efek Geser yang Halus


Pertama, silahkan masukkan kode yang ada dibawah ini tepat diatas kode </head> pada HTML blog sobat.

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>

Masih dibagian kode </head> Silahkan masukkan juga kode dibawah ini juga tepat diatas kode </head> tersebut.

<script type='text/javascript'>
$(function() { $(window).scroll(function() {if($(this).scrollTop()&gt;500) { $(&#39;#ScrollToTop&#39;).fadeIn()}
else { $(&#39;#ScrollToTop&#39;).fadeOut();}});$(&#39;#ScrollToTop&#39;).click(function(){$(&#39;html,body&#39;).animate({scrollTop:0},700);
return false})});
</script>

Selanjutnya simpan template sobat dan pergi menu Tata Letak, kemudian pilih tambahkan widget dan pilih HTML/Javascript.

<style type='text/css' scoped='scoped'> #ScrollToTop{position:fixed; bottom:0px; right:3px; cursor:pointer;display:none} </style> <div id='ScrollToTop'><img alt='Back to top' src='http://2.bp.blogspot.com/-MFhU3vLp5ho/UiaBZeA1McI/AAAAAAAAAQs/MrzW2ljP5mA/s1600/arrow-up_basic_blue.png'/></div>

Simpan template sobat dan selesai.

Itulah langkah-langkah untuk membuat tombol back to top diblogger dengan dua versi. Jika ada pertanyaan silahkan tanyakan pada kolom komentar dibawah. Dan jangan lupa untuk berkunjung kembali karena XDTPD Blogs akan selalu mengupdate artikel menarik lainnya setiap saat yang patut sobat ikuti.

Comments

Popular posts from this blog

9 Tips Untuk Membangun Bisnis Sukses

Untuk sukses dalam bisnis saat ini, Anda harus fleksibel dan memiliki perencanaan dan kemampuan organisasi yang baik. Banyak orang memulai sebuah bisnis yang berpikir bahwa mereka akan menghidupkan komputer mereka atau membuka pintu mereka dan mulai menghasilkan uang, hanya untuk menemukan bahwa menghasilkan uang dalam bisnis jauh lebih sulit daripada yang mereka duga. Anda dapat menghindari hal ini dalam usaha bisnis Anda dengan meluangkan waktu dan merencanakan semua langkah penting yang Anda butuhkan untuk mencapai kesuksesan.
9 Tips Untuk Membangun Bisnis Sukses
Nah, bagi anda yang baru memulai maupun sedang mengembangkan bisnis anda ketahap selanjutnya. Maka beberapa tips dibawah ini mungkin bisa saja membantu anda dalam menjalankan bisnis tersebut. Berikut adalah 9 Tips Untuk Membangun Bisnis Yang Sukses.
1. Teratur
Agar sukses dalam bisnis Anda perlu diatur. Organisasi akan membantu Anda menyelesaikan tugas dan tetap berada di atas hal-hal yang harus dilakukan. Cara yang baik untuk…

Apa itu Pinjaman Mikro dan Cara Mendapatkannya?

Setiap orang memiliki saat-saat ketika tidak ada cukup uang untuk membeli sesuatu, dan tidak mungkin menunggu gaji. Misalnya, Anda ingin membeli sesuatu, yang sekarang diskon, tapi tidak cukup untuk beberapa ribu rubel, dan mungkin batas akhir pembayaran pinjaman atau hutang kepada mitra bisnis. Apa yang harus dilakukan dalam kasus ini, jika Anda tidak dapat mengambil uang dari mana saja? Satu-satunya pilihan yang bisa memecahkan masalah Anda adalah pinjaman mikro.
Pinjaman mikro adalah pinjaman kecil yang diberikan oleh lembaga kredit. Perbedaan utama antara pinjaman ini dan kredit biasa adalah bahwa sejumlah kecil uang dikeluarkan dan dengan tingkat bunga tinggi. Oleh karena itu, perlu mengembalikan pinjaman mikro secepat mungkin, agar tidak membayar lebih.
Aspek positif dari pinjaman mikro Untuk mengambil pinjaman mikro dari Anda, Anda tidak memerlukan semua dokumen yang biasanya dibutuhkan bank saat menyetujui permohonan pinjaman. Oleh karena itu, keuntungan yang tidak diragukan dar…

Bacaan Niat Salat Sunnah Qobliyah Subuh, Dua Rakaat yang Tak Pernah Ditinggal oleh Nabi Muhammad SAW

Berikut di bawah ini adalah bacaan niat salat sunnah qobliyah Subuh.

Salat sunnah qobliyah Subuh adalah salat sunnah dua rakaat yang dikerjakan sebelum salat Subuh.

Dalam sejumlah hadist, muslim yang melaksanakan salat sunnah qobliyah Subuh akan mendapat pahala yang sangat besar.

Menurut hadits riwayat Bukhari dan Muslim, Nabi Muhammad Rasulullah saw hampir tidak pernah meninggalkan salat sunnah qobliyah Subuh.

Hukum mengerjakan shalat sunnah qabliyah subuh adalah sunnah muakkadah yaitu sunnah yang sangat dianjurkan.

Berikut tata cara pelaksanaan shalat sunnah qabliyah subuh niat dan bacaannya:

Pertama, membaca niat

Bacaan atau lafadz niat dari shalat sunnah qabliyah subuh 2 rakaat adalah sebagai berikut:

أُصَلِّى سُنَّةَ الصُّبْحِ رَكْعَتَيْنِ قَبْلِيَةً لِلهِ تَعَالَى
Ushalli sunnatash-shubhi rak’ataini qabliyyatal lillahi ta’ala.

Artinya: Aku niat shalat sunah sebelum Subuh dua raka’t karena Allah Taala Kedua, Membaca surat al-fatihah dan surat-surat al-Qur’an  Pada rakaat pertama…