Here goes the 2nd part of the wiki.

1st part can be found here.

1. 21 Ridiculously Impressive HTML5 Canvas Experiments – http://net.tutsplus.com/articles/web-roundups/21-ridiculously-impressive-html5-canvas-experiments/
2. Periodic Table of the Elements – http://joshduck.com/periodic-table.html
3. HTML5 Boilerplate – is the professional badass’s base HTML/CSS/JS template for a fast, robust and future-proof site. – http://html5boilerplate.com/
4. Stylish CSS3 progress bars -  stylish-css3-progress-bars
5. CSSPrefixer – adds vendor prifixes automatically if we give W3C standards properties and value for needed browser specific property. – Link
6. jQuery Tooltip, 100 fresh resources – http://www.webdesignshock.com/jquery-tooltip/
7. CSS3 Graph Animation – http://www.alessioatzeni.com/blog/css3-graph-animation/
8. lungojs – Meet the first Mobile Framework that uses the actual features of #HTML5, #CSS3 and #JavaScript. – http://www.lungojs.com/
9. HTML5 file upload with progress bar – http://www.matlus.com/html5-file-upload-with-progress/
10. New Semantic Elements in Html5 – http://codeheaven.org/new-semantic-elements-in-html5.html

Search is ON to update the list so keep an eye on the list.

To learn about Mozilla location share you can check this: Mozilla Geo Location

OR for Chrome you can check this: Chrome Geo Location

To understand the basics:

A DOM object is provided in all new browsers (FF 3.5+ and chrome 7+[I don't count IE as browser, as usual it doesn't supports this feature also]) called navigator.

A document about the same is provided here for more understanding of extended features but i will try to cover the basics in this post.Geolocation API Specification

Note: Each time such code is executed your browser will ask for permission.

Enough of those reading stuffs, lets do some coding.

navigator.geolocation

The above object is all about location.

A sample code would be

if (navigator.geolocation) {
 navigator.geolocation.getCurrentPosition(function(position) {
 doStuff(position.coords.latitude, position.coords.longitude);
 });
 }

In the above code

position.coords.latitude, position.coords.longitude

will give you your current latitude and longitude. We can pass this to something and use. Say for example in my doStuff function I pass the same to google map and show the current map location.

Demo: Geo Location Demo

For more HTML5 resources check this.

Note: Using the same data and Google map API we can use it to pre-fill registration pages like Google do for orkut registration page.

A QR Code is a matrix barcode (or two-dimensional code), readable by QR scanners, mobile phones with a camera, and smartphones. The code consists of black modules arranged in a square pattern on white background. The information encoded can be text, URL or other data.

-Quoted from wikipedia.org

Now as you can see in this site i have added a dynamic QR code on each post. So for each post a dynamic QR code gets generated. Very simple use of third party sites.

I did a bit of web search and figured out there are mainly 2 websites which provide QR <Embed> code. I just modified them a bit with javascripts. You can use any one of the two.

TO USE:  Just copy-paste any where in your website and it should start working.

1) goqr.me

To change the image size just modify the “size=150×150” to what ever equal value you want.

Code:

<script type="text/javascript">
var uri=window.location.href;
document.write("<img src='http://api.qrserver.com/v1/create-qr-code/?data="+encodeURI(uri)+"&size=150x150'/>");
</script>

2) kaywa.com

To change the image size just modify the “s=5” value to what ever you want. Highest is 12.

Code:

