Di postingan pertama ini, saya mau memperkenalkan diri lagi setelah lama tidak nge-blog karena males ajah. Karena blog dulu saya di block dan akun google saya nggak bisa mengakses blogger (fak). Langsung ajah yang mau masang tombol back to top dengan cepat dan tidak susah, tutorial ini khusus untuk platform blogger, tidak bisa di pakai di wordpress, nggak tau juga sih gua gak ngerti wordpress haha.
1. Pertama login ke Blogger > Template > Edit HTML > Tambahkan kode dibawah ini sebelum ]]></b:skin> atau </style>
2. Selanjuntya, tambahkan kode JQuery dibawah ini sebelum </body>
3. Simpan template
1. Pertama login ke Blogger > Template > Edit HTML > Tambahkan kode dibawah ini sebelum ]]></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}
2. Selanjuntya, tambahkan kode JQuery dibawah ini sebelum </body>
3. Simpan template
Cara Menambahkan Tombol Back to Top dengan CSS dan JQuery UI
4/
5
Oleh
Blog Lord