Sabtu, 04 Februari 2017

Cara Menambahkan Tombol Back to Top dengan CSS dan JQuery UI

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

Artikel Terkait

Cara Menambahkan Tombol Back to Top dengan CSS dan JQuery UI
4/ 5
Oleh

Berlangganan

Suka dengan artikel di atas? Silakan berlangganan gratis via email