<script type="text/javascript">
var uri=window.location.href;
document.write("<img src="http://qrcode.kaywa.com/img.php?s=5&d="+encodeURI(uri)+"" alt="qrcode" />");
</script>

NB: The bigger the image better for lower end mobiles because of there lower camera capability.

For previous versions and descriptions please visit:

http://classictutorials.com/?s=greet+box

Go to Google.com and search for search term like “techbhroom.blogspot.com” and navigate to this site and you will see a message saying that you came from google.

Now try this URL for stumble upon welcome message. Stumble Techbhroom

Feature added in this version:

The much needed and talked about close button has been provided. This uses cookie. Default cookie expiry time is 7days and can be configurable in the code below.

Screenshot:

Code:

<script src="http://bloggergreetbox.googlecode.com/files/TextToBeDisplayedDiv-minv3.0.js"
 type="text/javascript">
 </script>
 <div id="mainDisplayDiv" style="background:#F8F8FF;border:1px solid #B6AFA9;display:none">
 <div style="float: right; margin-right: 5px; margin-top: 5px;">
 <href a="#" onclick="closeGreetBox('7')"><img border="0" alt="x"
 src="http://img214.imageshack.us/img214/9837/closebutton.gif"/>
 </href></div>
 <div id="dynamicContentDisplayed">
 </div>
 <script type="text/javascript">
 // Give your feed url here
 var feedURL = "http://feeds2.feedburner.com/blogspot/ct";
 var dynamicHTMLText = displayRequiredText(feedURL);
 document.getElementById("dynamicContentDisplayed").innerHTML = dynamicHTMLText;
 </script>
 </div>
 <script src="http://bloggergreetbox.googlecode.com/files/HideShowDiv-minv3.0.js"
 type="text/javascript">
 </script>
 <script type="text/javascript">
 showHideDiv();
 </script>

Google Code Page:

Just in case.

http://code.google.com/p/bloggergreetbox/

For previous versions and descriptions please visit:

http://classictutorials.com/2009/04/19/wp-greet-box-plugin-for-blogger-blogger-greet-box-is-live/

Go to Google.com and search for search term like “techbhroom.blogspot.com” and navigate to this site and you will see a message saying that you came from google.
Now try this URL for stumble upon welcome message. Stumble Techbhroom

Screenshots:

Features:

As before I have kept the same features but the best surprise is now Greet Box for Blogger supports 30 Social Networks. You read it write its 30. Even Thaya Kareeson‘s WP Greet Box for WordPress doesnot supports so many social networks.

List of Supported Social Networks:

1. general
2. google
3. yahoo
4. digg
5. stumbleupon
6. delicious
7. facebook
8. flickr
9. friendfeed
10. friendster
11. furl
12. lastfm
13. linkedin
14. livejournal
15. magnolia
16. mixx
17. myspace
18. netvibes
19. newsvine
20. picasa
21. pownce
22. reddit
23. technorati
24. twitter
25. vimeo
26. webshots
27. wordpress
28. yelp
29. youtube

Did i missed anyone?

Same as before. Just copy the code and paste it and it will show up. Just follow two configuration.

1) Search for “Give your feed url here” and replace my fed url with yours.
2) Search for “List your domains where you dont” and replace it with your domain name.

<script src="http://bloggergreetbox.googlecode.com/files/TextToBeDisplayedDiv.js" type="text/javascript"></script>
 <div id="mainDisplayDiv" style="background:#F8F8FF;border:1px solid #B6AFA9;display:none"><div id="dynamicContentDisplayed">
 </div><script type="text/javascript">// Give your feed url here
 var feedURL = "http://feeds2.feedburner.com/blogspot/ct";var dynamicHTMLText = displayRequiredText(feedURL);
 document.getElementById("dynamicContentDisplayed").innerHTML = dynamicHTMLText;</script>
 </div><script src="http://bloggergreetbox.googlecode.com/files/HideShowDiv.js"
 type="text/javascript"></script><script type="text/javascript">
 //List your domains where you dont want to show up. Suppose
 //when people navigate within your site and you dont want to
 // show up. This is , seperated
 var myRestrictedDomainList = "classictutorials.blogspot";showHideDiv(myRestrictedDomainList);</script>

Get as plain text file

Google Code Page:

I know on previous release i told that all latest updates will be automated but one reason for code change is Google page BW limit. Now the code is hosted on google code page and if B/W exceeds i will buy extra space so it should be fine.

http://code.google.com/p/bloggergreetbox/

Please report any bug.

A new version has been released. Get it at Greet Box v4.0

First want to thank Thaya Kareeson for his wonderful idea of WP Greet Box for WordPress.

I named it Blogger Greet Box.This plugin lets you show a different greeting message to your visitors depending on their referrer url. For example, when a Digg user clicks through from Digg, they will see a message reminding them to digg your post if they like it. Another example, when a visitor clicks through

from google search they will see a message suggesting them to subscribe to your RSS feed. Having

these targeted suggestions will help your blog increase exposure, loyal readership, and reader

interactionso all together it should increase your page hits.

Go to Google.com and search for search term like “Classic Tutorials” or “WP Greet Box for

blogger” and navigate to this site and you will see a message saying that you came from google.

Now try the same with yahoo search and see the message changes.

1)Show a different greeting message to your visitor depending on the referrer URL.

2)Beautiful set of icons.

3)Greeting message can be inserted any where but better to use on the top as shown in classic

tutorials.

4)Shows a default greeting message if the user hits the URL directly or comes from a referer

