Cara Membuat Back to Top di Blog

Sebelumnya apa itu back to top ?
back to top adalah widget pada blog, dimana akan mengembalikkan anda ke atas atau ke awal,
contohnya, ketika kalian membaca artikel hingga sampai bawah, dan ingin kembali lagi ke atas atau ke tempat kalian awal membaca, nah disinilah back to top dibuat untuk memudahkan kembali keatas, dan kita harus scroll mouse, atau bisa diartikan, scroll up ke atas hanya dengan 1 klik saja

Ok, kita langsung ke pointnya saja :D
1. Pastikan kalian sudah memasang fontawesome, jika belum pasang fontawesome terlebih dahulu,
biasanya template yang menggunakan html5 dan lebih responsive biasanya sudah terpasang

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

2. lalu Login ke blogger kalian > Template > Edit HTML
lalu masukkan script CSS dibawah ini sebelum </style>

/* Back to top abdurrahim-id.blogspot.com */
.back-to-top{visibility:hidden;background-color:rgba(55,71,96,.8);color:#fff;width:38px;height:38px;text-align:center;line-height:38px;position:fixed;bottom:10px;right:10px;z-index:90;cursor:pointer;opacity:0;border-radius:50%;-webkit-transform:translateZ(0);display: inline-block;transition:all .4s}
.back-to-top .fa{font-size:22px;vertical-align:middle}
.back-to-top:hover{background-color:#009ccf;color:#fff;opacity:1;}
.back-to-top.show{visibility:visible;opacity:1;}
.back-to-top{width:32px;height:32px;line-height:32px;bottom:10px;right:10px}
.back-to-top .fa{font-size:14px}

3. Masukkan juga Javascript dibawah ini sebelum kode </body>

// Back to top button
(function(){$(document).ready(function(){return $(window).scroll(function(){return $(window).scrollTop()>600?$("#back-to-top").addClass("show"):$("#back-to-top").removeClass("show")}),$("#back-to-top").click(function(){return $("html,body").animate({scrollTop:"0"})})})}).call(this);

4. dan masukkan kode berikut ini.

<div class='back-to-top' id='back-to-top' title='Back to top'><i class='fa fa-angle-double-up'/></div>

5. jangan lupa diblog kalian juga harus ada JQuerynya

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>

dan lihat demo dibawah ini.

• DEMO

Itulah cara menambah Back to top,
back to top tersebut persis seperti di blog ini, jadi kalian bisa melihatnya di bawah pojok kanan, jangan lupa scroll down terlebih dahulu, agar button back to topnya muncul,

jika masih ada yang dibingungkan bisa ditanyakan dikolom komentar