Bagaimana Menambah Pergi Ke Atas Dan Pergi Ke Tombol Bawah Menggunakan JQuery Di Blogger

The tombol Atas dan Bawah dapat digunakan untuk menavigasi ke atas dan bawah dari konten halaman, terutama ketika pada halaman utama ada banyak artikel atau ketika sebuah artikel memiliki terlalu banyak komentar. Tombol-tombol ini memiliki fadeIn dan efek fadeOut, ini berarti bahwa mereka akan memudar sedikit ketika kita bergulir ke atas atau ke bawah halaman dan tambahan, memiliki fungsi naik / turun blog. 

Demonstrasi 

Anda dapat melihat live demo di blog saya, tombol yang terletak di sisi kanan. 

Bagaimana menempatkan Naik dan Turun tombol menggunakan efek slide jQuery 

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

Langkah 2. Pilih kotak "Expand Template Widget" 

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

 ]]> </ B: skin>

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

 / * Atas dan Bawah Tombol dengan jQuery
----------------------------------------------- * /
. Button_up {
padding: 7px; / * Jarak antara perbatasan dan ikon * /
background-color: white;
border: 1px solid # CCC; / * Warna Border * /
position: fixed;
tidak mengulang-kiri atas;
background-position: 50% 50%;
width: 20px; / * Button lebar * /
height: 20px; / * tinggi Button * /
bottom: 280px; / * Jarak dari bawah * /
kanan: 5px; / * Ubah kanan ke kiri jika Anda ingin tombol di sebelah kiri * /
white-space: nowrap;
kursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity: 0.7;
filter: PROGID: DXImageTransform.Microsoft.Alpha (opacity = 70);
}
. Button_down {
padding: 7px; / * Jarak antara perbatasan dan ikon * /
background-color: white;
border: 1px solid # CCC; / * Warna Border * /
position: fixed;
tidak mengulang-kiri atas;
background-position: 50% 50%;
width: 20px; / * Button lebar * /
height: 20px; / * tinggi Button * /
bottom: 242px; / * Jarak dari bawah * /
kanan: 5px; / * Ubah kanan ke kiri jika Anda ingin tombol di sebelah kiri * /
white-space: nowrap;
kursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity: 0.7;
filter: PROGID: DXImageTransform.Microsoft.Alpha (opacity = 70);
}

Catatan: - hijau adalah beberapa penjelasan yang menjelaskan apa gaya yang Anda dapat memodifikasi pada sisi kiri mereka. 
- Anda dapat mengubah panah dengan mengubah URL dengan warna biru. 
- Untuk mengubah warna latar belakang tombol tombol, mengubah teks putih dengan warna Anda 

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

 </ Body>

. Langkah 6 Dan di atas itu, paste kode berikut: 

 <script src='http://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 khusus = jQuery.event.special, uid1 = 'D' + (+ Tanggal baru ()), uid2 = 'D' + (+ new Date () +1); special.scrollstart = {pengaturan : function () {var timer, handler = function (evt) {var timer, handler = function (evt) {var

$ (Function () {
var $ elem = $ ('body');
$ ('# Button_up') fadeIn ('lambat').;
$ ('# Button_down') fadeIn ('lambat').;
$ (Window) mengikat. ('Scrollstart', function () {
.. $ ('# Button_up, # button_down') stop () bernyawa ({'opacity': .2 '0 '});
});
$ (Window) mengikat. ('Scrollstop', function () {
.. $ ('# Button_up, # button_down') stop () bernyawa ({'opacity': '1 '});
});
$ ('# Button_down') klik. (
function (e) {
. $ ('Html, body') bernyawa ({scrollTop: $ elem.height ()}, 800);
});
$ ('# Button_up') klik. (
function (e) {
. $ ('Html, body') bernyawa ({scrollTop: px '0 '}, 800);
});});
/ /]]>
</ Script>

Catatan: Jika Anda ingin menghapus "Go to top" tombol, menghapus kode tebal 1 dan menghapus "Ke Bawah" tombol, menghapus 2 satu. 

Langkah 7. Akhirnya, Simpan Template Anda. Nikmati!