Cara Membuat Tombol Naik dan Turun Menggunakan jQuery di Blogger

Cara Membuat Tombol Naik dan Turun Menggunakan jQuery di Blogger. Salah satu tombol navigasi yang dapat memudahkan pengunjung untuk membaca sebuah artikel pada website atau blog adalah tombol navigasi Naik dan Turun. Tombol navigasi Naik dan Turun ini sangat berguna untuk melihat sebuah konten pada sebuah halaman yang memiliki banyak artikel atau ketika sebuah artikel memiliki terlalu banyak komentar. Tombol-tombol navigasi ini memiliki efek fadeIn dan fadeOut di mana efek tersebut akan membuat tombol-tombol akan terlihat memudar ketika mouse bergulir ke atas atau bawah halaman. Dengan adanya tombol navigasi Naik dan Turun pada sebuah halaman yang akan memudahkan pengunjung untuk melihat semua konten pada sebuah halaman, anda juga dapat membuat tombol tersebut menjadi menarik dengan mendesinnya dari Photoshop. Cara Membuat Tombol Naik dan Turun Menggunakan jQuery sangatlah mudah di bawah ini saya akan menjelaskan langkah-langkahnya.

Cara Membuat Tombol Naik dan Turun Menggunakan jQuer:

1. Login ke Blogger
   
2. Buka Template, klik pada tobol Edit HTML
   
   
   
3. Klik dimanapun pada area kode dan tekan pada keyboard CTRL + F
   
4. Masukan ]]></b:skin> pada kotak pencarian
   
   
   
5. Setelah menemukan kode di atas masukan kode di bawah ini tepat diatas kode ]]></b:skin>

   .button_up{
   padding:7px; /* Jarak border dan icon */
   background-color:white;
   border:1px solid #CCC; /* Warna Border */
   position:fixed;
   background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhywaYDO68cBqMid6sfgPjjKfZWYGv9NIGNUWU3nV1hRg3iyop4LbwTq7zhqkwWl84yybzAfiU_lUBUExNE6xBTbQ6P-MtFlPtrpwozwPt8Lm7v_d2e4YCSwo-5RjZrd-NZvWVGt1jwT_o/s16/arrow_up.png) no-repeat top left;
   background-position:50% 50%;
   width:20px; /* Lebar Tombol */
   height:20px; /* Tinggi Tombol */
   bottom:280px; /* Jarak dari bawah */
   right:5px; /* Posisi letak tombol */
   white-space:nowrap;
   cursor: pointer;
   border-radius: 3px 3px 3px 3px;
   opacity:0.7;
   filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
   }
   .button_down{
   padding:7px; /* Jarak border dan icon */
   background-color:white;
   border:1px solid #CCC; /* Warna Border */
   position:fixed;
   background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir-0khKbz430YuMDPqkbfTPj6UW7W12wOXDZW_GbhD28BSfO2B5MxPmGptXnZL-92uDz9gzRcB2qFWuBCBxHLEYH-1vn_czuTMn8P76qDFLxXTs5sq88FbMRqf8edy_TPEOeGTAl8rRkc/s16/arrow_down.png) no-repeat top left;
   background-position:50% 50%;
   width:20px; /* Lebar Tombol */height:20px; /* Tinggi Tombol */
   bottom:242px; /* Jarak dari bawah */
   right:5px;/* Posisi letak tombol */white-space:nowrap;
   cursor: pointer;
   border-radius: 3px 3px 3px 3px;
   opacity:0.7;
   filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
   }

   Catatan: - Hijau adalah beberapa penjelasan yang menjelaskan apa gaya yang anda dapat memodifikasi.
   - Anda dapat mengubah panah tombol dengan panah yang anda desain sendiri, dengan mengubah URL warna biru.
   
   
6. Selanjutnya cari kode </body>
   
7. Masukan kode di bawah ini tepat diatas kode </body>

   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
   <div class='button_up' id='button_up' style='display:none;'/>
   <div class='button_down' id='button_down' style='display:none;'/>
   <script>
   //<![CDATA[
   (function(){var special=jQuery.event.special,uid1='D'+(+new Date()),uid2='D'+(+new Date()+1);special.scrollstart={setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})();
   $(function() {
   var $elem = $('body');
   $('#button_up').fadeIn('slow');
   $('#button_down').fadeIn('slow');
   $(window).bind('scrollstart', function(){
   $('#button_up,#button_down').stop().animate({'opacity':'0.2'});
   });
   $(window).bind('scrollstop', function(){
   $('#button_up,#button_down').stop().animate({'opacity':'1'});
   });
   $('#button_down').click(
   function (e) {
   $('html, body').animate({scrollTop: $elem.height()}, 800);
   } );
   $('#button_up').click(
   function (e) {
   $('html, body').animate({scrollTop: '0px'}, 800);
   } );});
   //]]>
   </script>

   Catatan:
   Jika anda ingin menghapus Tombol Naik dan Turun atau salah satunya, anda cukup menghapus kode yang tebal diatas.
   
   
8. Terakhir Simpan Template
   

Demikian tutorial dari saya mengenai Cara Membuat Tombol Naik dan Turun Menggunakan jQuery di Blogger

Semoga bermanfaat ^_^