Cara membuat tombol Ke Atas dan Ke Bawah (Go to Top and Go to Bottom)

Tombol "Up and Down" dapat digunakan untuk navigasi ke atas dan ke bawah pada sebuah halaman web atau blog. terutama saat di halaman utama berisi banyak sekali artikel atau saat artikel memiliki banyak komentar. Tombol ini memiliki efek "fade-in" dan "fade-out".

Menyimpan "Go Up and Go Down memakai jQuery slide effect
Tahap 1. Buka Template, klik Edit HTML


Tahap 2. Pilih kotak "Expand Widget Templates"




Step 3. Search (pakai CTRL + F) untuk menemukan kode di bawah ini:

]]></b:skin>

Step 4. Tepat diatasnya, salin kode di bawah ini:

/* Up and Down Buttons with jQuery
----------------------------------------------- */
.button_up{
padding:7px; /* Jarak antara border dan icon */
background-color:white;
border:1px solid #CCC; /* Warna border */
position:fixed;
background: white url(http://4.bp.blogspot.com/-7zE5N9GdDUk/T6rH17KE6II/AAAAAAAACeQ/aEcKRyEhxsE/s16/arrow_up.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Button's width */
height:20px; /* Button's height */
bottom:280px; /* Distance from the bottom */
right:5px; /* Change right to left if you want the buttons on the left */
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 icon */
background-color:white;
border:1px solid #CCC; /* Warna Border*/
position:fixed;
background: white url(http://3.bp.blogspot.com/-sukwuViZaYY/T6rH15A8niI/AAAAAAAACeM/YErd0S8lPGA/s16/arrow_down.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Lebar tombol */
height:20px; /* tinggi tombol */
bottom:242px; /* Jarak tombol dari bawah */
right:5px; /* Ubah right menjadi left jika ingin tombol berada di sebelah kiri */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

Note:  - pada tulisan hijau ada beberapa penjelasan mengenati notasi yang dapat dimodifikasi di sisi kiri            - Anda dapat mengganti arrow (anak panah) dengen mengganti URL yang berwarna biru
           - untuk merubah warna background tombol anda dapat merubah warna teks putih dengan warna pilihan anda

Step 5. Sekarang search (CTRL + F) untuk tag berikut:

</body>

Step 6. Tepat di atasnya salin 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 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>

Note: Jika Anda ingin me-remove tombol "Go to top" , remove kode 1st dan untuk me-remove tombol "Go to bottom" remove kode 2nd .

Step 7. Terakhir, Simpan Template Anda. Nikmati!

Share on Google Plus

About Muhamad Saepudin

Saya hanyalah seorang penikmat blog dan pembelajar kehidupan. Semoga pembelajaran kehidupanku bisa bermanfaat bagi para pembaca sekalian. Selamat membaca dan belajar dari kehidupan.