Cara membuat tombol Back to Top di blogspot

Selamat malam sobat, masih berjumpa dengan saya, Pada kesempatan kali ini saya akan share tentang Cara membuat tombol Back to Top di blogspot. Sudah pada tahu dengan artikel yang satu ini? Ya, ini ada sebuah navigasi menu untuk memudahkan para pengunjung blog sobat kembali ke atas, terkadang bisa lelah jika banyaknya komentar di blog sobat untuk mengembalikan menu ke artikel yang terkait. Nah artikel ini bertujuan untuk memudahkan para pemirsa untuk menavigasikan artikel sobat untuk kembali ke atas. Bagaimana tertarik membuat tombol navigasi yang satu ini? Silahkan ikuti langkah-langkah berikut ini:
1. Login ke akun blogger sobat
2. Pilih tab Template dan pilih menu edit HTML
3. cari kode ]]></b:skin> selalu gunakan tombol (ctrl+f )untk memudahkan pencarian jika sudah ketemu silahkan copy paste kode CSS di bawah ini lalu letakkan tepat di atas kode ]]></b:skin>

/*
|--------------------------------------------------------------------------
| UItoTop jQuery Plugin 1.2
| http://www.mattvarone.com/web-design/uitotop-jquery-plugin/
|--------------------------------------------------------------------------
*/

#toTop {display:none;text-decoration:none;position:fixed;bottom:10px;right:10px;
overflow:hidden;width:40px;height:40px;border:none;text-indent:-999px;
background:#fff url(http://4.bp.blogspot.com/-u5eNR3_Koe4/UvA__vdHdAI/AAAAAAABLTk/GeV5RC40Xds/s1600/totop_button.png) no-repeat left top;}
#toTop {
 display:none;
 text-decoration:none;
 position:fixed;
 bottom:10px;
 right:10px;
 overflow:hidden;
 width:51px;
 height:51px;
 border:none;
 text-indent:100%;
 background:url(http://3.bp.blogspot.com/-f4w48d-MePQ/UvBDTiYyihI/AAAAAAABLT4/k9p7sF0NqI0/s1600/ui.totop.png) no-repeat left top;
}

#toTopHover {
 background:url(http://3.bp.blogspot.com/-f4w48d-MePQ/UvBDTiYyihI/AAAAAAABLT4/k9p7sF0NqI0/s1600/ui.totop.png) no-repeat left -51px;
 width:51px;
 height:51px;
 display:block;
 overflow:hidden;
 float:left;
 opacity: 0;
 -moz-opacity: 0;
 filter:alpha(opacity=0);
}

#toTop:active, #toTop:focus {
 outline:none;
}

4. Setelah kode di atas di letakkan lanjut dengan mencari kode </body> lalu copy kan kode script di bawah ini dan letakkan tepat di atas kode </body>

/*
 * jQuery EasIng v1.1.2 - http://gsgd.co.uk/sandbox/jquery.easIng.php
 *
 * Uses the built In easIng capabilities added In jQuery 1.1
 * to offer multiple easIng options
 *
 * Copyright (c) 2007 George Smith
 * Licensed under the MIT License:
 *   http://www.opensource.org/licenses/mit-license.php
 */

