Menambahkan tombol ke atas dan ke bawah

Yang dimaksud Menambahkan tombol ke atas dan ke bawah Menggunakan jQuery di Blogger adalah Tombol Atas dan Bawah dapat digunakan untuk menavigasi ke atas dan ke bawah dari konten halaman, terutama ketika pada halaman utama yang memiliki banyak artikel atau ketika artikel memiliki terlalu banyak komentar.

Tombol-tombol ini memiliki fadeIn dan efek fadeOut, ini artinya tampilan tombol akan memudar sedikit ketika kita menggulir ke atas atau ke bawah halaman dan tambahanya, memiliki fungsi naik / turun blog.


Bagaimana menempatkan jQuery tombol Naik dan Turun menggunakan efek slide

Langkah 1. Pergi ke Template, klik pada tombol Edit HTML

Langkah 2. Pilih  "Edit Template"

Langkah 3. Cari (menggunakan CTRL + F) untuk potongan kode berikut:

]]></b:skin>

Langkah 4. Tepat di atas kode tersebut, paste yang satu ini:

Scroll Box pastikan semua kode di copy

/* Up and Down Buttons with jQuery-------------------------------------- */
.button_up{
padding:7px; /* Jarak antara border dan ikon*/
background-color:white;
border:1px solid #CCC; /* Warna Border*/
position:fixed;
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXoKVl-kJRiQKK4Ly10l18wG-ZQNEQ5YJb6VBAg_qJxFbeLmKoxSMtzJ6PR_jkGl2EiwhBPPR0-PTgf92a-W0I_gobOWIURApA0zYhzrAkFOh4oGo0CebzyeOxxwVuiZjH6uoZUdTenvQ/s16/arrow_up.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Lebar tombol */
height:20px; /* Tinggi tombol */
bottom:280px; /* Jarak dari bawah */
right:5px; /* Ubah right/kanan ke left/kiri jika Anda ingin tombol di sebelah kiri */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.button_down{
padding:7px; /* Jarak antara border dan ikon */
background-color:white;
border:1px solid #CCC; /* Warna border */
position:fixed;
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQfF5MYv6JhHWMtXsd3hvcu8ngJlyMDA2qvv3wDN_0o9j5_RVWT3KXGMKgqM0pWcsFpQHsbGcWVmdrKqqYoLZqG_iouC4tt6L43R1PGoFcLxhEOFbsaounQOMrm-xAzZ-AYMjfFS_cYbc/s16/arrow_down.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Lebar tombol */
height:20px; /* Tinggi tombol */
bottom:242px; /* Jarak dari bawah */
right:5px; /* Ubah right/kanan ke left/kiri jika Anda ingin tombol di sebelah kiri */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);}
/* https://bekantanman.blogspot.com -----
----Up and Down Buttons with jQuery End-------- */

Catatan:
- hijau adalah beberapa penjelasan tentang apa yang dapat dimodifikasi.
- Anda dapat mengubah panah dengan mengubah URL dengan warna biru.
- Untuk mengubah tombol warna latar belakang tombol, mengubah teks white dengan warna yang diinginkan

Langkah 5. Sekarang cari (CTRL + F) cari tag ini:

</body>


Langkah 6. Dan tepat di atasnya, paste kode di bawah berikut:

Scroll Box pastikan semua kode di copy

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

<div class='button_up' id='button_up' style='display:none;'/>
<div class='button_down' id='button_down' style='display:none;'/>

<script>
//<![CDATA[
(function(){var special=jQuery.event.special,uid1='D'+(+new Date()),uid2='D'+(+new Date()+1);special.scrollstart={setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})();

$(function() {
var $elem = $('body');
$('#button_up').fadeIn('slow');
$('#button_down').fadeIn('slow');
$(window).bind('scrollstart', function(){
$('#button_up,#button_down').stop().animate({'opacity':'0.2'});
});
$(window).bind('scrollstop', function(){
$('#button_up,#button_down').stop().animate({'opacity':'1'});
});
$('#button_down').click(
function (e) {
$('html, body').animate({scrollTop: $elem.height()}, 800);
} );
$('#button_up').click(
function (e) {
$('html, body').animate({scrollTop: '0px'}, 800);
} );});
//]]>
</script>

Catatan: Jika anda ingin menghapus tombol "Ke atas" , hapus kode tebal yang no. 1 dan menghapus tombol "Kebawah", hapus kode tebal yang no. 2.

Langkah 7. Akhirnya, Simpan Template.