• RSS
  • Delicious
  • Digg
  • Facebook
  • Twitter
  • Linkedin
  • Increase Website And Blog Traffic:latest article for Increasing Blog and website Traffic free gide.....
  • Create and Upload Site Map to Google:Google is fist largest Search Engine by upploading SITE MAP Google Easily Search Links from Ur site in Searching.......
  • Fix WEB SITE Errors:Google and other search engines always take those site in there fist page in searching which ha too less web Errors...
  • Top 20 Search Engine:Submit Ur site to top 20 Search Engines to Increasing Ur Site Traffic and making money top search engines like as Google, Yahoo, Ask, AOl, MSN...
  • Top Social Sites:Top 100 Social sites which real help U make a Affliate Marketer and in Pormoting ur Producdts...

New Posts

How to add go to top and go to bottom buttons Using jQuery in Blogger

Posted by Mohsin On 3/06/2013 11:28:00 AM 5 comments

The Up and Down buttons can be used to navigate to the top and bottom of the page content, especially when on the main page are many articles or when an article has too many comments. These buttons have a fadeIn and fadeOut effect, this means that they will fade slightly when we are scrolling to the top or bottom of the page and additionally, have the function of going up/down the blog.

blogger widgets, blogger navigation
Demo

You can see a live demo on my blog, the buttons are located on the right side.

How to put Go Up and Go Down buttons using the jQuery slide effect

Step 1. Go to Template, click on the Edit HTML button


Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the Blogger search box

Step 3. Copy and paste the following piece of code inside the search box in order to find it:
]]></b:skin>
Step 4. Just above ]]></b:skin> paste this one:
/* 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);
}
Note:  - in green are some annotations that explains what styles you can modify on their left side.
           - You can change the arrows by changing the URLs in blue.
           - To change the buttons background color of buttons, change the white text with your color

Step 5. Now search (CTRL + F) for the following tag:
</body>
Step 6. And just above it, paste the code below:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

<div class='button_up' id='button_up' style='display:none;'/>
<div class='button_down' id='button_down' style='display:none;'/>

<script>
//<![CDATA[
(function(){var special=jQuery.event.special,uid1='D'+(+new Date()),uid2='D'+(+new Date()+1);special.scrollstart={setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})();

$(function() {
var $elem = $('body');
$('#button_up').fadeIn('slow');
$('#button_down').fadeIn('slow');
$(window).bind('scrollstart', function(){
$('#button_up,#button_down').stop().animate({'opacity':'0.2'});
});
$(window).bind('scrollstop', function(){
$('#button_up,#button_down').stop().animate({'opacity':'1'});
});
$('#button_down').click(
function (e) {
$('html, body').animate({scrollTop: $elem.height()}, 800);
} );
$('#button_up').click(
function (e) {
$('html, body').animate({scrollTop: '0px'}, 800);
} );});
//]]>
</script>

Note: In case you want to remove the "Go to top" button, remove the 1st bolded code and to remove the "Go to bottom" button, remove the 2nd one.

Step 7. Finally, Save your changes by clicking on the Save template button. Enjoy!

5 comments:

Dog walker- other pet sitters and dog walkers, dog
boarding facilities, veterinarian offices, kennels.
the impact they have on the environment by limiting the chemical usage they.
This will not only increase the life of your carpeting but at the same time protect you
and your loved ones from prospective health problems.

Also visit my site ... cleaning grout Cupertino Ca

It is the best time to make some plans for the future and it's time to be
happy. I've read this post and if I could I wish to
suggest you few interesting things or advice.

Perhaps you could write next articles referring to this article.

I wish to read even more things about it!

Here is my weblog: willyqfva.centerblog.net; ,

Hi there, just became alert to your blog through
Google, and found that it's truly informative.

I'm going to watch out for brussels. I will be grateful if
you continue this in future. Numerous people will be benefited from your writing.

Cheers!

Feel free to visit my blog post meal plans for weight loss

The outlines between lender, depositor and manager are rarely well defined, one fact remains: the particular
of interest-based credit is such how the lower an individual's
income, the more expensive one's asking for rate along with the lower people's return in deposits In case you are thinking of stepping into a debt plan and have guarantor lending
options, then it is almost certainly worth chatting with the lender
so see what exactly arrangements can be put into place first Try to remember, the credit bureaus
are rating your financial management skills This included advantages count extensive repayment conditions,
deferment options and extraordinarily simple credit checks for
approval Being in the military requires that a person learn to both direct and follow The strongest reason to own public (muni) bond financial
resources are the taxes benefits this accrue so that you can investors considering that U
The process of debt consolidation reduction can be done in a very
several ways, the most typical one remaining to replace your whole loans
pertaining to debts that has a single financial debt Find out
what you owe, take into account consolidating within one
payment and check out your repayment options If you successfully pass or far
better said endure, your life will change forever for any better, nevertheless, if you fail Often, women are usually more in music
with the desires of the patron's emotions --
this is the most significant reasons why We have women at the office Without any contribution of equity the task involving
evaluating this collateral isn't going to take place
hence by making the item approved without having delay A special reason institutions add the three long-term credit banking companies ,specialized small business institutions ,plus specialized farming ,forestry, and fishery
Use our short term cash loans to sort out your credit score because if you pay money loan by the due date, this will raise your credit score Gathering as a team and
determine which alternative will work finest and bring from the most money in your area It is really
distressing when they collect mails containing letters of refusal from your
finance specialists � For January 26, 2010, Master of ceremonies - Clatchy Classifieds reported of which �2009 saw delinquencies on all
home types and in all regions surpass prior highs in the history
of the actual tracker, Moody's repair wrote" As ended up being mentioned, pay day loan is the speediest and the least difficult solution to a quick term financial problem while unexpected charges that are through your budget happens, when most wanted item about the department store is definitely on sale and you're simply short of dollars, or whenever your budget fails to get results, you have the pay day loan to go So abandon your concerns behind in addition to fulfill the financial requirement with individual finance Your personal bankruptcy might cause your credit rating to drop up to 100 things Some people simply just don't have the funds to pay these types of expenses making it important to generally dispute the balance with the debt collection agencies and make these folks prove that it is a legitimate credit debt The loan program has been brought to life by keeping your mind that there can situations in one's lifestyle when he needs quick dollars

Also visit my web site instant payday loans in minutes

This piece of writing provides clear idea in support of
the new visitors of blogging, that in fact how to do
blogging and site-building.

Feel free to visit my blog Medifast Diet

Post a Comment

All types of Comments are welcome