Cara Memasang Back To Top Button di Blog Cara Memasang Back To Top Button di Blog - mizipediacom Cara Memasang Back To Top Button di Blog | mizipediacom

Iklan Semua Halaman

Cara Memasang Back To Top Button di Blog

07 Februari 2017

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.

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.