Header Ads

  • Breaking News

    Add jQuery "Back To The Top and Go to the Bottom" Arrows


    Not only It looks beautiful, but is very useful for bloggers, blogs and websites. And all the other platforms that have a long leash. 
    It's easier to click down and without hassle and scrolling you are on the bottom of the page. Or reverse. You do not need to know HTML at all and is easy to install and works on all blogs and browsers. Even on Wordpress and tublr-in. 

    Now I will give you a demo codes and how to install it. It's over for a minute.



    1) Find ]]><b:skin> tag 
    2) Above it immediately, add the following code:

    /* Up and Down Buttons with jQuery
    ----------------------------------------------- */
    .button_up{
    padding:7px; /* Distance between the border and the icon */
    background-color:white;
    border:1px solid #CCC; /* Border Color */
    position:fixed;
    background: white url(http://4.bp.blogspot.com/-7zE5N9GdDUk/T6rH17KE6II/AAAAAAAACeQ/aEcKRyEhxsE/s16/arrow_up.png) no-repeat top left;
    background-position:50% 50%;
    width:20px; /* Button's width */
    height:20px; /* Button's height */
    bottom:280px; /* Distance from the bottom */
    right:5px; /* Change right to left if you want the buttons on the left */
    white-space:nowrap;
    cursor: pointer;
    border-radius: 3px 3px 3px 3px;
    opacity:0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
    }
    .button_down{
    padding:7px; /* Distance between the border and the icon */
    background-color:white;
    border:1px solid #CCC; /* Border Color */
    position:fixed;
    background: white url(http://3.bp.blogspot.com/-sukwuViZaYY/T6rH15A8niI/AAAAAAAACeM/YErd0S8lPGA/s16/arrow_down.png) 
    no-repeat top left;
    background-position:50% 50%;
    width:20px; /* Button's width */
    height:20px; /* Button's height */
    bottom:242px; /* Distance from the bottom */
    right:5px; /* Change right to left if you want the buttons on the left */
    white-space:nowrap;
    cursor: pointer;
    border-radius: 3px 3px 3px 3px;
    opacity:0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
    }
    
    Now look for the </body> tag (usually at the bottom of the page, use CTRL + F)

    Add the following code above it:

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


    If you alredy have jQuery installed,remove the red line of code. You will see that it is a great widget.

    This code add also above </body> tag


    That's it. It's easy and works everywhere. Thank you and Happy Blogging




    No comments

    Post Top Ad

    Post Bottom Ad