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...

1 comment:

  1. GaleriQQ Agen Bandarq, Domino99, Bandar Sakong Online Terbesar

    Yang Merupakan Agen Bandarq, Domino 99, Dan Bandar Sakong Terbesar di asia hadir untuk anda semua dengan games - games menarik dan bonus menarik untuk anda semua

    Bonus yang di berikan GaleriQQ :
    * Bonus rollingan 0.5% setiap minggunya
    * Bonus Refferal 10% + 10% seumur hidup (5% X-tra untuk anda para pencari bonus reff di indonesia)
    * Dan masih banyak bonus menarik lain nya yang bisa anda dapatkan di GaleriQQ

    New Promo :
    Terhitung dari Tanggal 01/06/2019, kami mengadakan promo bonus minimal TO
    Promo Bonus X-tra Turnover : Dibagikan Setiap 2 Minggu Sekali Jatuh Pada Tanggal 16 Dan Tanggal 01.
    * Turn Over 10 jt = FreeChips Rp 25.000,-
    * Turn Over 25 jt = FreeChips Rp 50.000,-
    * Turn Over 50 jt = FreeChips Rp 100.000,-
    * Turn Over 100 jt = FreeChips Rp 250.000,-
    * Turn Over 200 jt = FreeChips Rp 500.000,-

    Games Yang di Hadirkan GaleriQQ :
    * Poker
    * Bandar poker
    * BandarQ
    * AduQ
    * Domino99
    * Bandar66
    * Sakong
    * Capsasusun

    Info Lebih lanjut Kunjungi :
    Website : GaleriQQ
    Twitter : GaleriQQ
    Kemenangan : GaleriQQ

    Agen Domino99
    Agen BandarQ

    BBM : D60A983B/galeriqq
    WA : +855968017703
    LINE : csgaleriqq

    ReplyDelete