Tombol Scroll Up Down

SOURCE

• Pertama pastikan pada template kita sudah terpasang Fontawesome, jika belum ikuti langkah ini untuk memasangnya
• buka Blogger > Klik menu Tema dan tombol Edit HTML > Tambahkan kode ini sebelum </head>
• Pilih salah satu dari dua style berikut dan edit kode yang ditandai untuk mengganti warna dari tombol Slide Up and Down
  
  Pilihan Warna 1
  

  <style type='text/css'>
  /* Slide Up and Down */
  #slidetop,#slidebottom{background:#fff;margin:0;padding:5px 15px 0;border-radius:0;position:fixed;color:#222;bottom:0;border:1px solid rgba(0,0,0,0.05);border-bottom:0;cursor:pointer;display:none;line-height:2;box-shadow:0 -1px 20px rgba(0,0,0,0.05);backface-visibility:hidden;-webkit-transform:translateZ(0);transform:translateZ(0);transition:all .3s}#slidetop:hover,#slidebottom:hover{background:#fafafa}#slidetop{right:46px;border-radius:5px 0 0 0}#slidebottom{right:0;border-right:0;box-shadow:5px -1px 20px rgba(0,0,0,0.05)}
  @media only screen and (max-width:768px){#slidetop{right:43px}}
  </style>

  Pilihan Warna 2
  

  <style type='text/css'>
  /* Slide Up and Down */
  #slidetop,#slidebottom{background:#e74c3c;margin:0;padding:5px 15px 0;border-radius:0;position:fixed;color:#fff;bottom:0;cursor:pointer;display:none;line-height:2;backface-visibility:hidden;-webkit-transform:translateZ(0);transform:translateZ(0);transition:all .3s}#slidetop:hover,#slidebottom:hover{background:#333}#slidetop{right:46px;border-radius:5px 0 0 0}#slidebottom{background:#c0392b;right:0}
  @media only screen and (max-width:768px){#slidetop{right:43px}}
  </style>

• Selanjutnya tambahkan kode di bawah ini sebelum </body>

  <div id='downfooter'/>
  <a href='#' id='slidetop'><i class='fa fa-chevron-up' title='Slide up'/></a><a href='#' id='slidebottom'><i class='fa fa-chevron-down' title='Slide down'/></a>
  <script type='text/javascript'>
  //<![CDATA[
  // Slide Up and Down by www.naminakiky.com
  !function(o){o(window).scroll(function(){o(this).scrollTop()>75?(o("#slidetop").removeAttr("href"),o("#slidetop").fadeIn()):o("#slidetop").fadeOut()}),o(function(){o("#slidetop").click(function(){return o("html, body").animate({scrollTop:0},"slow"),!1})})}(jQuery),function(o){o(window).scroll(function(){o(this).scrollTop()<0?(o("#slidebottom").removeAttr("href"),o("#slidebottom").fadeOut()):o("#slidebottom").fadeIn()}),o(function(){o("#slidebottom").click(function(){return o("html, body").animate({scrollTop:$("#downfooter").offset().top},"slow"),!1})})}(jQuery);
  //]]>
  </script>

• Kemudian klik tombol Simpan tema dan lihat hasilnya di blog Anda.

Result 1 Result 2