Scrolling top blogger

Looking for scrolling top option for blogger it is simple

Before proceeding to steps go to your template click on backup/Restore option then click on download full template option. For more information see here

Step1: Go to your template click on Edit HTML click on proceed option

Step2 : Add this line after <head> tag open

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

Step 3: Search ( Ctrl+f ) for this text ]]></b:skin> i.e., before style </style> tag end and add this text before it.

#topcontrol {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNmNNRkcMbamrBwywPLNynULR56lb43qwnxqeHFo3JcJM-Y4L4HydiPvwkaN6ZFmD31dMsA3XCOX8x6y_sG_7uffmVIi1-gmbqtxQoOfC1v_9yVS9sL-0nNM-1QXObb3OAv9Kbs7fP2II/s1600/go-up.png") no-repeat scroll 0 0 transparent;
    height: 48px;
    width: 48px;
}

Step4: Now search for this text //]]> </script> i.e., before </script> tag end

and add this styles to it.

/***********************************************
* 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]},
    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"></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()

Step5: Click on preview of it and see the magic if everything works fine then click on Save template option, if any thing goes wrong click on Clear edits option

Read more

Make text unselectable on an html page

unselectable, CSS, disble text select, restrict text selection, disable selecting text, javascript diabling text select, css siabling text select

For disabling the text copy paste option

Add these lines in your stylesheet

*.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     Introduced in IE 10.
  */
   -ms-user-select: none;
   user-select: none;
}

For IE < 10 and Opera, you will need to use the unselectable expando property of the element you wish to be unselectable. You can set this using an attribute in HTML:


Give a class name for your div and also add unselectable="on" in your div

<div id="container" unselectable="on" class="unselectable">
 your contents here
</div>

Now see the difference the selecting text is disabled.

Hope this article is helpful for you cheers :)

Read more

Screen Resolution Alert for Web Developers

Boston, USA and Dublin, Ireland, Wednesday, 11th April, 2012: A major milestone in screen resolution sizes has been passed according to independent web analytics company, StatCounter. The company's research arm, StatCounter Global Stats reports that for the first time 1366x768 has become the most popular screen resolution worldwide, having overtaken 1024x768.

"The data reflects a continuing trend of users moving to larger screen resolution sizes," commented Aodhan Cullen, CEO, StatCounter. "The screen resolution size people are using is a critical factor for developers when it comes to web design, particularly in the case of fixed width web pages."

Since StatCounter began its tracking of screen resolution in March 2009, as a free service to developers and other users, 1024x768 has been the dominant screen size globally on the web (excluding mobile*).

1024x768 has fallen from 41.8% in March 2009 to 18.6% in March 2012.

Over the same period 1366x768 has grown from 0.68% to 19.28%.

The third most popular size is 1280x800 at 13%.

Cullen also said that while StatCounter Global Stats provides information on worldwide and regional trends, monitoring the specific screen resolutions being used to view individual sites is also very important.

StatCounter Global Stats data is based on over 15 billion page views per month (4 billion from the US) to the StatCounter network of more than three million websites.

Read more

How to remove stylesheet dynamically and append new stylesheet dynamically

If you want to remove loaded style that means at the time page loading we added stylesheet.

But after loading that when click on some thing if you want to remove the loaded styles and you want to add new styles to that page.

So by using jquery  it is simple to remove the loaded stylesheet and add new styles to it.

Just by simply injecting this lines into your code :

This line is to remove loaded style sheet:

$('link[rel=stylesheet]').remove();

 This line is to add new styles to the page

$('head').append('link rel="stylesheet" href="style2.css" type="text/css" /');

 OR

If you want to pass variable to href instead of direct name of the file it is also simple

$('head').append('link rel="stylesheet" href=+variblaename+".css" type="text/css" /');

Read more