Social Icons

  • Saturday, October 15, 2011

    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
    எனது பதிவு பிடித்திருக்கிறதா?

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

    பின்தொடர

    16 comments:

    1. நன்றி அன்பரே முன்பு இதனை வைத்திருந்தேன் ஆனால் அது load ஆகி தான் முதல் பக்கம் செல்லும் இது உடனே ஆகிறது நன்றி

      ReplyDelete
    2. எனது தளத்தில் உபயொகித்து வருகிறேன் நண்பா ,பகிர்வுக்கு நன்றி.

      தமிழ் மணம் முதல் வாக்கு

      ReplyDelete
    3. ஏன் நண்பா தங்கள் வாக்கு (உங்கள் தளத்தில்)இட வில்லையா

      ReplyDelete
    4. @M.R

      போட்டுவிட்டேன் நண்பா

      ReplyDelete
    5. நல்ல யோசனை!.. அனால் மிக நீள பதிவுகளுக்கு பேஜ்நேசன் னு சொல்லக்கூடிய பக்கங்களை புரட்டி படிப்பது போல் இருந்தால் இன்னும் சிறப்பாக இருக்கும்..

      ReplyDelete
    6. தகவலுக்கு நன்றி... ஏம்பா பிளஸ் டூ பா.. பயமே இல்லையா... இல்ல பிட் இருக்கிற தைரியமா?

      ReplyDelete
    7. @suryajeeva

      பயம் எனக்கா

      அண்ணே நாங்கெல்லாம் சுனாமிலயே நீச்சல போடுறவுங்க. எங்ககிட்டயேவா

      ReplyDelete
    8. பயனுள்ள தகவல். பகிர்வுக்கு நன்றி நண்பா!

      ReplyDelete
    9. நன்றி அய்யா நன்றி....!!!

      ReplyDelete
    10. தேங்க்ஸ்ங்கோ ...

      ReplyDelete
    11. அது சரி, அரசே புத்தகத்த நார் நாரா கிழிச்சு கொடுக்கும் போது, நீங்க கிழிக்கலாம் தப்பில்ல, பிட் தான சுனாமி?

      ReplyDelete
    12. நல்ல தகவல் பாஸ்..ஆமா விடுமுறையா கலக்குங்க

      ReplyDelete
    13. பயனுள்ள தகவல்... சதிஷ்...

      என்ன நண்பா... 5நாள் லீவா... ok ok

      சைக்கில் Gap கிடைச்சாலும்... ஆட்டோ என்ன லாரியே ஓட்டிடுவோம்.. அப்டிதானே...

      ReplyDelete
    14. தல புதுசு புதுசா அறிமுகப்படுத்தி அசத்துறீங்களே...

      ReplyDelete

     

    FaceBook Followers

    Followers