Home » » Menambah ikon link back to top keren

Menambah ikon link back to top keren

btt

Jangan Lupa Klik Ikuti Ya :
..:::Terima Kasih Sudah Mengunjungi Blog Kami :::..



Pada postingan ini saya membawa tutorial tentang cara mudah menambah ikon link back to top keren untuk blogger, yang mana fitur ini akan memudahkan pengunjung blogger Anda untuk kembali ke halaman atas setelah membaca artikel yang panjang atau browsing posting di halaman awal. Ikon link yang digunakan dalam blog ini dalam ukuran kecil sehingga tidak akan merusak tampilan blog dan juga Anda dapat mengatur sendiri ukuran atau posisi dari ikon linknya. Nah, untuk lebih jelasnya ikuti langkah berikut.


Menambah Ikon Link Back To Top

  • Login ke Blogger Anda
  • Klik Tata Letak - klik Tambahkan Gadget
  • Dan pilih HTML/Javascript
  • Selanjutnya copy dan paste script berikut :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script><script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$("#rb-top").fadeIn()}else{$("#rb-top").fadeOut()}});$("#rb-top").click(function(){$("body,html").animate({scrollTop:0},800);return false})});</script><a href="http://satu-delapan.blogspot.com"></a><a id='rb-top' style='display: none; position: fixed; bottom: 1px; right:0%; cursor:pointer;font:12px arial;'><img src='URL IKON LINK' width="50px" height="50px"/></a>

  • Ganti URL IKON LINK dengan ikon yang akan Anda tambahkan di blog Anda, berikut url-nya :

btt
 link url :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcSk5f0fKy0JcR5Fng0ttCYMzY6Pj0LW35j6ksuVgMRGScQk_uIWaMgpaR68GN-kxGopBBL1cpchPg_9dYvGEU0tnMTOVeWb2CoxVd_T143gcgufq6IhxXzPV-wzim1w0-eSSDP8TvmGY/s1600/btt-satu-delapan-blogspot.png

btt
 link url :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo9XlMQ4UW8hB_B10WMytEOSzi4Eq7CgSNNRHk192KbxlWqJfs-FuMR8Rq8uWLCwroE4uOmNmM1sW7DSvp36tNUXJiGjnzM_2HVYKVJViiuuHekw-jrx1zA8Dq91UrbvCV4mo6aEL-5eg/s1600/bttg-satu-delapan-blogspot.png


btt
link url :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE_2QTxg9lEPLjDPtmESN22YMa0rrHz7bS5cku5CdN5oaG2qROmP7jy_aZcticfCdSnn0jTCQVqft7-X5CiiJPp6hkjpSslsQzdTbsoqOWT08VmpH0ytmYGjo-xWmc7KzPCJOcqt8gc_o/s1600/top-satu-delapan-blogspot.png


btt
link url :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmmIFpyvvRO0XNS28BRrSXupRUAZ6AvJZ6yMb0hyphenhyphenxD7RDIvVczXR1kbl6JrivJ0r1TnaAvtY84kLIyGB1ILJiL3Fw-ONauHGDSjXcdH90gvW7AtbQ5hbJD8os5zc0n2ASJQ3gkoON1sqE/s1600/blue-satu-delapan-blogspot.png


btt
link url : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvVHIXwPrBATP-A1roU_hqEzn6duOMCDTzQ2iXr0y0cJruuzEA4brgnMYnYkyeGV4twCtheaUGtnqtQI3otYXoR4ILCA_nDARB_QXLwYLP0PboiOymzscf0316SyCs4BCWCZJ9fGbnl1Y/s1600/glassorb-satu-delapan-blogspot.png

  • Langkah terakhir klik Simpan Template

Keterangan :


  • Untuk mengubah tinggi dan lebar ukuran ikon edit pada script : width="50px" height="50px"

  • Untuk mengatur jarak dari ikon bisa tambahkan kode padding di dalam baris style seperti berikut : <a id='rb-top' style='display: none; position: fixed; bottom: 1px; right:0%; cursor:pointer;font:12px arial; padding-bottom:150px; padding-right:10px; '>

  • Anda juga bisa mengganti ikon link dengan ikon milik Anda sendiri, caranya cukup mengganti url ikon link-nya.

Gimana setelah mengikuti langkah mudah membuat ikon link back to top di atas?? cukup mudah kan. Dan akhir kata bila ada kesalahan dari tutorial kali ini, Anda bisa tinggalkan komentar dan saran Anda. Salam Blogger !

Ditulis Oleh : Reza Shadow -Cyberpassnet

Reza Shadow Anda sedang membaca artikel tentang Menambah ikon link back to top keren dan anda bisa menemukan artikel Menambah ikon link back to top keren ini dengan url https://cyberpassnet-31.blogspot.com/2013/10/menambah-ikon-link-back-to-top-keren.html. Anda boleh menyebarluaskan atau mengcopy artikel Menambah ikon link back to top keren ini jika memang bermanfaat bagi anda atau teman-teman anda,namun jangan lupa untuk mencantumkan link sumbernya. posting yang anda copy paste akan terdeteksi oleh DMCA Protection, Di mohon untuk mencantumkan link sumbernya jika anda ingin mengcopy artikel.

Blog, Updated at: Sunday, October 13, 2013

0 komentar:

Post a Comment

Catatan:
• Dilarang menyisipkan link aktif!
• Dilarang ngiklan di kolom komentar!
• Jika Berkomentar gunakan bahasa yang sopan
• Jika link download rusak, bisa di tanyakan di kometar

[+] Terima kasih [+]

Copyright © 2015. Cyberpassnet - All Rights Reserved
Template by https://cyberpassnet-31.blogspot.co.id/
Template Published by https://cyberpassnet-31.blogspot.co.id/
Powered by Cyberpassnet
Back to top