AllBlogTools.com | Blogger Templates and Tricks

Link to Blogger Templates, Tutorials, Tools | WordPress Themes | Allblogtools.com

Add Link Fading Effect To Blogger Using MooTools
Keyboard Shortcuts for Social Media Network Sites
FinanceDaily
MagicStyle

Add Link Fading Effect To Blogger Using MooTools

Posted: 11 Sep 2012 07:46 PM PDT

This image has no alt text

We hardly see any Blogger tutorials around the web that involves MooTools. This one comes from a blogger named Sohail Jawaid, and it’s a way to add a fading effect to hyperlinked text.

This may seem like the usual stuff you see around the web but again, in this case we're using MooTools, one of several JavaScript frameworks. Follow the instructions below.

In your dashboard, go to the Design page and under the Template section, click Edit HTML.
By pressing Ctrl+F, look for the </head> tag.
Copy/paste the code below right before it:

< script type='text/javascript'>   window.onload = function() { var paras = document.getElementById( & #39;   content & #39;).getElementsByTagName( & #39; p & #39;); if (paras.length)   { paras[0].className = paras[0].className + &#39; intro & #39;; } };   < /script>   <style type='text/css '>   #link1 { color:#f00; }#link2 { color:#00f; }#link3 { color:#000; }   </style>   <script src='http:    //ajax.googleapis.com/ajax/libs/mootools/1.2.3/mootools.js' type='text/javascript'   />   <script type='text/javascript'>   window.addEvent( & #39;domready&# 39;, function() {   $each($( & #39;.fade&# 39;), function(el) {   var original = el.getStyle( & #39;color&# 39;);   var morph = new Fx.Morph(el, { & #39;duration&# 39;: &#39;300&# 39;,   &#39;link&# 39;: &#39;cancel&# 39;   });   el.addEvents({ & #39;mouseenter&# 39;: function() {   morph.start({ & #39;color&# 39;: &#39;# ffffff & #39; }) }, &# 39;   mouseleave & #39; : function() { morph.start({ &# 39;   color & #39;: original }) } });});});   </script>

Save the template and you're done.

To use it, simply add the ID and class attributes to your links (see example below):

<a id="link1" href="javascript:;">Link Fade 1</a>    <a id="link2" href="javascript:;">Link Fade 2</a>    <a id="link3" href="javascript:;">Link Fade 3</a>

Hope you like it. Cheers!

Keyboard Shortcuts for Social Media Network Sites

Posted: 11 Sep 2012 07:12 PM PDT

In today's generation, almost everybody has their own social media network profile, be it Facebook, Twitter, Google+, Pinterest and others. If you’re one of them, perhaps you might want to know some keyboard shortcuts for fast and easy use.

Here's something I learned from Qasim Zaib who provides us the some good shortcut keys on three of the most popular social media sites.

Facebook:

Alt + M Compose new message
Alt + / Main site search
Alt + 1 Go to home page
Alt + 2 Go to Timeline
Alt + 3 See friend's requests
Alt + 4 Go to message inbox
Alt + 5 See all notifications
Alt + 6 Go to Account Settings
Alt + 7 Go to Privacy Settings
Alt + 8 Go to Facebook’s Profile Page
Alt + 9 Go to Facebook’s Terms of Service
Alt + 0 Go to Facebook Help Center

Twitter

Actions:
F Favorite
R Reply
T Retweet
M New direct message
N New Tweet
Enter Open Tweet Details
L Close all open Tweets

Navigation:
? List of all shortcuts
J Next Tweet
K Previous Tweet
Space Page down
/ Search
. Go to top and load new Tweets

Timelines:
G + H Go Home
G + C Go to Connect
G + A Activity
G + D Discover
G + R Mentions
G + L Lists
G + P Profiles
G + F Favorites
G + M Messages
G + S Settings
G + U Go to user

Google +

K Go to previous item in the stream (feed)
J Go to next item in the stream
Q Search for people to chat with (when chat windows is active)
Space Scroll down
Shift + Space Scroll up
Enter Start new comment (when focused on a post)
Enter + Tab End comment
@ or + Tag someone (start typing a name)