4+ Cara Pasang Tombol Back To Top Di Blog Dengan Mudah

Tutorial: Cara Membuat, Memasang dan Menampilkan Tombol Menu Back to Top di Blog Blogspot

Pernah mendengar atau membaca artikel ihwal Back to Top di blog? Buat yang belum tahu, pengertian Back to Top ialah sebuah ikon yang apabila di klik, akan kembali ke halaman atas.

Praktisnya begini, tombol Back to Top ini berfungsi mengembalikan pembaca dari halaman terbawah suatu situs web, menuju ke halaman potongan paling atas. Biasanya, widget Back to Top ini dipakai oleh situs-situs yang biasanya memposting Content dengan isi yang panjang ke bawah.

Salah satu fakta menariknya, -- yang berkaitan bersahabat dengan Google AdSense; Back to Top bekerjsama kurang cocok dipakai apabila situs web itu menampilkan iklan Google AdSense; kenapa? Karena dengan adanya Back to Top, berarti memperkecil klik pada iklan yang berada di Sidebar-Wrapper.

Selain itu, memakai Back to Top juga turut mempengaruhi kecepatan loading situs web; alasannya ialah untuk menciptakan dan mengaktifkan fitur ini, lebih banyak didominasi sajian tombol Back to Top memakai JavaScript tambahan.

4+ Cara Pasang Tombol Back to Top di Blog dengan Mudah

Di bawah ini ada beberapa cara yang dapat di pilih, dan dapat diadaptasi dengan kondisi situs web kamu; apakah template blogger kau masih berbahan default, atau sudah di modifikasi ibarat halnya SEO Kraken Blogger Theme.

Mengapa kami katakan ibarat itu? Suatu tema blogger yang sudah di modifikasi, biasanya tidak lagi mendukung beberapa JavaScript komplemen ini, dan bahkan peletakan kodenya dapat saja berbeda.

Contoh mudahnya saja; biasanya JavaScript ditambahkan di atas aba-aba </body>. Nah beberapa diantaranya tidak bekerja, melainkan harus di pasang di atas </head> semoga JavaScript benar-benar bekerja sebagaimana mestinya.

1. Cara Membuat Tombol Back to Top dengan HTML/JavaScript

Yang dimaksud memasang tombol sajian Back to Top dengan HTML/JavaScript, artinya kita hanya perlu masuk ke Layout, -- tanpa harus masuk lagi ke template blogger.

• Blogger > Layout (Tata Letak) > Add a Gadget (Tambahkan Gadget)
• Pilih HTML/JavaScript > Copy (Salin) aba-aba di bawah ini > Paste (Tempel) di kolom yang sudah disediakan oleh Blogger
• Kemudian simpan Layout (Tata Letak) dan lihat hasilnya

Kode yang akan di Copas dan/atau diletakkan di Layout (Tata Letak) di Blogger:

<script type="text/j4vascript" > var scrolltotop={ setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 200]}, controlHTML: '<img src="URL_GAMBAR_DISINI" />', 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 terperinci semoga 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> 

Ubah aba-aba URL_GAMBAR_DISINI di atas dengan tautan URL yang ingin kau gunakan. Beberapa koleksi URL untuk ikon Back to Top yang dapat digunakan, diantaranya:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioix8qvPlMwwUEyF8f-cT9Hw9_7nRVM-Y9jbX_d9hsdD7qB2pDdY24dv65YRPKKxpAp_ZS-JDJqG_oVvZrplTRp18Lgm4hi5b9YUuuw4jrBjhLGCkUzsagqP_s5INb0pwQHPYIaudQaBC3/s1600/Tutorial-Cara-Pasang-Tombol-Back-to-Top-di-Blog-dengan-Mudah-Arief-Ghozaly-1.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid8ytT2JwtHartdQPGPTA1Ckp1DvK3m6BS7DlX4kfwiTmHIiBkPyr8V50RU5fSXye6500An_rAqhBXhK7J9zOKlHTGUa1j8RQeCHCmBCRIhr-oOGjQt31-hpN21Tzm2WpxXrJ4wy7e63yD/s1600/Tutorial-Cara-Pasang-Tombol-Back-to-Top-di-Blog-dengan-Mudah-Arief-Ghozaly-2.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB8IYGGvSi2dWS23VMCtE4wvSkIAFVAZGgZIKPcftLIYGgmv46nwoUK6hWOomMJ1zKZoprIBY7YIIRLpRT7rNGEKOlDOH4uZ4vSJ5vljJEwrsFIQr7ZHp0lXFOob6l06Ymj2Pw6KJ64TpN/s1600/Tutorial-Cara-Pasang-Tombol-Back-to-Top-di-Blog-dengan-Mudah-Arief-Ghozaly-3.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_WrEqBlImue6jucZJfgUIhAaGgYN0xTw3gOzzNOpou3D024J7bDr2ZRGZBNYmK9f5F0zOOp7_oHS4_ND3Anf_he7u5hyphenhyphendspaodsg4-npeN7GYoR-mL0vUpTknN2NpgeMxPRPXJdzx1ugy/s1600/Tutorial-Cara-Pasang-Tombol-Back-to-Top-di-Blog-dengan-Mudah-Arief-Ghozaly-4.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOpIyfz2uupZnp_cynXRcOxZSFYrDjwLvdfNoh3Csoz2TxWrU1AtJeE-JKljIprc64QdiYycaikO7ejKyTzarXd5IAYAqnSN2VnXK_Cvs3ydvfpASP-DKnsZLyfKkeR5wc0QLvtRs1Kjo6/s1600/Tutorial-Cara-Pasang-Tombol-Back-to-Top-di-Blog-dengan-Mudah-Arief-Ghozaly-5.png

