#Cara Membuat Tombol Back To Top Di Blogger Mudah Loh!

Awaknyo >>

Cara Membuat Tombol Back To Top Di Blogger Mudah Loh!

selamat datang, Banyak yang suka dengan tombol back to top atau tombol kembali keatas, fitur ini memudahkan pengguna untuk segera kembali keatas misalnya kemenu blog tanpa perlu geser kursor. berikut caranya:

Log in ke blogger.com
pilih template
pilih edit html

cari ]]></b:skin> atau </style> paste kode berikut diatasnya

/* Back to top */
#easy-top{background:rgba(0,0,0,.5);text-align:center;position:fixed;bottom:15px;right:15px;cursor:pointer;width:38px;height:38px;line-height:38px;border-radius:4px;padding:4px;display:none;-webkit-transform:translateZ(0);box-sizing:initial;transition:all .3s ease-out}#easy-top:hover{background:rgba(0,0,0,.9)}#easy-top:before,#easy-top:after{-webkit-backface-visibility:hidden;box-sizing:initial;}#easy-top:before{content:'';height:8px;width:8px;display:block;border:3px solid #fff;border-left-width:0;border-bottom-width:0;transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);position:absolute;top:15px;left:18px}#easy-top:after{content:'';height:16px;width:3px;display:block;background:#fff;position:absolute;top:17px;left:22px}#easy-top:hover:after{border-color:transparent transparent rgba(0,0,0,.9)transparent}

 pasang kode ini diatas </body>

<div id='easy-top'/>
<script type='text/javascript'>
//<![CDATA[
$(function(){$(window).scroll(function(){$(this).scrollTop()>600?$("#easy-top").fadeIn(100):$("#easy-top").fadeOut(0)}),$("#easy-top").click(function(){$("html, body").animate({scrollTop:0},{duration:2e3,easing:"easeOutBounce"})})});
//]]>
</script>
<script src='https://cdn.rawgit.com/Arlina-Design/redvision/master/easing.js' type='text/javascript'/>

Style ke 2

pasang kode berikut diatas </head>
pilih template
edit html
cari </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>

pilih Tata Letak
Add widdget
Javascript/HTML
Paste kode berikut

<style>

.mbw-back-to-top {

    position: fixed;

    bottom: 2em;

    right: 10px;

    text-decoration: none;

    padding: 1em;

    display: none;

    cursor:pointer;

}

</style>

<img class="mbw-back-to-top" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ7c2z8igkyq-J0tKfZ4E3PpULJeY7NcSwoh_MzQdxatQF7Gw7L_gqHAGX8KKFawkI_t_Qtje5CHa_YiBwhc6BnEduIB1Q_xKLIvA_FNKdGpoDlkVEfpyOc1w-0g1I4Q0NeaI3hBvEtQ0/s1600/back+to+top.png" />

<script type="text/javascript">

/*****mybloggersworld.com***/

jQuery(document).ready(function() {

    var offset = 220;

    var duration = 500;

    jQuery(window).scroll(function() {

        if (jQuery(this).scrollTop() > offset) {

            jQuery('.mbw-back-to-top').fadeIn(duration);

        } else { //www.mybloggersworld.com

            jQuery('.mbw-back-to-top').fadeOut(duration);

        }

    }); 

  

    jQuery('.mbw-back-to-top').click(function(event) {

        event.preventDefault();

        jQuery('html, body').animate({scrollTop: 0}, duration);

        return false;

    })

});

</script>

 yang ditandai merah bisa diganti dengan cara berikut:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWNarTc5VfKnbgk7z4SCqLxutJd2z9pXhcnqqh1-PCbclRa2Jf-teTiSoO-SBcUGlH8CYwNgcSE6XVfExDeqng_yTRG409rwcoOYTNQ0NoBUCySLzxMdi10Fwg4gtzsOTOP2_bQ-ar4rA/s1600/back+to+top.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhShTfWR_A4GsUiiAeqUvyz6jIdxBVEV39wTXr85RuRDpv5QV-6xdsCihJmqMPx3E16K5t6PoBsKw1lPTOEFjE2tASuD60erJqb1e7iVRdixfEdEnYpBfz9eD8R38XBESAQDdEb8xzQQf4/s1600/back+to+top.png 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggApxD_3KKMNMsXOBH1ElrlsRHCynB5QvSNFUJ1FX5OCcLFHOfVSAxs9Q6Hg6PZAmwZLp2qJIJmKI6BagRkElciCXB0Ak12N9c2bNqgtm_eqK0sxm_1TaeVauY9LskJP3xreEbSAo8OUY/s1600/back+to+top.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7V1q8srdCL47qmyXqHqmuIXk0BMwWdchCKA6p71fKtXdvVDomx99pI6HQy9HZcFxFDkbsyI1iRXANzqvhlLCUqVwg22E6tczyzbZY1VNvAlQJAZyHJ3fSGGvCtQPa6Oj6ik5_l7aG318/s1600/back+to+top.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH8ZdO_pmifkGC3qKRhvcyxyjcnkvcwHVaquv70WUsjwPmalql4iWpiE9kw8PD4iCHpTIR2R6AFUmu2JfAUxZlL4W1Ny0BKLw_JGSUjAEcK4_Npa1rM7JnkmKaWStHxttV2otLheoxyyU/s1600/back+to+top+button.gif 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8jS4sKxPZB_tICj_cspT9osMFFDP_eIfbtLw_oR6HhyphenhyphenazD-0ZPSelGh0E9BsxGMrEgW-YLZ2wwSVWPrcqXLbz1HyjoG3BAOGrAGTxiwVU530_oyXPRyirMYlm1-a_OsRK8X9-xH8qQL4/s1600/back+to+top+button.gif 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioxJKDEQjlRC5xxztNOmrZKH-F0o9PDRN1RWNFQkjCEcFufXx6Z3QT2r1Cf9mXCWwqLBKKJvLJS9RwOJkvPQN2ZNntQEiZxxJ2CjMlyuscidDlpvo9ZvNgn3CHjNazr23o8Nw3LCVh_LE/s1600/Back-To-Top.png

sekian, semoga bermanfaat sob..

Berbagi :