--> Cara Mudah Membuat Tombol Back Top Kembali Di Atas Pada Blog | BLOGGER OPS

12/29/2015

Cara Mudah Membuat Tombol Back Top Kembali Di Atas Pada Blog

| 12/29/2015
Tahun 2015 semakin banyak temuan para pakar SEO, salah satu temuan untuk fitur blog atau website adalah 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 seperti blog saya, tampilan seperti gambar di bawah ini.

Cara Mudah Membuat Tombol Back Top Kembali Di Atas Pada Blog

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

Kode javascrip dan kode HTML adalah kode yang digunakan oleh sistem internet sehingga internet dapat tampil dan berfungsi. Ya kita dapat simpulkan bahwa kode-kode itu adalah 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 adalah crip CSS, HTML javascrip atau JQuery. Dengan menerapkan kode ini maka dengan sendirinya halaman web akan kembali pada halaman atas.

Fungsi dari ketiga kode 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 agar 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> ( menggunakan CTRL F) lalu tekan enter
Cara Mudah Membuat Tombol Back Top Kembali Di Atas Pada Blog
perhatkan apabila tidak ada kode seperti dibawah ini maka copy kode lalu 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 tempat 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 kode ]]></b:skin> pencarian menggunakan CTRL F
8. Pastekan kode 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 kode </body>
9. Copy lalu pastekan kode dibawah ini diatas kode </body>


<div id='ScrollToTop'><img alt='Back to top' src='http://4.bp.blogspot.com/-Izmqq2QVcY8/UmMQyNKbhYI/AAAAAAAABcI/a28qtFC2uto/s1600/backtotop.png'/></div>

10. Klik simpan templete

Related Posts

No comments:

Post a Comment