16 ப்ளாக்கில் Animated Back to Top பட்டனை கொண்டுவர

தெரியாதவர்களுக்காக இந்த பதிவு.நாம் நம் வலைப்பூவில் பல பதிவுகளை போடுகிறோம்.சில பதிவுகள் நீளமாக இருக்கும். அந்த சமயம் பதிவை படிப்பவர்கள் கீழே வரை படித்த பின் மீண்டும் மேலே வருவதற்கு கடினமாக இருக்கும். ஆனால் அனிமேஷன் Back to Top பட்டனை வைத்தால் எளிதாக பக்கத்தின் மேலே சென்றுவிடலாம்.இந்த Back to Top பட்டன் Animation ஆகி மேலே செல்லும்.என்னுடைய தளத்தில் இருப்பது போல.

Back to Top பட்டனை எப்படி வைப்பது என்று பார்ப்போம்:

        1.முதலில் Blogger Dashboard>>Design பக்கத்திற்கு செல்லவும்.

       2.Add a gadget என்பதை க்ளிக் செய்தால் ஒரு Window வரும். அதில் HTML/JavaScript என்பதை தேர்வு செய்யவும்.

       3.பிறகு Title என்ற இடத்தில் உங்களுக்கு விருப்பமான தலைப்பை இடவும். உதாரணமாக, Back To Top அல்லது அதை காலியாக விட்டு விடவும்
  

       4.Content என்ற இடத்தில் பின்வரும் HTML Code-ஐ paste செய்யவும்.

HTML CODE:

<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>

Code=ல் மாற்றம் செய்வதற்கு

• மேலே உள்ள Code-ல் சிகப்பு நிறத்தில் உள்ள IMAGE LINK என்பதற்கு பதிலாக உங்களுக்கு விருப்பமான படத்தின் முகவரியை (Image URL) கொடுக்கவும்.

• பிறகு SAVE கொடுத்து வெளியேறவும்

அவ்வளவுதான்!

உங்களுக்காக சில பட்டன்கள்:

  

   

   

   

மேலும் Button-களுக்கு Google Search-ல் Back to top Button என்று தேடவும் நிறைய வருகிறது.Button-னின் Background Color-பிடிக்கவைல்லை என்றாலோ படத்தை மட்டும் Cut-பன்னி எடுக்க வேண்டும் என்றாலோ என்னிடம் சொல்லவும்.நான் Cut-பன்னி தருகிறேன்.  My Email:sathishkrish20@gmail.com

நன்றி:My Blogger Tricks


டிஸ்கி: 5 நாள் விடுமுறை என்பதால் கணிணியை இறக்கிவிட்டேன்.நாங்கெல்லாம் 2 நாள் லீவ் கிடைத்தாலே விடமாட்டோம்.இதுல 5 நாள் லீவ் கிடைச்சிருக்கு. விடுவோமா?

Share

Tweet

எனது பதிவு பிடித்திருக்கிறதா?

புதுப்பதிவுகளை மின்னஞ்சலில் பெற!

பின்தொடர