Site and learn your application

Kamis, 03 Maret 2016

Cara Menambahkan Tombol Back to Top di Blog Dengan Berbagai Style

Indo Amaterasu
Tombol back to top atau tombol kembali di atas adalah tombol yang dipasang pada halaman blog untuk memudahkan pembaca kembali ke ats. Tombol ini cocok dipasang pada blog yang mempunyai konten artikel panjang. Daripada pembaca menggulirkan scrool untuk kembali ke atas halaman sebaiknya dipasang tombol Back to Top.

Tombol Back to Top yang dibagikan ini ada 3 macam (Style) jadi pilihlah sesuai selera Anda. Bila kurang puas Anda bisa mengeditnya sendiri seperti mengganti warna dan gambar tombol Back to Top. Cara pembuatannya mudah kok, tinggal mengikuti langkah-langkah yang diberikan indoamaterasu.com. Daripada Anda memikirkan caranya, lebih baik aksi mulai sekarang hehe.

Dengan menambahkan tombol Back to Top, blog Anda kelihatan keren dan prosefional sehingga pengunjung betah membaca di blog Anda. Baiklah berikut ini 3 Style tombol Back to Top yang dapat diterapkan pada blog Anda.

# Cara Menambahkan Tombol Back to Top Style 1 (Panah Elegan)
1. Login ke dashboard kemudian pilih Template > Edit HTML
2. Temukan kode berikut ini, untuk mempercepat pencarian tekan Ctrl + F
<head> atau </head>
3. Setelah ketemu copy kode di bawah ini kemudian paste di bawah kode <head> atau di atas kode </head>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
Keterengan: Jika template Anda sudah terpasang font awesome abaikan langkah ini

4. Copy kode CSS di bawah ini
.smoothscroll-top {
    position:fixed;
    opacity:0;
    visibility:hidden;
    overflow:hidden;
    text-align:center;
    z-index:99;
    background-color:#2ba6e1;
    color:#fff;
    width:47px;
    height:44px;
    line-height:44px;
    right:25px;
    bottom:-25px;
    padding-top:2px;
    border-radius:5px;
    transition:all 0.5s ease-in-out;
    transition-delay:0.2s;
}
.smoothscroll-top:hover {
    background-color:#3eb2ea;
    color:#fff;
    transition:all 0.2s ease-in-out;
    transition-delay:0s;
}
.smoothscroll-top.show {
    visibility:visible;
    cursor:pointer;
    opacity:1;
    bottom:25px;
}
.smoothscroll-top i.fa {
    line-height:inherit;
}
5. Paste kode CSS tersebut sebelum
]]></b:skin> atau </style>
6. Selanjutnya tambahkan kode jQuery berikut ini
<div class="smoothscroll-top">
    <span class="scroll-top-inner">
        <i class="fa fa-2x fa-arrow-circle-up"></i>
    </span>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){

    $(document).on( 'scroll', function(){

        if ($(window).scrollTop() > 100) {
            $('.smoothscroll-top').addClass('show');
        } else {
            $('.smoothscroll-top').removeClass('show');
        }
    });

    $('.smoothscroll-top').on('click', scrollToTop);
});

function scrollToTop() {
    verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
    element = $('body');
    offset = element.offset();
    offsetTop = offset.top;
    $('html, body').animate({scrollTop: offsetTop}, 600, 'linear');
}
//]]>
</script> 
7. Letakkan di atas kode </body>
8. Efek bounce gunakan jQuery berikut ini
<div class="smoothscroll-top">
    <span class="scroll-top-inner">
        <i class="fa fa-2x fa-arrow-circle-up"></i>
    </span>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){

    $(document).on( 'scroll', function(){

        if ($(window).scrollTop() > 100) {
            $('.smoothscroll-top').addClass('show');
        } else {
            $('.smoothscroll-top').removeClass('show');
        }
    });

    $('.smoothscroll-top').on('click', scrollToTop);
});

function scrollToTop() {
    verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
    element = $('body');
    offset = element.offset();
    offsetTop = offset.top;
    $('html, body').animate({scrollTop: offsetTop}, 600, 'linear').animate({scrollTop:25},200).animate({scrollTop:0},150) .animate({scrollTop:0},50);
}
//]]>
</script>

