√ 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 bergotong-royong 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 kalau 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 sajian template - Edit HTML - klik sekali dalam template dan tekan CTRL+F untuk memunculkan kotak pencarian dalam template dan silahkan anda ketik aba-aba </head>
3. Copy aba-aba berikut sempurna di atas aba-aba </head>:
   
   <script src='//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'/>
   
   Catatan: aba-aba di atas anda pasang jika di template blog anda belum ada aba-aba tersebut.
   
   <script type='text/j4vascript'> $(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 aba-aba 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 aba-aba berikut di atas aba-aba  </body>
   
   <div id='ScrollToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijWW64TQ9BTEdcunJO1KhkwCqWTJOSEu6URnuFjik51HmZH7_2KhhNpwW9qsLVbh8ywubzH7NlsW4niwsbTj-Stu5IXAn36_4tATasWgwjN47MnKYfwQzbCQ74cF9y9mbxDeCe4c6ANRw/s1600/backtotop.png'/></div>
   
   Catatan: aba-aba gambar yang aku beri warna merah dapat anda ganti dengan aba-aba 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, biar bermanfaat.
Sumber http://www.mrmung.com