which is not specified.

5)Ability to remove the message when the user navigates within the same site so we do not keep

nagging them with greeting messages.

6)Currently the following referrers are installed. I will update the list and the change will

automatically be reflected with everyone using this plugin. So its totally automatic and you dont

need to do code changes and staffs..

1. Google
2. Yahoo
3. Digg
4. Stumbleupon (26thApril,2k9)

You can help me know which referer you want urgently so that i add them first.

1.0

Initial release.

1.01 (26thApril,2k9)

Added Stumble upon.

Modified CT link to mouse hover

This blog has the plugin installed and so you can test it here itself.

Just copy the code and paste it and it will show up. Just follow two configuration.

1) Search for “Give your feed url here” and replace my fed url with yours.

2) Search for “List your domains where you dont” and replace it with your domain name.

[code lang="js"]<script src="http://kaushik259106.googlepages.com/TextToBeDisplayedDiv.js" type="text/javascript"></script>
<div id="mainDisplayDiv" style="background:#F8F8FF;border:1px solid #B6AFA9;display:none"><div id="dynamicContentDisplayed">
</div><script type="text/javascript">// Give your feed url here
var feedURL = "http://feeds2.feedburner.com/blogspot/ct";var dynamicHTMLText = displayRequiredText(feedURL);
document.getElementById("dynamicContentDisplayed").innerHTML = dynamicHTMLText;</script>
</div><script src="http://kaushik259106.googlepages.com/HideShowDiv.js"
type="text/javascript"></script><script type="text/javascript">
//List your domains where you dont want to show up. Suppose
//when people navigate within your site and you dont want to
// show up. This is , seperated
var myRestrictedDomainList = "classictutorials.blogspot";showHideDiv(myRestrictedDomainList);</script>[/code]

All the best. You can mail me so that each time i do some update i can let you know. Put subject as “Update me with Greet Box changes” so that i can email as a group.

Also remember that this plugin is not only compatable with blogger but is compatable to any website where you can use HTML/JavaScript. So use it where ever you want.

Written this post long time back and now we have a better solution. Go to this URL and right click and look into the source. http://michaelhue.com/cssdock/ Pretty straight forward. nJoy!

Yesterday was looking through ISpazio developer site (http://www.spaziocellulare.com/ispazio/developers/index2.php) and was really impressed with the DOCK they have created at there website! It looked super cool! After couple of hrs of research here is a DOCK for you. Its easy to use and can be used in BLOGS and personal websites.

The code used has main three parts.
1) The CSS style.
2) Java script for dynamic look.
3) Html to display the dock on page.

1) The CSS Style:

The following code needs to be place within <head> and </head>
Just copy and paste it in your blogger template

[code lang="css"]<script type="text/javascript">
var xm = xmb = ov = 0;
var M = true;

function dock(dock, sMin, sMax)
{
this.icons = document.getElementById(dock).getElementsByTagName('img');
this.N = this.icons.length;
this.s = sMin;
this.ovk = 0;
this.pxLeft = function(o)
{
for(var x=-document.documentElement.scrollLeft; o != null; o = o.offsetParent) x+=o.offsetLeft;
return x;
}
for(var i=0;i<this.N;i++)
{
with(this.icons[i])
{
style.width = sMin+"px";
style.height = sMin+"px";
className = "dockicon";
}
}
this.run = function()
{
with(this)
{
for(var i=0;i<N;i++)
{
var o = icons[i];
var W = parseInt(o.style.width);
if(ov && ov.className=="dockicon")
{
if(ov!=ovk)
{
ovk=ov;
document.getElementById("legend").innerHTML = ov.lang;
}
if(M) W = Math.max((s*Math.cos(((pxLeft(o)+W/2)-xm)/sMax)),sMin);
s = Math.min(sMax,s+1);
}
else
{
s = Math.max(s-1,sMin);
W = Math.max(W-N,sMin);
}
o.style.width = W+"px";
o.style.height = W+"px";
}
if(s >= sMax) M = false;
}
}
}
document.onmousemove = function(e)
{
if(window.event) e=window.event;
xm = (e.x || e.clientX);
if(xm!=xmb){
M = true;
xmb = xm;
}
ov = (e.target)?e.target:((e.srcElement)?e.srcElement:null);
}
window.onload = function()
{
dock = new dock("dock", 30, 85);
setInterval("dock.run()", 16);
}
</script>[/code]

