Cara letak butang navigasi atas dan kebawah - Hallo sahabat Cara Sign Up, Pada Artikel yang anda baca kali ini dengan judul Cara letak butang navigasi atas dan kebawah, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel widget, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Cara letak butang navigasi atas dan kebawah
link : Cara letak butang navigasi atas dan kebawah

Cara letak butang navigasi atas dan kebawah

Butang keatas dan kebawah boleh digunakan untuk menavigasi ke bahagian atas dan bahagian bawah kandungan halaman, terutamanya apabila pada halaman utama terdapat banyak rencana atau apabila artikel yang mempunyai terlalu banyak komen. Butang ini mempunyai fadeIn dan kesan fadeOut, ini bermakna ia akan pudar sedikit apabila kita bergerak ke bahagian atas bawah halaman dan ia mempunyai fungsi naik ke atas atau ke bawah blog

Cara meletakkan butang kebawah dan keatas

1.Pada dashboard pilih template dan klik edit HTML

2.Cari kod  ]]></b:skin> dengan menggunakan Ctrl+F

3.Letakkan kod dibawah ini diatasnya

/* Up and Down Buttons with jQuery
----------------------------------------------- */
.button_up{
padding:7px; /* Distance between the border and the icon */
background-color:white;
border:1px solid #CCC; /* Border Color */
position:fixed;
background: whiteurl(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnlnjEmUalCFB6K-N42X0D6w91QddjFogTi-X2Aykw0W5R5QjwU3-H6WGdzqHshRIx9Zddi4dL3u_9gMz4wFYioJDtxKVp2umIYbWQqHhYgXsUPS3LoGjcNtV7L3ruS8LtuywVxj_UVJg/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; /* Distance between the border and the icon */
background-color:white;
border:1px solid #CCC; /* Border Color */
position:fixed;
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwZpe5gkVNHi4T-mvT92lEWXlb7GRt3VfBQ7o_cvvmLkwUaQWamAuRMqQlFWhfkYXI0CkhyBw7Ewgd9SaQiF4WOUuI4ORsUj-udEsePYP9jVh_WvYtmpNLoZsXXJXn5-ivSzO62W0xhyphenhyphenI/s16/arrow_down.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Button's width */
height:20px; /* Button's height */
bottom:242px; /* 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);
}

Nota:teks berwarna hijau adalah jika anda hendak mengubah kedudukan butang.
        Untuk menukar warna latar belakang ubahkan teks white dengan  warna yang dingini

4.Seterusnya cari kod </body>

dan letakkan kod ini diatasnya

<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>

5.Simpan template anda
sumber:helpblogger

Demikianlah Artikel Cara letak butang navigasi atas dan kebawah

Sekianlah artikel Cara letak butang navigasi atas dan kebawah kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Cara letak butang navigasi atas dan kebawah dengan alamat link http://carasignup.blogspot.com/2014/01/cara-letak-butang-navigasi-atas-dan.html

Tweet