Tampilkan postingan dengan label down. Tampilkan semua postingan
Tampilkan postingan dengan label down. Tampilkan semua postingan
Senin, 11 November 2013
Membuat Back to Top Back to Down
nah loo karena bnyk yg tanya" ke gw cara buat BtT dan BtD diblogku kali ini aku share lah caranya..sebelumnya trick ini ane dari blog master yakni SCH-XP ..yaa trick ini trick yg simple /..sperti apa trick kali ini ?? berikut SS nya:

langkah" utk memubuatnya:
1. loggin blogger
2.Template
3. HTML/javascipt
4. cari kode ]]></b:skin> pke CTRL+F utk mempermudah
5. letakkan kode berikut DIATAS ]]></b:skin>
7. copy kode berikut DIATAS </body>
nah semoga bermanfaat yaa,, tpi trick ini akan memberatkan loading blog,,, jdi kira" aja yaa.. :v
sumber nya dri blog mastah SCH-XP
Jangan lupa tinggalkan komentar yaa :D

1. loggin blogger
2.Template
3. HTML/javascipt
4. cari kode ]]></b:skin> pke CTRL+F utk mempermudah
5. letakkan kode berikut DIATAS ]]></b:skin>
/* Tombol Atas dan Bawah Dengan jQuery6. cari kode </body>
----------------------------------------------- */
.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/AVvXsEi3rs3oaP8Bj2s2are5Cd_F6jWML-l3rIJ6giaolufJq1DiI3UqUQRMVN_cs5flUpQVPH6LM-0Z9E_Sjk6YN_p0D-NYzZSK4EhdRPCWAGzotourXqvhcg1tDCjTNc2BsHasEFaN6FbZyJo/s16/arrow_up.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Buttons width */
height:20px; /* Buttons 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/AVvXsEiiJcC2qg5O1Lb21X73WVXvVqIUBgoEUGUvrTlOmZlRLiHSE6g9bjG62tM2-7hS7a_mVuarlEeeLuwo0VRsBPIX0GB65PMzhH3A1NDNfH_g0nXONVKOjV3zFzms5WFh84R921DoxkoNgLg/s16/arrow_down.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Buttons width */
height:20px; /* Buttons 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);
}
7. copy kode berikut DIATAS </body>
<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js type=text/javascript/>nah save aja..
<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>
nah semoga bermanfaat yaa,, tpi trick ini akan memberatkan loading blog,,, jdi kira" aja yaa.. :v
sumber nya dri blog mastah SCH-XP
Jangan lupa tinggalkan komentar yaa :D
Langganan:
Postingan (Atom)