25+ Back to top buttons images plus 1 more

back to top images collectionAfter we have posted the last post about how to add back to top button in blogger I have decided to make a big collection for back to top images and this collection consists of more than 25 back to top images so you can choose the image that you want to put in the previous post code, the images will be uploaded directly so you can copy links directly so it can be more easier so I hope you like it and share it with your friends, this collection will be unique and I am the one who collected it and all copyrights of this images is to its owner I only collected it and posted it to our great readers.

How to use this images

The images in this great collection will be uploaded directly so you right click on the one you want and choose copy image link or any statement with same meaning as its different from browser to another, then you add the link to the image link as stated in the previous post and then you are done.

Back to top Images collection

Lets start with the collection of the images:

Last Words:

I hope you liked this collection if you will use any image then share this post with your friends, All copyrights for this images are for its own designer I only have collected it.
Peace : )

Posted: 04 Apr 2012 01:40 PM PDT
scrolling to top button for blogger
Another great amazing widget that is really helpful for any blogger this amazing widget will make the user can scroll to the top of the page with one click and as we are trying to provide easy navigation to our readers then we are introducing to all bloggers this amazing widget which is really great, the thing that is different about this scrolling to top button is that it appears when the user goes down and disappears when he return back to top. You must see it now and put it in your blog its easy to put it and its only one step so lets see it now.

How to Add this "scrolling to top" button in blogger?

  1. Go to blogger
  2. Click on layout
  3. Choose add a gadget at any place, you can choose the one which is at the bottom
  4. Click on html/javascript
  5. Add the following code in the window that opens
<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, www.ToStartBlogging.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},
        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
        this.$body.animate({scrollTop: dest}, this.setting.scrollduration);

        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'})

        var scrolltop=jQuery(window).scrollTop()
        if (!this.cssfixedsupport)
        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])
        else if (this.state.shouldvisible==false && this.state.isvisible){
            this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
            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})
            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
            $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
                return false
            $(window).bind('scroll resize', function(e){

Replace IMAGE LINK with the link of your image we will share some good amazing images in the next post so subscribe to be updated, and this is a link to one of the buttons

Last Words:

We hope that you liked this post subscribe to be updated with news and wait for more and more plugins that you will enjoy.
you can also see this post

Source: 25+ Back To Top Buttons Images


0 comment:

Post a Comment