Catatan: Untuk ukurannya sendiri, kau dapat mengaturnya eksklusif dengan tunjangan CSS untuk potongan Width dan Height.

Cara di atas, kami rasa cukup mudah. Jangan lupa, hapus Obeng dan Tang yang ada di dalam template blogger TEPAT sehabis memasang widget Back to Top di atas.

2. Cara Membuat Tombol Back to Top dengan jQuery dan HTML/JavaScript

Hampir sama dengan tutorial No. 1 diatas, akan tetapi di tutorial No. 2 ini kita akan membutuhkan sedikit tunjangan dari yang namanya jQuery.

1. Copy (Salin) salah satu aba-aba yang ada di bawah ini:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/j4vascript'/> 

Atau aba-aba ini:

<script type="text/j4vascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 

2. Letakkan di atas aba-aba </head>

Setelah memasang aba-aba jQuery, selanjutnya ikuti beberapa langkah gampang cara menampilkan tombol Back to Top di bawah ini dengan cermat:

• Masuk ke Blogger > Masuk ke potongan Layout (Tata Letak)
• Ketuk tombol Add a Gadget (Tambahkan Gadget)
• Copas aba-aba di bawah ini, dan simpan > Cek tampilan blog ibarat biasa

<style> .mbw-back-to-top { position: fixed; bottom: 2em; right: 10px; text-decoration: none; padding: 1em; display: none; cursor:pointer; } </style> <img class="mbw-back-to-top" src="URL_GAMBAR_DISINI" /> <script type="text/j4vascript"> /*****mybloggersworld.com***/ jQuery(document).ready(function() { var offset = 220; var duration = 500; jQuery(window).scroll(function() { if (jQuery(this).scrollTop() > offset) { jQuery('.mbw-back-to-top').fadeIn(duration); } else { //www.mybloggersworld.com jQuery('.mbw-back-to-top').fadeOut(duration); } });  jQuery('.mbw-back-to-top').click(function(event) { event.preventDefault(); jQuery('html, body').animate({scrollTop: 0}, duration); return false; }) }); </script> 

Catatan: Hapus URL_GAMBAR_DISINI di atas dan ganti dengan salah satu URL daftar ikon yang sudah kami sediakan di tutorial No. 1 di atas.

Jika tutorial di atas Gagal, coba cek kembali template blogger yang digunakan. Permasalahan kenapa dapat gagal, biasanya alasannya ialah aba-aba jQuery tersebut sudah ada di dalam template blog yang kau gunakan; sehingga jQuery menjadi 2 -- Duplicate, or Double jQuery.

Untuk mengatasinya, hapus jQuery yang sudah ada sebelumnya. Jangan pasang aba-aba jQuery yang sama, dan jangan pernah menduplikatnya.

3. Cara Cepat Membuat Tombol Back to Top di Blogger/Blogspot

Mau yang lebih cepat dan efisien? Ikuti langkah-langkahnya di bawah ini dengan hati-hati.

1. Masuk ke Blogger > Layout (Tata Letak)
2. Ketuk tombol Add a Gadget (Tambahkan Gadget), Copas (Copy/Paste) aba-aba di bawah ini:

<script type="text/j4vascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>  <script type="text/j4vascript" > var scrolltotop={ //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top). setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]}, controlHTML: '<img src="URL_GAMBAR_DISINI" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol" controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links state: {isvisible:false, shouldvisible:false}, scrollup:function(){ if (!this.cssfixedsupport) //if control is positioned using JavaScript this.$control.css({opacity:0}) //hide control immediately after clicking it var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto) if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists 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()!='') //loose check for IE6 and below, plus whether control contains any text mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text mainobj.togglecontrol() $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){ mainobj.scrollup() return false }) $(window).bind('scroll resize', function(e){ mainobj.togglecontrol() }) }) } } scrolltotop.init() </script> 

3. Selanjutnya klik tombol Save

Kode yang dipakai ada di bawah ini, dan jangan lupa ganti URL_GAMBAR_DISINI dengan URL yang menampilkan ikon Back to Top yang sudah kami siapkan di atas (lihat kembali tutorial No. 1 di atas).

4. Cara Pasang Widget Back to Top yang Smooth di Blogger/Blogspot

Dikatakan smooth alasannya ialah muncul atau tidaknya ikon Back to Top ini sangat lembut. Dan bahkan, kondisinya tombol Back to Top ini dapat hilang dan muncul secara otomatis.

Maksudnya begini lho... Jika kondisi sedang di atas, ikon tidak muncul. Namun saat di scroll ke pertengahan laman dan ke halaman paling bawah, ikon Back to Top akan muncul secara otomatis.

Karena sifatnya yang smooth, kita membutuhkan aba-aba jQuery. Simpan aba-aba jQuery di bawah ini, sempurna di atas aba-aba </head> atau </body>.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script> 

Catatan: Jika aba-aba jQuery sudah ada, tidak perlu lagi memasangkannya. Sebab jikalau sudah duplikat, widget Back to Top tidak akan muncul dan widget lainnya akan mengalami error.

• Layout Blog (Tata Letak) > Add a Gadget > HTML/JavaScript
• Copy (Salin) aba-aba di bawah ini, dan letakkan (Tempel/Paste) di dalam Content yang disediakan HTML/JavaScript
• Klik tombol Save, dan cek hasilnya

<script> jQuery(document).ready(function() { var offset = 220; var duration = 500; jQuery(window).scroll(function() { if (jQuery(this).scrollTop() > offset) { jQuery('.back-to-top').fadeIn(duration); } else { jQuery('.back-to-top').fadeOut(duration); } }); jQuery('.back-to-top').click(function(event) { event.preventDefault(); jQuery('html, body').animate({scrollTop: 0}, duration); return false; }) }); </script> <style> div#page { max-width: 900px; margin-left: auto; margin-right: auto; padding: 20px; } .back-to-top { position: fixed; bottom: 2em; right: 0px; text-decoration: none; color: #000000; background-color:transparent; font-size: 12px; padding: 1em; display: none; z-index:9999; } .back-to-top:hover { text-decoration: none; } </style> <a href="#" class="back-to-top"><img src="URL_GAMBAR_DISINI" alt=" Memasang dan Menampilkan Tombol Menu Back to Top di Blog Blogspot 4+ Cara Pasang Tombol Back to Top di Blog dengan Mudah" / /></a> 

5. Cara Buat dan Pasang Menu Back to Top dengan Font Awesome (Bootstrap)

Bisa di bilang, gadget Back to Top inilah satu-satunya widget Back to Top yang ringan (Fast Loading) dan Responsive.

Kenapa dikatakan ringan? Karena yang diandalkan ialah Font Awesome yang berasal dari Bootstrap, -- bukan gambar lagi. Terlebih-lebih, ini usulan sebagaimana rekomendasi dari Google sendiri.

1. Pasang aba-aba JavaScript font awesome di bawah ini, sempurna di atas aba-aba </head>

<link href='//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css' rel='stylesheet'/> 

2. Untuk CSS nya sendiri, kami memakai aba-aba CSS berikut:

#back-to-top {background: #E73037;color: #ffffff;padding: 8px 10px; font-size:24px} .back-to-top {position:fixed!important;position:absolute;bottom:20px;right:20px;z-index:999} 

3. Untuk mengaktifkan dan memanggil fungsi widget Back to Top, pasang aba-aba JavaScript di bawah ini TEPAT di atas aba-aba </body>

<div class='back-to-top'> <a href='#' id='back-to-top' title='back to top'> <i class='fa fa-chevron-up'/> </a></div> <script> $(window).scroll(function() { if($(this).scrollTop() &gt; 200) { $(&#39;#back-to-top&#39;).fadeIn(); } else { $(&#39;#back-to-top&#39;).fadeOut(); } }); $(&#39;#back-to-top&#39;).hide().click(function() { $(&#39;html, body&#39;).animate({scrollTop:0}, 1000); return false; }); </script> 

4. Selanjutnya akhiri dengan menekan tombol Save Template, dan cek hasilnya.

Karena sifatnya yang mengandalkan Font Awesome, gambar (atau tombol) yang ada dapat kau ubah (ganti) sesuai cita-cita kamu. Caranya ibarat apa sih?

Coba lihat JavaScript di atas (langkah nomor 3), ini kodenya:

<i class='fa fa-chevron-up'/> 

Kode di atas dapat kau ganti dengan kode-kode Font Awesome lain yang ingin kau gunakan. Untuk mengecek Font Awesome lainnya, dapat eksklusif mengunjungi situs web Font Awesome.

Punya pertanyaan seputar cara membuat, memasang, dan menampilkan widget Back to Top di blogger/blogspot ini?

Source:
candysweet-aina.blogspot.com/search?q=seo-kraken-seo-killer-fast-loading
candysweet-aina.blogspot.com/search?q=seo-kraken-seo-killer-fast-loading
candysweet-aina.blogspot.com/search?q=seo-kraken-seo-killer-fast-loading
Sumber http://addbloggerthemes.blogspot.com

Share this post