Cara Membuat Back To Top Di Blogspot catatansipopo.com
Cara Membuat Back To Top Di Blogspot catatansipopo.com

Cara Membuat Back To Top Di Blogspot

Posted on

Po…

Oi… What’s Up Po… Gimana kabarnya, sehat Po…???

Alhamdulillah sehat gw Po…Cara bikin Contact Us pake gadget udah gw praktekkin Po… And sekarang gw mau nanya lagi donk Po…

Nanya apaan Po…? Semakin sulit pertanyaannya semakin mudah gw ngejawabnya…

Ah eluh Po… Bcanda aja…. Seriusan gw mo nanya, itu di pojokan kanan bawah ada tombol yang kalo di klik bisa otomatis nyekroll ke atas Po…┬áKeren tuh Po… Lu bisa gak ngajarin gw cara bikinnya Po…?

Oh… tombol yang begituan ya Po… Yang kalo bahasa bule nya Back To Top. Bisa-bisa aja sih Po, cuman agak panjang and njlimet, gimana Po, mau???

Yaodah Po kagak knapa-knapa yang penting di blog gw ada tombol begituan.

Oke Po… Gini Po caranya…

Login Ke Dashboard

Pertama kita login dulu ke dashboard Po, udah tau kan caranya??? Kalo belum tau, popo bisa baca postingan disini.

Edit Template (Tema)

Trus kita edit template yang kita pake, nih gambarnya

tema - edit html
tema – edit html

Copas FontAwesome

Trus kita copas kode ini Po…

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

Kodenya disimpen sebelum </head> ya Po…

Cara nyarinya Popo pencet ctrl+f trus ketik </head> Nah paste-in pas sebelum </head>

Copas CSS

Trus copas lagi kode ini Po…

.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;
}

Kodenya di Paste-in sebelum </style> ya Po… Caranya sama kayak yang barusan

Copas JQuery

Satu lagi Po… Kita copas kode ini Po…

<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>

Trus simpen (Paste-in) sebelum </body>

Save

Kalo semuanya udah di lakuin, tinggal kita save Po… trus liat haslinya

Gimana Po, susah-susah gampang apa gampang susah-susah Po…?

Seperti biasa ya Po… Kalo ada yang mau ditanyain, lewat kolom komentar aja…

Gravatar Image
sebenernya gw juga gak tau apa artinya popo, coba nanya ke orangnya langsung dia cuma jawab "awak juga gak tahu apa artinya popo" penasaran kan? coba tanya mbah gugel aja po...