Cara Memasang Back To Top Button di Blog




Cara Memasang Back To Top Button di Blog

Cara Memasang Back To Top Button di Blog


CARA MEMASANG BACK TO TOP BUTTON DENGAN EDIT TEMPLATE
Tombol "Back to Top"
Dengan adanya tombol back to top, pengunjung tinggal klik tombol itu dan tampilan bagian atas blog akan muncul secara otomatis.


saya akan memberi cara mudah untuk memasang tombol Back to top di blog, dan anda tidak perlu khawatir dengan cara ini, karena tidak mengurangi kecepatan loading blog bisa lebih kenceng. Berikut tutorialnya:





1. Anda buka dulu google atau mozilla
2. Masuk akun blogger
3. Pilih template > edit html
4. Cari kode </body>
5. Copas kode di bawah ini tepat di atas kode </body> kemudian Save template


<span class='back-to-top'><a href='#'> &#8593; </a></span>
<span class='back-to-top-a'><a href='http://www.mizipedia.com/'>SL Blogger</a></span>
<style>
.back-to-top {position: fixed ;bottom:20px;right:10px;z-index:9999999}
.back-to-top-a {font-size:10px;z-index:9999999;opacity:0.2;position:fixed;bottom:0;}
.back-to-top a {font-size: 30px ;background-color: #DD3434 ;color:#FFF;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;transition:all .3s ease;padding:12px 18px 20px;text-decoration: none}.back-to-top a:hover {background-color: #272727 ;text-decoration: none}
</style>



 Note: Silakan ganti warna merah pada kode di atas dengan alamat URL blog Sobat.


CARA MEMASANG BACK TO TOP BUTTON TANPA jQUERY DENGAN WIDGET

Cara yang pertama ini sangat mudah sekali Sob. Biasanya dengan menggunakan edit html pada template, kali ini cuma perlu menambah widget baru dan memasukkan kode di dalamnya. Langsung saja ikutin langkah-langkahnya:
1. Buka browser google atau mozilla

2. Masuk akun blogger
3. Pilih tata letak (lay out) > add gadget > Javascript/HTML
4. Copas kode di bawah ini:


<a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img alt="kembali ke atas" src="http://4.bp.blogspot.com/-hsRaTBL9lpY/USDb4Wzo2WI/AAAAAAAAAiU/2eSTakNmCOE/s1600/back+to+top.png "/></a>

Note:
warna biru menunjukkan jenis/tipe/model gambar tombol back to top. Jika ingin melakukan modivikasi gambarnya, silakan sesuaikan dengan selera Sobat.

Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.



Comment Policy Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas. Show Emoticon. Klik ==>


Join on this site

with Google Friend Connect