Tuesday, February 23, 2016

Tips Blogger: Cara Membuat Tombol Back To Top Tanpa Ribet


Pada artikel kali ini saya akan memberikan tutorial sederhana yang mana tutorial ini adalah pengalaman saya sendiri, beberapa waktu yang lalu saya mencari Tutorial Cara Membuat Tombol Back To Top Pada Blogger, Maka berdasarkan pengalaman tersebut saya akan share disini mengenai cara membuat tombol back to top.

Saya telah mencoba beberapa tutorial membuat tombol back to top ini dan biasanya adalah kita diharuskan untuk mengedit kode HTML pada template blog kita, namun dari beberapa cara yang saya coba tersebut, disini saya akan share salah satu cara yang saya anggap tidak ribet. saya telah menemukan cara super sederhana untuk membuat tombol Back To Top dan saya sudah tidak sabar untuk berbagi dengan Anda!

Saya telah menerapkan tombol ini di blog saya beberapa hari yang lalu, dan saya menyukainya!. Anda dapat menggunakan gambar yang Anda inginkan, ini bagus bagi Anda yang ingin memastikan tombol ini cocok dengan desain template Anda!.
Yang saya suka dari cara ini adalah kita tidak perlu melibatkan kode template apapun sehingga tidak perlu khawatir akan mengacaukan desain blog jika Anda tidak mengerti tentang coding. Selama Anda tahu beberapa dasar-dasar tentang Blogger, Anda akan baik-baik saja!

Cara Membuat Tombol Back To Top Tanpa Ribet

Desain Tombol Anda

Saya membuat tombol saya menggunakan PicMonkey , tetapi Anda dapat menggunakan metode apapun untuk editing foto yang Anda inginkan! Website ini adalah favorit saya untuk mengedit/membuat grafis karena gratis dan sesuai dengan tingkat keterampilan yang saya miliki! Mungkin suatu hari nanti saya akan membuatnya ke tingkat Photoshop, tapi sekarang saya cukup puas dengan tool ini.

Untuk tombol Anda bisa membuat yang elegan seperti yang Anda inginkan, atau tetap sederhana seperti yang saya pakai.

Setelah Anda selesai merancang tombol Anda, upload gambar tombol Anda ke website seperti Photobucket lalu ambil URL dari gambar tersebut. Anda akan membutuhkan ini ketika Anda memasukkan ke dalam kode nanti.

Buat Widget Pada Blog Anda

Pergi ke bagian Tata Letak pada Dasboard Blogger Anda dan buat widget  HTML/JavaScript baru di wilayah footer dari blog Anda. Di sinilah semua kode akan diletakkan!

Tambahkan Kode

Di sinilah keajaiban terjadi :) ! Setelah mencari-cari kesana kemari untuk menemukan kode yang sempurna, akhirnya saya menemukan ini di http://www.mybloggertricks.com/2011/09/smooth-scrolling-to-top-button-for.html. Disana memiliki banyak tutorial hebat lainnya, tapi ini adalah salah satu versi update mereka dengan extra smooth scrolling dan fading effect.

Paste kode ini ke dalam widget yang baru saja dibuat, dan tambahkan URL untuk gambar yang Anda buat di dalam kode dibawah ini, ganti tulisan "IMAGE LINK" dengan URL gambar Anda.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" >
/*********************************************** 
* Scroll To Top Control script- © Dynamic Drive DHTML code library (www.dynamicdrive.com) 
* Modified by www.MyBloggerTricks.com 
* This notice MUST stay intact for legal use 
* Visit Project Page at http://www.dynamicdrive.com for full source code 
***********************************************/

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="IMAGE LINK" />',//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> 

Simpan widget Anda dan Anda telah selesai Membuat Tombol Back To Top pada Blog Anda. Silahkan buka dan periksa blog Anda untuk melihat tombol baru yang telah Anda buat!

_Eof_


Emoticon Emoticon