# Cara Menambahkan Tombol Back to Top Style 2 (Panah Arjuna)
1. Login ke dashboard kemudian pilih Template > Edit HTML
2. Temukan kode berikut ini, untuk mempercepat pencarian tekan Ctrl + F
]]></b:skin> atau </style>
3. Copy kode CSS di bawah ini dan taruh di atas kode  ]]></b:skin> atau  </style>
/* 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}
4. Tambahkan  kode jQuery berikut ini dan letakkan di atas </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:"easeOutQuint"})})});
//]]>
</script>
<script src='https://cdn.rawgit.com/Arlina-Design/redvision/master/easing.js' type='text/javascript'/>
5. Simpan dan lihat hasilnya
6. Bila ingin menggunakan efek bounce gunakan jQuery berikut ini
<<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'/>


# Cara Menambahkan Tombol Back to Top Style 3 (Roket Meluncur)
1. Login ke dashboard kemudian pilih Template > Edit HTML
2. Temukan kode berikut ini, untuk mempercepat pencarian tekan Ctrl + F
]]></b:skin> atau </style>
3. Copy kode CSS di bawah ini dan letakkan di atas ]]></b:skin> atau </style>
/* Back to Top Roket meluncur */
#scrolltop{display:none}
#rocketmeluncur{position:fixed;bottom:50px;z-index:7;display:none;visibility:hidden;width:26px;height:48px;right:25px;background:url(https://lh3.googleusercontent.com/-gsOyVLtZeZQ/Vtd6ua7073I/AAAAAAAADEM/jLyORwVxPL0/s128-Ic42/RoketSiap.png) 50% 0 no-repeat;opacity:0;-webkit-transition:visibility .6s cubic-bezier(.6,.04,.98,.335),opacity .6s cubic-bezier(.6,.04,.98,.335),-webkit-transform .6s cubic-bezier(.6,.04,.98,.335);-moz-transition:visibility .6s cubic-bezier(.6,.04,.98,.335),opacity .6s cubic-bezier(.6,.04,.98,.335),-moz-transform .6s cubic-bezier(.6,.04,.98,.335);transition:visibility .6s cubic-bezier(.6,.04,.98,.335),opacity .6s cubic-bezier(.6,.04,.98,.335),transform .6s cubic-bezier(.6,.04,.98,.335)}
#rocketmeluncur i{display:block;margin-top:48px;height:14px;background:url(https://lh3.googleusercontent.com/-gsOyVLtZeZQ/Vtd6ua7073I/AAAAAAAADEM/jLyORwVxPL0/s128-Ic42/RoketSiap.png) 50% -48px no-repeat;opacity:.5;-webkit-transition:-webkit-transform .2s;-moz-transition:-moz-transform .2s;transition:transform .2s;-webkit-transform-origin:50% 0;-moz-transform-origin:50% 0;transform-origin:50% 0}
#rocketmeluncur:hover{background-position:50% -62px}
#rocketmeluncur:hover i{background-position:50% 100%;-webkit-animation:flaming .7s infinite;-moz-animation:flaming .7s infinite;animation:flaming .7s infinite}#rocketmeluncur.showrocket{visibility:visible;opacity:1}
#rocketmeluncur.launchrocket{background-position:50% -62px;opacity:0;-webkit-transform:translateY(-800px);-moz-transform:translateY(-800px);-ms-transform:translateY(-800px);transform:translateY(-800px);pointer-events:none}
#rocketmeluncur.launchrocket i{background-position:50% 100%;-webkit-transform:scale(1.4,3.2);-moz-transform:scale(1.4,3.2);transform:scale(1.4,3.2)} 
4. Copy kode HTML dan jQuery di bawah ini dan letakkan di atas </body>
Kode HTML
 <a href="javascript:void(0);" id="rocketmeluncur" class="showrocket" ><i></i></a>
Kode CSS
<script type='text/javascript'>
//<![CDATA[
jQuery(window).scroll(function(){jQuery(window).scrollTop()<50?jQuery("#rocketmeluncur").slideUp(500):jQuery("#rocketmeluncur").slideDown(500);var e=jQuery("#ft")[0]?jQuery("#ft")[0]:jQuery(document.body)[0],t=$("rocketmeluncur"),n=(parseInt(document.documentElement.clientHeight),parseInt(document.body.getBoundingClientRect().top),parseInt(e.clientWidth)),r=t.clientWidth;if(1e3>n){var l=parseInt(fetchOffset(e).left);l=r>l?2*l-r:l,t.style.left=n+l+"px"}else t.style.left="auto",t.style.right="10px"}),jQuery("#rocketmeluncur").click(function(){jQuery("html, body").animate({scrollTop:"0px",display:"none"},{duration:600,easing:"linear"});var e=this;this.className+=" launchrocket",setTimeout(function(){e.className="showrocket"},800)});
//]]>
</script>

0 komentar:

Poskan Komentar

= > Silahkan berkomentar sesuai artikel di atas
= > Berkomentar dengan url (mati/ hidup) tidak akan dipublish