Cara Menciptakan Tombol Back To Top Dengan Gambar Keren Dan Elegan

Tutorial Blogger kali ini adalah bagaimana Cara Membuat Tombol Back To Top dengan Gambar Keren dan Elegan. Mungkin sebagian dari anda bertanya, apa fungsi tombol back to top? sedikit akan aku jelaskan, tombol back to top ini berfungsi untuk kembali ke atas sehabis pengunjung blog melaksanakan scroll kebawah ketika membaca artikel yang panjang pada blog kita.

Scroll ke bawah dan ke atas bahwasanya dapat saja memakai mouse, atau tombol panah kebawah dan keatas pada keyboard, dan ketika membaca artikel biasanya pengunjung akan menggunakannya, namun ketika pengunjung sebuah blog menginginkan kembali ke bab atas dengan tujuan ingin melihat-lihat fitur, koleksi artikel blog kita, atau hanya sekedar ingin mengulang membaca tulisan, akan sangat terbantukan jikalau di blog kita tersedia tombol back to top, dengan sekali klik eksklusif kembali/ loncat ke atas.

Berikut tutorial lengkap Cara Membuat Tombol Back To Top:

1. Login blogger.com
2. Klik hidangan template - Edit HTML - klik sekali dalam template dan tekan CTRL+F untuk memunculkan kotak pencarian dalam template dan silahkan anda ketik isyarat </head>
3. Copy isyarat berikut sempurna di atas isyarat </head>:
   
   <script src='//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'/>
   
   Catatan: isyarat di atas anda pasang jika di template blog anda belum ada isyarat tersebut.
   
   <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>
4. Berikutnya copy isyarat CSS berikut di atas kode ]]></b:skin> atau </style>
   
   #ScrollToTop{text-align:center;z-index:9999;position:fixed;bottom:30px; right:30px;cursor:pointer;display:none;opacity:0.6;} #ScrollToTop:hover{opacity:1;}
5. Selanjutnya copy isyarat berikut di atas isyarat  </body>
   
   <div id='ScrollToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVsjSXFU_juI8O8nfxgBaztt-L273RD3U-lid4-6s7X_I2yE3uyEaSU5esRT9CfmXgmZbfc5NMzXii7_reoOE48EtieoKhQZX5jGifFPZxV9RSwPNha7O8T_gPelS5dwQdKnhH8O-27bo/s1600/backtotop.png'/></div>
   
   Catatan: isyarat gambar yang aku beri warna merah dapat anda ganti dengan isyarat gambar anda yang lain sesuai dengan desain tombol yang anda inginkan.
6. Simpan Perubahan template

Setelah anda simpan, anda dapat melihat hasilnya, tampilan tombol back to top di pojok kanan bawah menyerupai pada gambar berikut:


Demikian Cara Membuat Tombol Back To Top dengan Gambar Keren dan Elegan, supaya bermanfaat.