» » » » » Cara Membuat Back To Top Berbagai Efek Keren Di Blog

3:14 AM 5 , , ,
A+ A-
Cara Membuat Back To Top Berbagai Efek Keren Di Blog - Nambah tutorial. Tutorial yang akan saya bahas ini pastinya tiap template blog termasuk blog sobat terdapat yang nama nya tombol back to top. Nah, sekarang, saya akan bahas tutorial tersebut yaitu Cara Membuat Tombol Back To Top Di Blog.

Cara Membuat Back To Top Berbagai Efek Keren Di Blog

Buat sobat yang kemungkinan tidak ada tombol back to top di blog, dan tidak paham dengan tutorial ini, saya akan jelaskan. Tutorial ini, pasti di pakai oleh semua kalangan blogger dari yang pemula hingga master. Kecuali, blog yang memiliki ukuran yang tidak panjang atau yang tidak dapat di scroll/gulung. Dari penjelesan tersebut dapat disimpulkan bahwa yang dimaksud tombol back to top di blog adalah untuk membantu dan mempermudah pengunjung kembali ke atas ketika pengunjung melihat blog kita di bawah.

Jadi, tombol back to top di blog pastinya sangat dibutuhkan untuk setiap blog. Apalagi jika blog sobat panjang. Dengan memasang tombol back to top akan memudahkan pengunjung sobat merasa terbantu jika tampilan ada di bawah blog(footer).

Sobat dapat mengikuti tutorial ini. Tutorial cara menambahkan back to top keren di blog ini sangat berbeda dengan tutorial yang lain yang banyak sekali di pencarian google. Mungkin, tutorial yang lain hanya menampilkan satu efek saja. Tetapi, disini saya akan berbaik hati untuk memberikan tutorial cara membuat back to top dengan bebagai efek keren di blog.


Dari berbagai efek tombol back to top di blog di bawah ini, sobat dapat memilih satu saja.

Cara Membuat Back To Top Di Blog Dengan Gambar

1. Login Blogger
2. Tata letak/layout
3. Add gadget/tambahkan gadget
4. Pilih HTML/JavaScript
5. Copast kode dibawah ini pada kolom HTML/JavaScript:
<script  src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'  type='text/javascript'></script><script  type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$("#rb-top").fadeIn()}else{$("#rb-top").fadeOut()}});$("#rb-top").click(function(){$("body,html").animate({scrollTop:0},800);return   false})});</script><a href="http://satu-delapan.blogspot.com"></a><a  id='rb-top' style='display: none; position: fixed; bottom: 1px; right:0%;  cursor:pointer;font:12px arial;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2IA7pYU9ljvGrsmZASTu7yadHancw4rym2DcKzjYY0ONspWzyF5AhLDMPiPJBdkTM2xKO0n_MpYRTJgezESFayiHTE6cWdGJ9nrglEjwNpr1aOgGGAjjWhluhcPwVymYl_0lFwSKHJKc/s1600/blue-satu-delapan-blogspot.png' width="50px"  height="50px"/></a>
6. Simpan

Cara Membuat Back To Top Di Blog Dengan Efek Memantul Atau Bounce

