Headlines News :
Home » » Cara Membuat Back to Top atau scroll page di Blogger

Cara Membuat Back to Top atau scroll page di Blogger

Written By Regina Kim on Minggu, 15 April 2012 | 21.46


Cara membuatnya :
Login blogger
Rancangan, Edit Html, Cari kode 

]]></b:skin>




Dan Simpan kode berikut diatasnya :
/* UTbacktotop */
#UTbLogjQtop{bottom:15px;right:10px;cursor:pointer;float:right;position:fixed;transition:0.6s linear;-o-transition:0.6s linear;-moz-transition:0.6s linear;-webkit-transition:0.6s linear;-ms-transition:0.6s linear;width:37px;height:40px;opacity:0.4;
background:transparent url(http://picturestack.com/237/413/j0Jprev1prn.png) center no-repeat;background-size:35px 38px;filter:alpha(opacity=40);border:3px double transparent;padding:5px;border:3px double blue;border-radius:50%;box-shadow:1px 1px 10px #000;-moz-box-shadow:1px 1px 10px #000;-webkit-box-shadow:1px 1px 10px #000;}
#UTbLogjQtop:hover{opacity:1.0;filter:alpha(opacity=100);background:#111 url(http://picturestack.com/237/413/j0Jprev1prn.png) center no-repeat;background-size:35px 38px;border:3px double #ddd;box-shadow:1px 1px 15px blue;-moz-box-shadow:1px 1px 15px blue;-webkit-box-shadow:1px 1px 15px blue;}


4. Selanjutnya Masukkan kode HTML berikut diatas </body>

<div style="display:none;" title="Back to Top Page" class="UTbLogjQtop" id="UTbLogjQtop"></div>
<!-- UTbLogjQtop -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script text="text/javascript">
$(function() {
var $elem = $('#outer-wrapper');
$('#UTbLogjQtop').fadeIn('slow');
$('#UTbLogjQtop').click(
function (e) {$('html, body').animate({scrollTop: '0px'}, 800);});
});
</script>
<!-- End UTbLogjQtop -->
5. Simpan template. Dan berhasil.
Semoga bermanfaat.
Share this article :

0 komentar:

Diberdayakan oleh Blogger.

Google Translate

 
Support : Creating Website | Johny Template | Mas Template
Proudly powered by Blogger
Copyright © 2011. Be Smart with science - All Rights Reserved
Template Design by Creating Website Published by Mas Template