2) Java script for dynamic look:
The following code also needs to be place within <head> and </head>
Just copy and paste it in your blogger template or html page. Remember not to modify anything in this until you are aware of what you are doing. :wink

[code lang="js"]<script type="text/javascript">
var xm = xmb = ov = 0;
var M = true;

function dock(dock, sMin, sMax)
{
this.icons = document.getElementById(dock).getElementsByTagName('img');
this.N = this.icons.length;
this.s = sMin;
this.ovk = 0;
this.pxLeft = function(o)
{
for(var x=-document.documentElement.scrollLeft; o != null; o = o.offsetParent) x+=o.offsetLeft;
return x;
}
for(var i=0;i<this.N;i++)
{
with(this.icons[i])
{
style.width = sMin+"px";
style.height = sMin+"px";
className = "dockicon";
}
}
this.run = function()
{
with(this)
{
for(var i=0;i<N;i++)
{
var o = icons[i];
var W = parseInt(o.style.width);
if(ov && ov.className=="dockicon")
{
if(ov!=ovk)
{
ovk=ov;
document.getElementById("legend").innerHTML = ov.lang;
}
if(M) W = Math.max((s*Math.cos(((pxLeft(o)+W/2)-xm)/sMax)),sMin);
s = Math.min(sMax,s+1);
}
else
{
s = Math.max(s-1,sMin);
W = Math.max(W-N,sMin);
}
o.style.width = W+"px";
o.style.height = W+"px";
}
if(s >= sMax) M = false;
}
}
}
document.onmousemove = function(e)
{
if(window.event) e=window.event;
xm = (e.x || e.clientX);
if(xm!=xmb){
M = true;
xmb = xm;
}
ov = (e.target)?e.target:((e.srcElement)?e.srcElement:null);
}
window.onload = function()
{
dock = new dock("dock", 30, 85);
setInterval("dock.run()", 16);
}
</script>[/code]

3) Html to display the dock on page:
Now we are done with the complex part and here is the easy part to do. OK you can place this code anywhere inside <body> and </body>
If you want to use in blogger you fight need to find a bit where exactly u want to place this. The CSS has been configured to display the doc at the bottom.

[code lang="html"]<div id="dock">

<a href="http://classictutorials.blogspot.com/" target="_top"><img src="http://YOUR IMAGE HOSTING/IphoneBrowser.png" lang=""></a>
<a href="http://classictutorials.blogspot.com/" target="_top"><img src="http://YOUR IMAGE HOSTING/IphoneCalculator.png" lang=""></a>
<a href="http://classictutorials.blogspot.com/" target="_top"><img src="http://YOUR IMAGE HOSTING/IphoneCalendar.png" lang=""></a>
<a href="http://classictutorials.blogspot.com/" target="_top"><img src="http://YOUR IMAGE HOSTING/IphoneChat.png" lang=""></a>
<a href="http://classictutorials.blogspot.com/" target="_top"><img src="http://YOUR IMAGE HOSTING/IphoneClock.png" lang=""></a>
<a href="http://classictutorials.blogspot.com/" target="_top"><img src="http://YOUR IMAGE HOSTING/IphoneGraph.png" lang=" "></a>
<a href="http://classictutorials.blogspot.com/" target="_top"><img src="http://YOUR IMAGE HOSTING/IphoneiPod.png" lang=""></a>
<a href="http://classictutorials.blogspot.com/" target="_top"><img src="http://YOUR IMAGE HOSTING/IphoneMaps.png" lang=""></a>
<a href="http://classictutorials.blogspot.com/" target="_top"><img src="http://YOUR IMAGE HOSTING/IphoneNotes.png" lang=""></a>
<a href="http://classictutorials.blogspot.com/" target="_top"><img src="http://YOUR IMAGE HOSTING/IphonePhone.png" lang=""></a>
<a href="http://classictutorials.blogspot.com/" target="_top"><img src="http://YOUR IMAGE HOSTING/IphoneSettings.png" lang=""></a>
<a href="http://classictutorials.blogspot.com/" target="_top"><img src="http://YOUR IMAGE HOSTING/IphoneWeather.png" lang=""></a>
<div id="legend"></div></div>[/code]

Need to do.

• Upload required images to your image hosting server like google pages and replace the URL
• This blog URL can be replace by any URL of your choice
• Lang is currently blank. If you provide any info in it it will display in the doc on mouse hover!

Hope you like this tutorial.
You can obviously post me anytime for any help. :wink
Special thanks to dhteumeuleu.com!

If you want those iphone icons here are they! Download