Cara Gampang Menciptakan Tombol Back Top Kembali Di Atas Pada Blog

Tahun 2015 semakin banyak temuan para pakar SEO, salah satu temuan untuk fitur blog atau website yaitu ditemukannya cara Membuat Tombol Back Top Kembali Di Atas, Tampilan fitur ini sangat menarik cukut dengan mengklik tombol tersebut maka halaman website atau blog akan bergeser ke atas, Contoh tombo back top kembali ke atas menyerupai blog saya, tampilan menyerupai gambar di bawah ini.

Pada anak panah berwarna merah yaitu tombol back top, Manarik bukan ? Sekarang hampir semua website atau blog memakai tombol tersebut. Tombol ini sanggup kita pasang pada templete berupa isyarat yang diterapkan. Kode tersebut akan bekerja sesuai dengan fungsinya.

Kode javascrip dan isyarat HTML yaitu isyarat yang dipakai oleh sistem internet sehingga internet sanggup tampil dan berfungsi. Ya kita sanggup simpulkan bahwa kode-kode itu yaitu unsur-unsur terbentuknya internet.

Untuk membuat Membuat Tombol Back Top Kembali Di Atas maka blog atau blog memerlukan scrip CSS, HTML javascrip atau JQuery. Bahasa pemrogaraman dari blog yaitu crip CSS, HTML javascrip atau JQuery. Dengan menerapkan isyarat ini maka dengan sendirinya halaman web akan kembali pada halaman atas.

Fungsi dari ketiga isyarat tersebut adalah
1. Kode HTML berfungsi sebagai pembungkus web yang akan dimanupulasi dan mendefenisikan tag     HTML
2..CSS berfungsi mengatur tata letak setiap tag HTML
3. Javascrip atau JQuery berfungsi memaksimalkan tampilan web supaya lebih interaktif

Berikut cara Membuat Tombol Back Top Kembali Di Atas :
1. Login akun blogger
2. Pilih Templete
3. Klik edit Templete
4. Cari Kode </head> ( memakai CTRL F) kemudian tekan enter

perhatkan apabila tidak ada isyarat menyerupai dibawah ini maka copy isyarat kemudian pastekan di atas kode </head>. Jika sudah ada maka lewati

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'/> 

5. Masih daerah atau berada pada kode </head> 
6, masukan scrip dibawah ini diatas  </head> 

<script type='text/javascript'>

$(function() { $(window).scroll(function() {if($(this).scrollTop()&gt;500) { $(&#39;#ScrollToTop&#39;).fadeIn()}

else { $(&#39;#ScrollToTop&#39;).fadeOut();}});$(&#39;#ScrollToTop&#39;).click(function(){$(&#39;html,body&#39;).animate({scrollTop:0},700);

return false})});

</script>

7. Cari isyarat ]]></b:skin> pencarian memakai CTRL F
8. Pastekan isyarat CSS dibawah ini diatas  ]]></b:skin>

#ScrollToTop{text-align:center;z-index:9999;position:fixed;bottom:40px; right:30px;cursor:pointer;display:none;opacity:0.7;}
#ScrollToTop:hover{opacity:1;}

8. Cari isyarat </body>
9. Copy kemudian pastekan isyarat dibawah ini diatas isyarat </body>

<div id='ScrollToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV_wZU4aJv1NHXsJz5JDyAht0O0lyVCW25FPGuJhZ_syJ7kdM5k_kZA9rMWbrN1AvmF_Z-G8pdzoqK-w2jGcuXZTUSplFzQjj58XL4k3x6tGuyrCxdEqjbi6PA670H-vf41YxqEJwFKUY/s1600/backtotop.png'/></div>

10. Klik simpan templete

Share this post