Media Informasi Tentang Cara Praktis Ngeblog, Tutorial Blog, Monetisasi Blog,Tips Dan Trik Blogger, Template Blog, Adsense Dan Aplikasi Android

Breaking

May 17, 2019

Cara Menambahkan Tombol Back to Top Pada Blog Dengan Mudah

loading...


Image : onet4u.com

Cara Menambahkan Tombol Back to Top Pada Blog Dengan Mudah

Untuk memudahkan pengunjung blog dalam berselancar di blog kita maka sangat penting untuk menambahkan sebuah widget yang bisa memudahkan bagi pengunjung. Salah satu widget yang bisa gunakan adalah tombol back to top.

Fungsi tombol back to top ini akan memudahkan pengunjung ketika akan kembali ke halaman awal artikel kita. Mereka tidak perlu repot harus melakukan scroll layar, cukup dengan menekan tombol tersebut maka mereka akan langsung di arahkan ke halaman awal artikel kita.

Untuk membuat widget tombol back to top ini dan meletakkannnya pada blog tidaklah sulit. Sebagai contoh anda bisa mengikuti cara - cara yang saya sampaikan berikut ini dengan menggunakan script dari onet4u.com.

1. Copy Kode CSS berikut ini dan letakkan CSS </style> 

Caranya : 
a. Log in ke dashboard blog anda
b. Klik Tema kemudian menu HTML
c. Untuk memudahkan pencarian kode di atas gunakan tombol Ctrl + F
d.Pastekan di bagian kode CSS 

/* Back to top */ .O4UTop{visibility:hidden;width:50px;height:50px;position:fixed;bottom:50px;right:20px;z-index:9999;cursor:pointer;border-radius:50%;border:2px solid #586D82;opacity:0;-webkit-transform:translateZ(0);transition:all .5s;background:#00887a url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center center} .O4UTop:hover{opacity:1;background:#00887a url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center center} .O4UTop.show{visibility:visible;bottom:20px;opacity:1}


2. Kemudian copy kode Script berikut ini dan pastekan di antara kode <body> dan kode </body>

<script type="text/javascript"> $(document).scroll(function() { return $(document).scrollTop()> 300 ? $('.O4UTop').addClass('show') : $('.O4UTop').removeClass('show') }), $('.O4UTop').click(function() { return $('html,body').animate({ scrollTop: '0' }); }); </script>

3. Setelah itu copy kode Javascript berikut ini dan pastekan di atas </body>


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

Bagaimana ? Cukup mudah bukan ? Selamat mencoba dan berkreasi. Sebagai contoh hasil dari tombol back to top yang sudah kita terapkan bisa di lihat pada gambar berikut ini.


Image : onet4u.com


Demikian artikel singkat ini, selamat mencoba dan berkreasi.


loading...

No comments:

Post a Comment