1. Login Blogger
2. Template/rancangan
3. Edit HTML
4. Cari kode 
</head>
(agar mempermudah pencarian, klik kolom edit HTML, kemudian tekan Ctrl+F secara bersamaan pada keyboard)
5. Setelah ketemu kode </head> copy kode di bawah ini kemudian paste dan letakkan kode dibawah tepat DIATAS kode </head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'
<script type ='text/javascript'> $(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#BounceToTop').slideDown(200); } else { $('#BounceToTop').slideUp(300); } }); $('#BounceToTop').click(function() { $('body,html').animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); }); </script>
6.   Simpan
7.   Pilih Tata letak/layout
8.   Add gadget/tambahkan gadget
9.   HTML/JavaScript
10. Copas kode dibawah ini kemudian paste dan letakkan kode nya pada kolom HTML/JavaScript
<script type='text/javascript'>
$(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#BounceToTop').slideDown(200); } else { $('#BounceToTop').slideUp(300); } });
$('#BounceToTop').click(function() { $('body,html').animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); });
</script>
11. Simpan

Cara Membuat Back To Top Di Blog Dengan Efek Geser Yang Halus

1. Login Blogger
2. Template/rancangan
3. Edit HTML
4. Cari kode 
</head>
 (agar mempermudah pencarian, klik kolom edit HTML, kemudian tekan Ctrl+F secara bersamaan pada keyboard)
5. Setelah ketemu kode </head> copy kode di bawah ini kemudian paste dan letakkan kode dibawah tepat DIATAS kode </head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>
<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>
6.   Simpan
7.   Pilih Tata letak/layout
8.   Add gadget/tambahkan gadget
9.   HTML/JavaScript
10. Copas kode dibawah ini kemudian paste dan letakkan kode nya pada kolom HTML/JavaScript
<style type='text/css' scoped='scoped'> #ScrollToTop{position:fixed; bottom:0px; right:3px; cursor:pointer;display:none} </style> <div id='ScrollToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhImJYEBexKlG3FAjK4wtUCYTAmaR4WjIspGsA9v40iTxEr5nExxzsOLydmhcY80zI4V0gFaJPv3lml_pzz6yiClDvTV6eXjHBRLitHDtMNOL8byWxjUaYIUqfIFtZjJHYPwPgpGn4FveJo/s1600/arrow-up_basic_blue.png'/></div>
11. Simpan

Cara Membuat Back To Top Di Blog Dengan Efek Fading & Smooth

1. Login Blogger
2. Template/rancangan
3. Edit HTML
4. Cari kode 
</head>
 (agar mempermudah pencarian, klik kolom edit HTML, kemudian tekan Ctrl+F secara bersamaan pada keyboard)
5. Setelah ketemu kode </head> copy kode di bawah ini kemudian paste dan letakkan kode dibawah tepat DIATAS kode </head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/> 
6.   Simpan
7.   Pilih Tata letak/layout
8.   Add gadget/tambahkan gadget
9.   HTML/JavaScript
10. Copas kode dibawah ini kemudian paste dan letakkan kode nya pada kolom HTML/JavaScript
var scrolltotop={  
    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 200]}, 
    controlHTML: '<img src="URL Gambar Back To Top" />', 
    controlattrs: {offsetx:5, offsety:5}, 
    anchorkeyword: '#top',
    state: {isvisible:false, shouldvisible:false},
    scrollup:function(){ 
        if (!this.cssfixedsupport)
            this.$control.css({opacity:0})
        var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto) 
        if (typeof dest=="string" && jQuery('#'+dest).length==1)  
            dest=jQuery('#'+dest).offset().top 
        else 
            dest=0 
        this.$body.animate({scrollTop: dest}, this.setting.scrollduration); 
    },
    keepfixed:function(){ 
        var $window=jQuery(window) 
        var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx 
        var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety 
        this.$control.css({left:controlx+'px', top:controly+'px'}) 
    },
    togglecontrol:function(){ 
        var scrolltop=jQuery(window).scrollTop() 
        if (!this.cssfixedsupport) 
            this.keepfixed() 
        this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false 
        if (this.state.shouldvisible && !this.state.isvisible){ 
            this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0]) 
            this.state.isvisible=true 
        } 
        else if (this.state.shouldvisible==false && this.state.isvisible){ 
            this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1]) 
            this.state.isvisible=false 
        } 
    }, 
    
    init:function(){ 
        jQuery(document).ready(function($){ 
            var mainobj=scrolltotop 
            var iebrws=document.all 
            mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode 
            mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body') 
            mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>') 
                .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'}) 
                .attr({title:'Scroll Back to Top'}) 
                .click(function(){mainobj.scrollup(); return false}) 
                .appendTo('body') 
            if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //khusus versi IE6 ke bawah untuk loose check, juga untuk melihat apakah control mengandung teks 
                mainobj.$control.css({width:mainobj.$control.width()}) //IE6- perlu diset witdh yang jelas agar kontainer text terbentuk dengan rapi
            mainobj.togglecontrol() 
            $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){ 
                mainobj.scrollup() 
                return false 
            }) 
            $(window).bind('scroll resize', function(e){ 
                mainobj.togglecontrol() 
            }) 
        }) 
    } 
}
scrolltotop.init()
</script>
*Keterangan: Disini, saya menggunakan gambar dibawah ini untuk semua berbagai efek tombol back to top. Sobat bisa menggantinya sendiri. Di google banyak. Cari sendiri ya..

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9sOaIhAnuwbxLgo8HaNLZAHYojqLHIuzTSdp9B9zE-TuopMsTsVOe0ut6-yRwtpN8KEl8kGMyj2BDEZrqa371YNj1MzSXcYdBuhzew_qx8VL_lbODDfZ1u5BArtWOQmmMNIloFT7f0DcN/s1600/arrow.png


