Quoted from V1.o

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 interaction so all together it should increase your page hits.

For anyone who don’t know much about the previous version should check this URL. It all started more than 2yrs back. If you want to check all previous versions here it is.

Here is how it looks now.

To give a try click this link and go to the first site.

Today this Greet Box is used by thousands of sites which gets tracked in my  analytic account. Not sure how many are using after removing my analytic code. So end of the day its serves the purpose.

Whats new in 4.0?

1. All Jquery using Google API.
2. Animations used where required
3. Theme option with multiple colors so that it suits your website
4. Google font  support
5. Multiple font support
6. Addthis bookmarking service enabled
7. Readability enabled
8. Facebook + Twitter + Google Plus enabled
9. New icon set
10. Best part is almost everything is configurable

Features Overview:

Video 1: Greet Box Universal 4.0 features overview

Video 2: Some last minute addition

Configurations:

1) var themeColor = ‘yellow’; <– This can be red, grey, yellow, green, white. White is default.
2) var font = ‘Josefin’;  <– This can be Josefin or Tangerine. Blank will use the websites default
3) var fntColEnb = ‘true’;  <– This will give theme font color when true and default page color font when false
4) var fontSize = ’21′; <– Change font size which suits your website look and feel
5) var feedURL = ‘http://feeds.feedburner.com/classictutorials/feed’;   <– Replace with RSS feed of your site
6) var addThisShare = ‘true’;  <–  To enable share on Facebook, twitter and MySpace make ‘true’. To disable make it ‘false’
7) var isReadability = ‘true’;  <– Switch between Readability and social network site

Code snippet:

[code lang="html"]<!-- Code for Blogger Greet Box from classictutorials.com - Start -->
<script type="text/javascript" src="http://bloggergreetbox.googlecode.com/files/css_js.js"></script><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=theKaushik"></script><script type="text/javascript">// <![CDATA[
//Configure ur theme here
var themeColor = 'yellow'; // can be red,grey,yellow,green,white. White is also default
var font = 'Josefin'; // can be Josefin or Tangerine. If you are not specifying anything it will use the websites default
var fntColEnb = 'true'; //This will give theme font color when true and default pagecolor font when false
var fontSize = '21';
var feedURL = 'http://feeds.feedburner.com/classictutorials/feed';
var addThisShare = 'true'; //To enable share on facebook, twitter and mySpace make 'true'. To disable make it 'false'
var isReadability = 'true'; // If you want to show Readability button set it to true else it will show socialnetwork button
// ]]></script>
<script type="text/javascript" src="http://bloggergreetbox.googlecode.com/files/generator_jq_v6_min.js"></script>
<!-- Code for Blogger Greet Box from classictutorials.com - End -->[/code]

Bug Tracker:

Bug Tracker URL

Hope you like the release. Would like to hear from all of you.

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.

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

After lot of hard work i am able to replicate the Word Press Greet Box for Blogger.

I have named it Blogger Greet Box. I know like me many other blogspot users must have been frustrated as such a beautiful plugin was not available for blogger but now with this plugin we can use it very easily.

How easy is the setup?
You just need to add a new HTML/JavaScript gadget on your blog and paste few simple lines of codes which will be available in few days.

Future Updates?
I am managing the content from my hosted files. So for future updates you don’t need to bother. Updates will happen at back end. All content will be served from my hosting space.So its basically one time setup.

Is it Free?
Ya 100% free. If you like my work and want to buy me a beer or something always welcome.Just contact me through email

When will it be available to us?
Within this week. I am done with the work. I will do some testing and clean up the codes.So keep visiting.

ScreenShot:

Live Example:
No havent provided to public till now but ya wait for few days and it will be live on this site itself.
(20/04/09) NB: Plugin is live now at http://classictutorials.blogspot.com/2009/04/wp-greet-box-plugin-for-blogger-blogger.html
Cheers!

You can edit this template at your wish. I dont have problem but don’t remove the backlink from the footer. It should not be edited. For doubts email me anytime.

I did some personal testing just to make sure the template is as light as possible.

Tested with a normal Page with lots of text and hyper links.

Total Size: 130KB
Total Requests: 18
Total HTML Size: 10KB
Total CSS Size: 3KB
Total JS Size: 116KB
Total Image Size: 2KB

Loading time on a 256Kbps connection is ~4.2 Sec

1) Always remember the iPhone screen size while psoting. If you are posting images resize it properly else you will mess it.

Setup steps for BTI.

1) Take a backup of your existing template before proceding.
2) Go to Settings –> Layout –> Edit HTML –> Upload the BTI template.
3) Login to blogger using the following url: http://draft.blogger.com
4) Go to Settings –> Formatting. Show 1 Post.
5) Go to Settings –> Comments.Comment Form Placement: Embedded below post
6) Go to Settings –> Comments. Show word verification for comments?: No. Though this is your personal choice as Word Verification will be a pain to do on iPhone

Save your settings.
5) Go to Layout –> Page Element. Edit Blog Posts settings. Enable Show Star Ratings. Again this is your personal choice.
Save your settings.

6) This setting makes the site open only on iPhone.
Go to Layout –> Edit Html. Search for
var browserchecking=
and Set True for iPhone Browser only and False to work on all browser.
By default its set to True.

7) Changing the background. Again personal choice.
Search for
/* Background change*/
background:transparent url(http://img26.imageshack.us/img26/5153/bkground.png) repeat-x scroll 0 0;
and replace background with something like this
background = “ffffff”

Next upcoming features: (New updates will just be a template replacement so no need to panic. Your data will stay )
1) Search
2) Special blocks for mobile Ads
3)Tag cloud (In case it doesnot makes it heavy)

Suggestion are always welcome.

Link to download: http://www.mediafire.com/?sharekey=5e2c14ce499ad50061d4646c62b381cb3a995189d6614152c95965eaa7bc68bc

or
http://snipurl.com/fpd4t
Demo Link: http://templateforiphone.blogspot.com (Works only on iPhone/iPhone 3G/iPod touch)

All the Best! And ya do post us which site you made. I will be more than happy to look at it.

Summary:
BTI (Blogger template for iPhone ) is a blogger template using which we can create a blog which will be fully compatible with iPhone/iPod touch safari browser. Its very light in weight (about 24kb only). Works with blogspot account and very easy to use. All default blogspot features will be available.

Features:

1. This template is free.
2. Iphone and Ipod Touch Safari compatible.
3. Very light.
4. Rss feed support.
5. Accelerometer support.
6. Auto width rendering on safari browser.
7. Restrict access of website to iphone safari only and its configurable.
8. Blogger template, so all existing blogspot.com features will be available

Timeline:
I am still working on this template and am almost done. This will get published over here on 25thMarch,2009(May get late for a week ). So keep watching for updated news and screenshots.

Screenshots:

The image above shows the screen shot of the new template. The template fits to width with rotation. Hope you liked it.

As i told before this template comes with blogger default features so screen shot below shows us some of the features like comments, Star Rating, Tags etc. which fits so beautifully on the iPhone/iPod screen space.

I will be updating this blog with latest news related to this template.Subscribe to the RSS feed to get the updates. You can suggest me features through comments or email and i am looking forward to it.

Cheers!

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

<script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/translatemypage.xml&up_source_language=en&w=160&h=60&title=&border=&output=js"></script>

Get some more info and help here http://translate.google.com/translate_tools?hl=en