jQuery.extend( jQuery.easing,
{
 easeInQuad: function (x, t, b, c, d) {
  return c*(t/=d)*t + b;
 },
 easeOutQuad: function (x, t, b, c, d) {
  return -c *(t/=d)*(t-2) + b;
 },
 easeInOutQuad: function (x, t, b, c, d) {
  if ((t/=d/2) < 1) return c/2*t*t + b;
  return -c/2 * ((--t)*(t-2) - 1) + b;
 },
 easeInCubic: function (x, t, b, c, d) {
  return c*(t/=d)*t*t + b;
 },
 easeOutCubic: function (x, t, b, c, d) {
  return c*((t=t/d-1)*t*t + 1) + b;
 },
 easeInOutCubic: function (x, t, b, c, d) {
  if ((t/=d/2) < 1) return c/2*t*t*t + b;
  return c/2*((t-=2)*t*t + 2) + b;
 },
 easeInQuart: function (x, t, b, c, d) {
  return c*(t/=d)*t*t*t + b;
 },
 easeOutQuart: function (x, t, b, c, d) {
  return -c * ((t=t/d-1)*t*t*t - 1) + b;
 },
 easeInOutQuart: function (x, t, b, c, d) {
  if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
  return -c/2 * ((t-=2)*t*t*t - 2) + b;
 },
 easeInQuint: function (x, t, b, c, d) {
  return c*(t/=d)*t*t*t*t + b;
 },
 easeOutQuint: function (x, t, b, c, d) {
  return c*((t=t/d-1)*t*t*t*t + 1) + b;
 },
 easeInOutQuint: function (x, t, b, c, d) {
  if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
  return c/2*((t-=2)*t*t*t*t + 2) + b;
 },
 easeInSine: function (x, t, b, c, d) {
  return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
 },
 easeOutSine: function (x, t, b, c, d) {
  return c * Math.sin(t/d * (Math.PI/2)) + b;
 },
 easeInOutSine: function (x, t, b, c, d) {
  return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
 },
 easeInExpo: function (x, t, b, c, d) {
  return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
 },
 easeOutExpo: function (x, t, b, c, d) {
  return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
 },
 easeInOutExpo: function (x, t, b, c, d) {
  if (t==0) return b;
  if (t==d) return b+c;
  if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
  return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
 },
 easeInCirc: function (x, t, b, c, d) {
  return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
 },
 easeOutCirc: function (x, t, b, c, d) {
  return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
 },
 easeInOutCirc: function (x, t, b, c, d) {
  if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
  return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
 },
 easeInElastic: function (x, t, b, c, d) {
  var s=1.70158;var p=0;var a=c;
  if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
  if (a < Math.abs(c)) { a=c; var s=p/4; }
  else var s = p/(2*Math.PI) * Math.asin (c/a);
  return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
 },
 easeOutElastic: function (x, t, b, c, d) {
  var s=1.70158;var p=0;var a=c;
  if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
  if (a < Math.abs(c)) { a=c; var s=p/4; }
  else var s = p/(2*Math.PI) * Math.asin (c/a);
  return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
 },
 easeInOutElastic: function (x, t, b, c, d) {
  var s=1.70158;var p=0;var a=c;
  if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);
  if (a < Math.abs(c)) { a=c; var s=p/4; }
  else var s = p/(2*Math.PI) * Math.asin (c/a);
  if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
  return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
 },
 easeInBack: function (x, t, b, c, d, s) {
  if (s == undefined) s = 1.70158;
  return c*(t/=d)*t*((s+1)*t - s) + b;
 },
 easeOutBack: function (x, t, b, c, d, s) {
  if (s == undefined) s = 1.70158;
  return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
 },
 easeInOutBack: function (x, t, b, c, d, s) {
  if (s == undefined) s = 1.70158; 
  if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
  return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
 },
 easeInBounce: function (x, t, b, c, d) {
  return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
 },
 easeOutBounce: function (x, t, b, c, d) {
  if ((t/=d) < (1/2.75)) {
   return c*(7.5625*t*t) + b;
  } else if (t < (2/2.75)) {
   return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
  } else if (t < (2.5/2.75)) {
   return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
  } else {
   return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
  }
 },
 easeInOutBounce: function (x, t, b, c, d) {
  if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
  return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
 }
});

/*
|--------------------------------------------------------------------------
| UItoTop jQuery Plugin 1.1
| http://www.mattvarone.com/web-design/uitotop-jquery-plugin/
|--------------------------------------------------------------------------
*/

(function($){
 $.fn.UItoTop = function(options) {

var defaults = {
   text: 'To Top',
   min: 200,
   inDelay:600,
   outDelay:400,
     containerID: 'toTop',
   containerHoverID: 'toTopHover',
   scrollSpeed: 1200,
   easingType: 'linear'
   };

};
})(jQuery);

$('document').ready(function(){
 /*
 var defaults = {
  containerID: 'moccaUItoTop', 
  containerHoverClass: 'moccaUIhover',
  scrollSpeed: 1200,
  easingType: 'linear' 
 };
 */
 
 $().UItoTop({ easingType: 'easeOutQuart' });

});
//]]>
</script>

5. Jika semua kode sudah di letakkan dengan benar silahkan langkah terakhir klik simpan template lalu lihat hasilnya.
Selamat mencoba

Belajar Untuk Bisa

Search This Blog

Cara membuat tombol Back to Top di blogspot

Comments

Post a Comment