Cara Membuat Tombol Up Dan Down di blog

Bagai mana cara membuat tombol up dan Down pada sebuah blog? ini adalah cara yang paling gampang untuk sobat gunakan pada blog sobat, fungsinya apa sih? fungsinya sangat berguna sob, ketika kita membuat postingan /artikel yang sangat panjang/lengkap hingga membuat halaman artikel sobat memanjang hingga kebawah, nah ketika pembaca blog sobat selesai membaca artikel sobat hingga ke titik akhir :D, dan ingin kembali ke halaman atas/header posting, tombol up-down akan sedikit membantu pembaca blog sobat.

ok, ini dia tips nya:

1. Login ke blog>>Dasbor >>Template>>Edit HTML>>Lanjutkan.

Seletah itu cari kode</body> sobat bisa pake pencarian dengan tekan tombol Ctrl+f  pada editor html dan ketikkan kode </body>

2.Setelah kode diatas ditemukan. Copy paste kode dibawah ini tepat diatas kode </body>

<!-- Back To Top-Back To Down -->

<a href='#' style='display:scroll;position:fixed;bottom:5px;right:15px;' title='Back to Top'><img onclick='MGJS.goTop();return false;' src='http://i1086.photobucket.com/albums/j454/sudirman10/navigate-up-icthoncopy.png'/></a>

<a href='#gotodown' style='display:scroll;position:fixed;top:5px;right:15px;' title='Back to Down'><img onclick='MGJS.goDown();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQGXaM30lWY87oVXt5afbV5R0YZqcXYYGKTb6Ww4tu9TfUoDhzXqEw4T0jwLh4dgPBci3OXISVcGbl1_CadwEZUF1mYdoXmoCRvbFkXdJrYFlqzrdDCbirCusIT1h5u1m94EWNCzGs-pQ/s1600/navigate-down-icthoncopy.png'/></a>

<a name='gotodown'/>

Nah Ini Cara yang Kedua dengan tampilan yang berbeda,

• Masuk Ke Blogger
• Lalu Klik Template > Edit HTML > CTRL + F  "]]></b:skin>" ( tanpa tanda kutip ) 
• Copy Code jQuery dibawah tepat Diatas code : ]]></b:skin> 

sobat Copy-Pastekan code Di bawah ini:

/* Tombol Atas dan Bawah Dengan jQuery
----------------------------------------------- */
.tombol_atas{
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/AVvXsEjgV7BuwKPDLj3XPwHUpxGDMnKHGepLhJ1Q9INZyqubp3nCTcEA-e7dBRmusqvcZ2T0J-cd6_hRlcRy3A6oDg4ZMc-JIH-_LI2U9YKolsX2WwUtfYtn0CdNGSMNyZOr51EQD7D-x9XdPMM/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);
}
.tombol_bawah{
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/AVvXsEhJ533rgeX7UPJ2keGpoanBWECcIM-0GMDRgxqrC1T9YeNBbY9rFoOUtWK76eX-d9VafcOE1JiuNF9B5WUdmryF94deFVC6mr4ZBRb9C8v_xuKYiwMDB_U_Vy9jukqSdmxGdSAVrI_S8oE/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);
}

• Setelah itu Cari lagi kode "</body>" ( tanpa Tanda Kutip )
• Masukan kode dibawah tepat Diatas kode "</body>" ( tanpa Tanda Kutip )

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<div class='tombol_atas' id='tombol_atas' style='display:none;'/>
<div class='tombol_bawah' id='tombol_bawah' 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');
$('#tombol_atas').fadeIn('slow');
$('#tombol_bawah').fadeIn('slow'); 
$(window).bind('scrollstart', function(){
$('#tombol_atas,#tombol_bawah').stop().animate({'opacity':'0.2'});
});
$(window).bind('scrollstop', function(){
$('#tombol_atas,#tombol_bawah').stop().animate({'opacity':'1'});
});
$('#tombol_bawah').click(
function (e) {
$('html, body').animate({scrollTop: $elem.height()}, 800);
} );
$('#tombol_atas').click(
function (e) {
$('html, body').animate({scrollTop: '0px'}, 800);
} );});
//]]>
</script>

Setelah itu Simpan Template, lalu silahkan sobat lihat blog sobat,
Baiklah, segitu dulu saya bagi Cara Membuat Tombol Up Dan Down di blog ,Semoga bermanfaat!

Categories: Tips Blog