2 Style Dan Cara Memasang Smooth Back To Top di Template Blog 2017

2 Style Dan Cara Memasang Smooth Back To Top di Template Blog 2017 namanya merupakan tombol buat pulang ke permukaan website. letaknya umumnya berada di isi kanan bawah blog. tombol ini sangat bermanfaat, karena membantu pengunjung blog balik ke laman atas dengan cukup satu kali klik, tanpa wajib melakukan scrolling berkali-kali dengan mouse atau mengusap-usap layar.

pernahkah anda melihat sebuah anak panah kecil, yang letaknya di sebelah kanan bawah, dekat scrollbar waktu mengakses sebuah blog?, widget itulah yang dinamakan tombol back to top. kegunaannya artinya buat membawa pengunjung pulang ke atas, tanpa perlu repot – repot melakukan scroll. tentunya widget ini akan sangat membantu.

tombol back to top buat blogger ini timbul waktu laman discroll ke bawah .

Berikut Cara Memasang Smooth Back To Top di Template Blog Desaign Arlina Desaign

  • pertama kamu pergi ke blog kamu dulu 
  • lalu kamu pilih template == > edit template
  • kamu cari code dengan cara tekan ctrl f dan cari code  <head>
  • lalu copy code di bawah ini dan pastekan tepat  di bawah code <head>
HTML

.<! Arlina Desaign !>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
<! Arlina Desaign !>
  • kemudian , di cari code css di template kamu dan kamu cari code </style> atau ]]></b:skin>
  • dan kamu copy code di bawah ini , dan kamu pastekan tepat diatas code </style> atau ]]></b:skin>
CSS

<! Arlina Desaign !>
.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;
}
<! Arlina Desaign !>
  • selanjut kita cari code javascipt , kamu tekan ctrl f , lalu kamu ketik code </body>
  • kamu copy code di bawah ini , dan kamu pastekan tepat di atas code </body>
JavaScript

<! Arlina Desaign !>
<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>
<! Arlina Desaign !>

dan kamu simpan template dan lihat hasilnya

Cara Memasang  Back To Top di Blog # cara kedua

  • kamu pergi ke blog kamu dulu
  • lalu pilih template === > edit template
  • kamu cari code </head> dan kamu copy code di bawah ini
  • dan pastekan di atas code </head>
JavaScript

<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
  • selanjutnya kamu pergi ke tata letak == > tambah gadget == > html javascipt
  • lalu kamu copy code di bawah ini , dan pastekan tepat di html javascipt  oke.

HTML / JavaScript

<!--Smooth Back to Top Button Start-->
<script>
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
<style>
div#page {
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding: 20px;
}
.back-to-top {
position: fixed;
bottom: 2em;
right: 0px;
text-decoration: none;
color: #000000;
background-color:transparent;
font-size: 12px;
padding: 1em;
display: none;
z-index:9999;
}
.back-to-top:hover {
text-decoration: none;
}
</style>
<a href="#" class="back-to-top"><img src="http://1.bp.blogspot.com/-yrOTdp6sNt4/U2M2QsgIzVI/AAAAAAAAAeM/Zp9nIUmG5Sw/s1600/back+to+top+.png" alt="Back to Top" / /></a>
<!--Smooth Back to Top Button End-->

  • untuk code yang berwarna unggu , dan kamu bisa ganti dengan gambar yang ada code nya sesukan anda kamu ada gak mau ganti gak papa ok.
  • simpan dan selesai . 
sekian dari saya semoga bermanfaat untuk anda , and see  you next time , salam blogger indonesia asal aceh


EmoticonEmoticon