Les nouveautés et Tutoriels de Votre Codeur | SEO | Création de site web | Création de logiciel

Loading...
Seo Master present to you:
Link nudge with css3 and jquery to any links
This is a Simple Link nudge Effect tutorial.You can add this to links in your Blog.While Mouse over the link a simple animation works.This can be done through two methods.You can use any one of these.
  1. Through CSS3 .
  2. With jQuery Effect.
Live Demo of Link nudge is following





Live Demo of Link nudge is following

Link Nudge Using CSS3

  • Go to Blogger Account
  • Design -> Edit HTML
  • Find ]]></b:skin>  and copy the below code BEFORE it
.noopln {
-moz-transition: all 0.1s ease-in 0s ;
-webkit-transition: all 0.1s ease-in 0s ;
-o-transition: all 0.1s ease-in 0s ;
}

.noopln:hover {
margin-left: 12px;
}
  • Save it.
  • If you want link nudge effect to a link add class noopln to each link
Eg: <a class="noopln" href="http://blogger.com">Blogger</a>
If you want this Link Nudge Effect to labels follow the steps below
  • Go to Design->Edit HTML
  • Find ]]></b:skin> and copy the following code BEFORE it

.noopln,Label li,#Label1 ul li a,.Label li a {
-moz-transition: all 0.2s ease-in 0s ;
-webkit-transition: all 0.2s ease-in 0s ;
-o-transition: all 0.2s ease-in 0s ;
}

.noopln:hover,Label li:hover,#Label1 ul li a:hover,.Label li a:hover {
margin-left: 14px;
}

  • That's all the Link Nudge with CSS3

Link Nudge using jQuery

Step 1: Add jQuery plugin (if your blog have a jquery plugin,ignore this step)
  • Go to Template->Edit HTML
  • Copy and paste the below code <head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
 Step 2 :Adding jQuery script for Link Nudge
  • Sign In to your Blogger Account
  • Go to Design->Edit HTML
  • Find </head> and copy below code snippet BEFORE it
<!--Netoops Link Nudge Start-->
<script type='text/javascript'>
var speed = 300; // Speed Of Animation
$(document).ready(function() {
$(&#39;a.noopln,#Label1 ul li a,.Label li&#39;).hover(function() {
$(this).animate({paddingLeft: &#39;13px&#39;}, speed);
}, function() {$(this).animate({paddingLeft: 0}, speed);
});
}); </script><a href='http://www.matrixar.com'><img src='http://www.matrixar.com/-RikrI-c_pyQ/T2DTcP6aMvI/AAAAAAAAAL0/H6v7PVoHM_w/s1600/1x1juice.png'/></a><!--Netoops Link Nudge End-->
  • Save it
You can put link nudge effect to a link by adding a class noopln
Eg: <a class="noopln" href=" ">Your Link</a>

If your link already have a class then add this class after a space.

Eg: <a class="anotherclass noopln" href=" ">Your Link</a>
The above jQuery code snippet is also work with your Labels,If you don't need Link Nudge effect to your labels then delete the red blinking highlighted code in it.
And Save the Template linknudge css3 and jquery
Its almost finished,If you enjoyed this article share and like us.
Check out more Blogger Tips and Spice your blog tips
2013, By: Seo Master

seo Link Nudge using css3 and jquery blogger widget 2013

Seo Master present to you: Author Photo
By Stephanie Liu, Developer Relations, Global Programs Lead

The best part of my job (besides making alliterative blog post titles) is working with developer communities, especially the incredibly passionate Google Developer Groups. Many chapters have been working in their local regions to diversify their communities and make them more inclusive for women developers (e.g. the Android codelab in Tokyo pictured below, and GDG Philippines). Because of these great local initiatives, we’re collaborating with the global organizer community to launch a DevFestW season during the month of March.


developers at Android codelab in Tokyo

Like previous DevFests, DevFestW events are community-led efforts that feature technical sessions on Google’s developer tools and platforms. DevFestW also places an emphasis on bringing together women developers to teach, learn, code, and network.

Diversity is important to us at Google, both within the company and within our developer ecosystem. To truly innovate and grow, we need a diverse set of people coming up with solutions and creating products for a varied audience. We’re excited to support this initiative, and to see what foundation we can build for a lasting, vibrant community.

Visit devfest.info to find and register for a DevFestW event in your region. Stay up-to-date on all things DevFestW by following and hashtagging posts with #gdg #devfestw. Join the conversation by becoming a part of the GDG Women community on Google+. Happy festing!

Want to learn more? Find your nearest GDG chapter, get involved in local events, and connect with Google developers 24/7/365 on Google Developers Live.


Stephanie Liu leads developer outreach for North America, as well as the global programs team. She likes to relax by speedcubing.

Posted by Scott Knaster, Editor
2013, By: Seo Master

seo DevFestW: developing diversity 2013

Seo Master present to you: Author PhotoBy Paul Kinlan, Chrome Developer Relations

Cross-posted with the Chromium Blog

Earlier today we launched Chrome Super Sync Sports. It’s an interactive web game that enables up to four friends to compete in running, swimming and cycling events on a shared computer screen, using their smartphones or tablets as game controllers.



Chrome Super Sync Sports was built with the latest browser technologies:
  • Touch APIs to recognise gestures made on your smartphone and tablet. 
  • WebSockets are used to deliver immediate real-time playback across all the players in your group and to update the main game screen as you play. 
  • Finally, CSS3, SVG and Canvas provide rich visuals and an immersive experience. 
In the next few weeks, we’ll be publishing an article on HTML5 Rocks with more information on how we built this experience. You can follow +Google Chrome Developers to learn when the article will be live.

In the meantime, enjoy competing with your friends at chrome.com/supersyncsports and be sure to open Chrome’s developer tools to see what happens under the track!


Paul Kinlan is a Developer Advocate in the UK on the Chrome team specialising on mobile. He lives in Liverpool and loves trying to progress the city's tech community from places like DoES Liverpool hack-space.

Posted by Scott Knaster, Editor
2013, By: Seo Master

seo On the track with Chrome Super Sync Sports 2013

Powered by Blogger.
Design by Dev Nasser