Cara Memasang Tombol Back To Top Pada Blog

Oleh Rafid Aslam

4 Juni 2014

Hai sobat Blogger, kali ini saya akan memberi tahu anda tentang Cara memasang tombol back to top pada blog. Blog adalah tempat kita berbagi pengetahuan, pengalaman, informasi, dan lain-lain, kita semua berhak membuat blog dan pengunjung juga berhak untuk mengunjungi dan melihat blog kita, kita juga jangan tinggal diam saat pengunjung kehilangan kenyamanannya di blog, anda harus memberikan beberapa fasilitas untuk pengunjung di blog, salah satunya tombol back to top, tombol back to top ini dapat mempermudah pengunjung untuk scroll ke atas dengan cepat, selain cepat, tombol back to top ini sudah diberi smoothing hingga saat scroll ke atas dengan halus.

Cara memasang tombol back to top

Ikuti langkah-langkah di bawah ini:

1. Masuk ke Blogger>>Template>>Edit HTML
2. Pada template di blog anda harus ada jQuery library, jika belum ada letakkan kode di bawah ini di atas kode </head>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

3. Taruh kode di bawah ini di atas kode ]]></b:skin> atau </style> (pilih salah satu)

/*Back To Top*/ #top{background-color:#444;margin:0;padding:10px;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;position:fixed;bottom:10px;right:10px;cursor:pointer;display:none;} #top:hover{background-color:#15b5ae}

4. Kemudian, taruh kode di bawah ini di atas kode </body>

<a href='#' id='top'><img alt='Back To Top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNU6VDnbhvc9CaDq5ztPYmu1n8IDPNgcDmLyxNgxHfXMUiwvDaDtrRPnvxBWAKxe_2r49PCKqRA7qieZejTLJ3e7Z3R_K6eRwXqi4QaZFNC7P9ty0SWQi1TQDDNLatWirI4iuywE21yU6e/s1600/btp.png'/></a> <script type='text/javascript'> //<![CDATA[ //Scroll Top (function(a){a(window).scroll(function(){if(a(this).scrollTop()>280){a("#top").removeAttr("href");a("#top").fadeIn()}else{a("#top").fadeOut()}});a(function(){a("#top").click(function(){a("html, body").animate({scrollTop:0},"slow");return false})})})(jQuery);
//]]>
</script> 

5. Lalu klik "Simpan Template"

Selamat mencoba, dan bagi anda yang ingin bertanya tentang Cara memasang tombol back to top pada blog bisa ditanyakan di kotak komentar di bawah post ini.

Tag : Tips Blogger

Bagikan :

Tweet