MatrixAdapt | Logiciel de gestion d'Entreprise, Création et référencement des sites web

Seo Master present to you: 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 there 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.


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. Select the "Expand Widget Templates" box

Step 3. Search (using CTRL + F) for the following piece of code:

]]></b:skin>

Step 4. Just above this code, 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://www.matrixar.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://www.matrixar.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 this tag:

</body>

Step 6. And just above it, paste the following code:

<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 Template. Enjoy!2013, By: Seo Master

Seo Master present to you: 2013, By: Seo Master

Seo Master present to you:
By Katie Miller, Developer Marketing

With Google I/O 2013 registration only days away, on Wednesday, March 13, 2013 at 7:00 AM PDT (GMT-7), we want to make sure you’re as prepared as possible for the process.

First, we’re pleased to share that we’ve just added a lot of information to the Google I/O 2013 site, including information on the registration process, travel planning resources, key event details, FAQs, and (new this year) child care.
Second, we’d like to share answers to some of the most commonly asked questions we’ve received in the last few days on +Google Developers. Complete FAQs are available on the Help page of the event site.

Optimizing your registration experience

We anticipate high demand once again, but there are steps you can take to be prepared for the process.

Before registration opens:

• Make sure you have set up both a Google+ account and a Google Wallet account. If you’ve ever bought anything on Google Play, you already have Google Wallet.
• Check your Google Wallet settings to make sure your postal address is complete and accurate, and your payment method is correct and up to date.
• If this will be the first time you're making a large payment with Google Wallet, you may want to notify your bank or credit card company in advance that you plan to make a $900 (general ticket) or $300 (academic ticket) charge that will appear as GOOGLE*IORegistration. This will help ensure your payment is processed.
• Be on the site before registration opens on Wednesday, March 13, 2013 at 7:00 AM PDT (GMT-7) so you can sign in to your Google+ account.

Once registration opens on March 13, 2013 at 7:00 AM PDT (GMT-7):

• When you’re placed on the waiting page, don’t refresh your browser or your ticket search will restart.
• Please don’t open multiple tabs or use multiple browsers. Each time you open a new connection, your ticket search will restart.

Details for academic attendees

To qualify as an academic attendee (and receive the $300 ticket price) you need to be an active full-time student, professor, faculty or staff at a high school or higher education institution. The academic rate is also available to anyone who graduated in 2013 prior to the event.

To verify that you are qualified to receive the special rate, we will require a current school ID, transcripts, credentials, or other forms of documentation when you check in at the conference. A couple of other important things to note:

• Once purchased, general admission tickets can't be converted to academic tickets, and vice versa.
• If you buy an academic ticket and can't provide academic documentation when you arrive at Google I/O, you won't be admitted or offered a refund, nor will you be able to convert your ticket to general admission.

Information on participating from afar

You can be part of Google I/O from wherever you are. You can watch live streams of the keynotes and many other sessions on Google Developers Live. Even better, be part of Google I/O by attending an I/O Extended event in your area. More details on these programs will be available soon. If you can't watch live, you can see YouTube recordings of all sessions on Google Developers Live after the conference.

We greatly appreciate your interest in coming to Google I/O, and we hope to see you there. Good luck!


Katie Miller leads marketing for Google I/O and other developer marketing initiatives at Google. Outside of work, Katie spends her time running (both road races and after a very active toddler) and memorizing Dr. Seuss rhymes.

Posted by Scott Knaster, Editor

2013, By: Seo Master