Tapi tenang, saya berbaik hati untuk memberi sedikit gambar dan URL nya untuk tombol back to top di blog.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2IA7pYU9ljvGrsmZASTu7yadHancw4rym2DcKzjYY0ONspWzyF5AhLDMPiPJBdkTM2xKO0n_MpYRTJgezESFayiHTE6cWdGJ9nrglEjwNpr1aOgGGAjjWhluhcPwVymYl_0lFwSKHJKc/s1600/blue-satu-delapan-blogspot.png
Cara Membuat Back To Top Berbagai Efek Keren Di Blog
http://www.zimedcode.com/blog/wp-content/uploads/2014/11/back-to-top-button.png

Cara Membuat Back To Top Berbagai Efek Keren Di Blog
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgQQuDojTNMu2Zf9yWqTPNZ2x2W5-UUfZCkesL8dFKrx36h10SiHovryZyBHmGFNX_dNnTovd-O8Y6OmSyEQF6fhBMwfZkBpwE1YvcNhO3N6_W_WpDfFh1VtnepmGQtRxviKbP2b_0zzHY/s1600/rb+back+to+top+4.png
Cara Membuat Back To Top Berbagai Efek Keren Di Blog
http://muslimbright.files.wordpress.com/2013/01/back-to-top-2.png
Cara Membuat Back To Top Berbagai Efek Keren Di Blog
http://blog.amcpros.com/wp-content/back-to-top-button.png
Cara Membuat Back To Top Berbagai Efek Keren Di Blog


Jangan lupa, ketika sudah mencoba dan berhasil, beri komentar... Kalau masih gagal, coba lagi. Semoga berhasil... ˆˆ
Judul Cara Membuat Back To Top Berbagai Efek Keren Di Blog
Deskripsi Cara membuat  tombol back to top di blog berbagai efek keren di blog yang dapat memudahkan pengunjung Anda untuk kembali ke atas
Author
Author Rating
95%/ 100% Suara Dari 2890 votes

Share to:

Post a Comment

  1. UnknownJanuary 6, 2015 at 12:02 AM

    btw, efek bounce gak nih BTT nya ?

    ReplyDelete
  2. Ghalang Mega JuangJanuary 6, 2015 at 12:03 AM

    Wah Ini Postingan Sangat Bugus Gan :D

    Nih Gan Solusi Internet Gratis : SSH

    ReplyDelete
  3. Robi Ladosa BLOGGER | robijepara08.blogspot.comJanuary 6, 2015 at 12:05 AM

    Btw itu efeknya apa back to topnya

    ReplyDelete
  4. UnknownJanuary 6, 2015 at 12:16 AM

    ane nanti bookmark gan artikel ini, buat blog baru ane blom ada back to top an..he

    ReplyDelete
  5. Chandra S. KusumaJanuary 6, 2015 at 7:47 PM

    ribet juga ya caranya, tapi bermanfaat nih gan. thank's banget ya gan. btw mampir balik http://chandstwn.blogspot.com

    ReplyDelete

Subscribe to: Post Comments (Atom)
 
Tutorial Blog Unik © 2013. All Rights Reserved.
Tutorial Blogger dan Trik Dasar PhotoShop
Top