Cara Menciptakan Back To Top Di Blog

Baca Juga

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

Ok, kita pribadi ke pointnya saja :D
1. Pastikan kalian sudah memasang fontawesome, jikalau belum pasang fontawesome terlebih dahulu,
biasanya template yang memakai 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. kemudian Login ke blogger kalian > Template > Edit HTML
kemudian 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 aba-aba </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 aba-aba 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 ibarat di blog ini, jadi kalian dapat melihatnya di bawah pojok kanan, jangan lupa scroll down terlebih dahulu, biar button back to topnya muncul,

jikalau masih ada yang dibingungkan dapat ditanyakan dikolom komentar