-->

Cara Memasang Tombol Back To Top Auto Hide

-Sebelum Itu - Berikanlah Komentar walau hanya ucapan Terima Kasih-



Dalam Tutorial Blogger kali ini kita akan belajar  bagaimana cara memasang widget Back To Top Auto Hide ( Simple Mode ). Widget ini biasa juga disebut Back To Top Auto Hide ( Simple Mode ). Widget ini hampir sama dengan related post bedanya kalau di related post menampilkan dalam satu label tapi di widget ini menampilkan pageview secara acak ( random ) dengan tiba-tiba.

Gambar untuk  Back To Top Auto Hide ( Simple Mode )  seperti ini



Jika sobat berminat untuk memasang Widget Recommended Post Slide tersebut ikuti langkah-langkah dibawah ini.
  1. Login ke blogger sobat
  2. Pilih Rancangan --> Tambah Gadget --> HTML/JavaSript
  3. Masukkan semua kode dibawah ini ke dalam HTML/JavaScript tadi

<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- © Mafia Hacker DHTML code library (www.MafiaSitez.blogspot.com) 
* Modified by Yandi Mulyadi
* This notice MUST stay intact for legal use 
* Visit My Project Page at http://www.MafiaSitez.blogspot.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="http://4.bp.blogspot.com/-jqnu-lpoKyw/Tj98e4pj8eI/AAAAAAAAAkI/Idt4nuGUoIs/s1600/arrowTop.png" />', //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:'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>

Kode Bercetak Merah Tebal Bisa Anda Ganti Dengan GAMBAR Disini - Lihat Di Postingan Bawahnya !
Dan Kode Bercetak Hijau Tebal Bisa Diganti Dengan Kata-Kata Anda Sendiri ^^
#NB : Mohon Kode Yang Diedit Hanya Kode Merah Tebal Dan Hijau Tebal Saja , Karena Kalau Yang Lainnya Di Ganti Template Dapat Menjadi ERROR !



Taraaampaaammppaaammm ............... Jadi deh.............


Untuk Demonya Klik Di Bawah Ini :


Lihat DEMO


Terima Kasih Sudah Membaca Jangan LUPA KOMENTAR Anda ! 

Semoga Bermanfaat :)
Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Use parse tool to easy get the text style on disqus comments:

Show Parser Hide Parser

Disqus Comments
© 2019 Mafia BloGGer Sitez - Template Re-Design by Mafiasitez - Proudly powered by Blogger