Google

The fun part
Can you read Google in the image?

Even more fun

Google Doodles
Holiday and event logos – Google style! A collection of all Google logos commemorating holidays and events around the world.

By the way, if you are wondering why I am not posting much here, I have something up my sleeves. And of course, you get to know about it first if you subscribe and stay tuned!

psst: Other than planning to post a hot tip soon, I am also busy working on a new blog. I will unwrap this unique gift to you all pretty soon. Okay bye for now and lots of love for loving this blog….

TAG CLOUDS are an aesthetically pleasing way of giving the first impression of your blog in a nutshell. So how about promoting the Tag Cloud of your blog to prospective readers? Idea #1: Promotional emails Everybody uses emails. Compose an email and paste your Tag Cloud in the body. Just copy the Tag Cloud from the page of your wordpress.com blog and the Tag Cloud will appear in the body of the email! Additionally, write something like this: T … Read More

via Netty Gritty

And here we are going to learn how we can use Google Related Links to add related links under wordpress.com blog posts.

What is Related Links

Related Links is a tool to help webmasters increase page views on their sites.

Given a page on your site, Related Links can choose the most related pages from your site and show them in a gadget. You can embed this gadget in your page to help your users reach other pages easily.

Related Links also suggests searches that users can run within your site to find even more related pages.
[...]

Demo
Try it! Use the demo to create sample related links for one of your web pages.

Setting up Related Links
Currently, only invited users can use Related Links.

- from the site.

Note that all invited users are supposed to be able to use Google Related Links. But that does not help us wordpress.com bloggers at all. The code they give you is javacript, which is a no-no at wordpress.com.

We will try out a workaround if you want to have it.

How to create Google Related Links bookmarklet

Yes, we will create a bookmarklet that will help us get our Google Related Links for our blog post.

If you have never created a bookmarklet before, there’s no need to panic. You have to perform a very simple set of operations to accomplish your feat.

Simply click the link below.

Copy the code when you see it.

How to copy the code
Click somewhere in the code.
Press ctrl+a on your keyboard to select the whole code.
Press ctrl+c on your keyboard to copy the whole code.

Now go to Online-HTML-Editor and click the html button.

Online-HTML-Editor.org – The free online WYSIWYG Editor!

Paste the code in the Source Editor window.

Click the binocular icon.

A Search & Replace dialogue box will open.

Copy and paste the following phrase in the Search field.

Open the home page of your blog in a new tab and copy the url of your blog from the address bar.

Go back to your online-html-editor tab and paste your blog url in the Replace field.

Click Replace all.

Your code has now changed!
If you did everything right you have just created the much needed Google Related Links bookmarklet for your blog!

Now copy it quickly!

How to save the bookmarklet

Open your text editor and paste the code in a new file. Save the file. Please save the file as .html

My text file for the Google Related Links bookmarklet is named like this:
Google-related-links-bm.html

Open the file Googke-related-links-bm in a new browser window.

A text link that says “Find Related Links” will appear.

Simply drag and drop it into your browsers Bookmark Toolbar.

How to use the Google Related Links bookmarklet to find related contents

After you publish a new post, view the post in your browser. Make sure your blog post url is in the address bar.

Now click the bookmarklet from your Bookmarks Toolbar. It says “Find Related Contents”

A Google Related Links Demo page will be loaded with links from your blog that Google thinks are related to that post.

View the Google Related Links Demo page of related contents for this blog post.

How to create an image map of your Related Links

I create and paste an image map of my related links and paste the image map under my blog post.

To create an image map, I use my trusty and handy Kwout Firefox add-on. I just choose the part that begins with the heading Google Related Links and ends with the last related link.

I then paste the image map code in my blog post using the HTML tab and click the “Update” button.

When I view my blog post again I see the desired Google Related Links for that blog post!

You can view an example of Google Related Links for this blog post below:

Get creative and have fun!

Go to the Create yours page and simply draw on the canvas and your kaleidoscope will begin to be created instantly. Fiddle with the tools right below the canvas to change the tool settings.

Myoats – Create something.

Sumopaint calls itself the web’s best image editor. Well, it’s pretty good and it is at least one of the best online image editors.

So, which icon will help you paint Kaleidoscopic images? It’s the flowery symbol on top (see the image on left)! Launch Sumopaint app and click the flowery icon. It’s called the Symmetry icon.

Now keep on drawing on the canvas with your mouse. And enjoy the magic that will unfold before your very eyes! Basically whatever you doodle will be multiplied instantly and create a kaleidoscopic image. You can even change the tool settings (try changing the number of symmetry points) from the tool bar on top and keep creating! When you are done, you can save the image in your computer.

And here is a creation by moi!

Kaleidoscope image created free online at Sumopaint

And as if that’s not enough! Sumopaint can turn a photo into a kaleidoscope image too!

Go to File and open a photo from your computer or paste an image url.
When the image loads, click Filters from the Menu Bar on top, and choose Distort and then Kaleidoscope.

I used a Flickr image to create the kaleidoscope image below.

Kaleidoscope image created from photo at Sumopaint

This is yet another marvelous tool. You have to load an online image and choose a basic shape to create a kaleidoscopic image. When you are satisfied, simply save the image on your computer by clicking the “jpeg” button on the bottom left.

I used a Flickr image to create a the kaleidoscopic image below at Krazydad:

Free kaleidoscope image created online at krazydad

Tuxpi lets you upload an image from your computer and create a kaleidoscopic image for free. Once the image is uploaded, you can change the tool setting from left. Once you are satisfied, download the image and upload it again online if you want to add it in your blog. I downloaded and later uploaded again a Flickr image to create my kaleidoscope image at Tuxpi:

First upload an image from you computer or paste an image url. When the image shows up in Lunapic, click effects from the tool bar (situated on top) and choose “Kaleidocope”. Once the processing is complete, you change the tool setting. I used a Flickr image to create a kaleidoscope image at Lunapic.

Pixlr
Go to pixlr editor and upload an image from your computer or paste an image url.

When the picture loads in Pixlr, click Filter from the menu bar on top and choose Kaleidoscope. You can adjust the tool settings once you click the Kaleidoscope tool.

I used a Flickr image to create the kaleidoscope image below:

Kaleidoscope image created from photo at Pixlr

Or you can create a new image and apply the kaleidsoscope effect.

The image I created below uses this technique.

Interesting links about Kaleidoscopes

Check out an awesome collection of Kaleidoscopic images at Google Image search.

zefrank.com :: kaleidoscope

zefrank.com :: kaleidoscope

Zefrank does not allow you to save images. It is a tool to see how a kaleidoscope image is created.

You might also like to visit the links I have seen at wikipedia’s Kaleidoscope page:

Kaleidoscope – Wikipedia, the free encyclopedia

My favourite kaleidoscope image-making site

Sumopaint has won my heart. I really love the way the kaleidoscope images turn out there. I enjoy using the “Symmetry” tool to paint kaleidoscope images. I also love to convert photos into kaleidoscope images.
Long live Sumopaint!

Don’t forget to tell me which kaleidoscopic image-making site you like and why!

Find more posts on: animated gif, polaroid, image, heat map, slideshow, twitpic

But Google Docs are useful additions in a blog. It makes embedding and sharing documents easy.

Google Docs – Online documents, spreadsheets, presentations, surveys, file storage and more

I have figured out a workaround that makes embedding Google Docs (and other iframe widgets) in a wordpress.com blog a possibility.

View an example below. Just click the link “inspiration” to see a Google Doc embed that opens right in a free wordpress.com blog!

Question
So, why is the Google Doc not visible immediately?

Answer
Well, we are not supposed to have iframe widgets in a free wordpress.com blog. Embedding Google Docs the way you see here is only a workaround and has this limitation.
*It is also currently the only way of embedding Google Docs (or other iframe widgets) in a free wordpress.com blog that offers full functionality.

If you like what you see, you can learn how to embed Google Docs in a free wordpress.com blog. To do that, you have to learn how to embed iframe widgets in a wordpress.com blog

HTML Tags

WordPress.com allows the following HTML code in your posts, pages, and widgets:

address, a, abbr, acronym, area, b, big, blockquote, br, caption, cite, class, code, col, del, dd, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, img, ins, kbd, li, map, ol, p, pre, q, s, span, strike, strong, sub, sup, table, tbody, td, tfoot, tr, tt, ul, var

Check out W3 Schools for more information about what each of these HTML codes are used for.

If you are familiar with HTML, you’ll notice that codes such as embed, frame, iframe, form, input, object, textarea and others are missing from the above list. Those codes are not allowed on WordPress.com for security reasons.

- from wordpress.com Support

Why Iframe widgets don’t work in wordpress.com
Iframe widgets are codes enclosed between iframe tags in your wordpress.com blog. As soon as you paste the iframe html tags and save the post, wordpress.com strips the iframe tags. And of course, the widget doesn’t show up as a result of broken code.

Question
Looks like iframe widget can’t be embedded in wordpress.com because iframe tags get stripped here. So is there a way to add the widget without using the iframe tags?

Answer
Iframes are special tags that enable embedding contents  as a frame (that has defined height and width) in your webpage.

So I have been researching for a free online Flash widget generator that can make iframe embeds possible in your blog.

Crazy idea!
And it worked!!!

I have figured out a way to embed the contents right in your blog using Flash. That means, you don’t even have to put iframe codes in your blog in the first place!

Question
But doesn’t Support docs say that iframes and Flash codes can’t be had?

Answer
Well, official information isn’t always trustworthy.  Although Flash codes don’t work in wordpress.com directly, it can be turned into gigya or vodpod shortcodes that DO work in a free wordpress.com blog!
See here:
How to have Flash embeds in a wordpress.com blog
*That post won’t really help you learn how to create a Flash code for your Tagul widget. I was able to figure out the code structure purely by chance. You see, the present code structure that Tagul demands is not intuitive for me. PreviouslyTagul used to give a code that was easily convertible to a gigya shortode. Now it has changed that. I have figured out the code structure from the tag clouds I have created at Tagul, before Tagul changed and that’s how I can still offer it to you!

Huh? What on Earth is Tagul?
Read on! I am getting there!!

How bloggers add iframe widgets  in a wordpress.com blog at present
Since there is no way to embed iframes in wordpress.com, bloggers either take a screenshot of the widget, paste the image and link the image to the required site. See a screenshot of a Facebook Likebox here:
How to add Facebook Likebox in a wordpress.com blog – part 1

Or they subscribe to the RSS feed of the site that offers the widget and display the RSS feed via an RSS widget.

For example, Google Calendar.

Problems with the present methods
While a screenshot is more presentable, it does not update automatically. So recent changes are not visible.
RSS feeds get and show updated content automatically, but they are not much to look at!

A better method
Turning iframe widgets into Flash widgets is better. It allows you to load the original iframe widget right in your own blog. That means it shows updated info automatically and it looks good.

Extracting the frame url from your iframe widget code

When you need to embed an iframe widget in a website, you just paste the iframe code.
But since wordpress.com doesn’t support this sort of code, you will have to extract the frame url that makes the iframe widget show up in your blog.

You can get the url of your frame in two ways.

Method #1
If you see your iframe widget anywhere (usually after creating the widget in a site), the iframe widget loads somewhere you can see so that you can change the looks if you want. Click somewhere in the iframe widget you see, right-click and choose Open frame in new tab. You will see that only the frame has loaded in that tab.

For example, if you create a Facebook Like Box, Facebook gives you an iframe code. And it shows you how the Likebox looks.
If you right-click inside the Likebox, you will see an option that says “Open frame in new tab”. If you open the frame in a new tab, that’s what you see. The frame in a new page.
See the frame of a Facebook Likebox here.
You can see the actual Like box and do your right-clicking experiments here:
How to add a Facebook Likebox in a wordpress.com blog – part 2

Method#2
Sometimes you can’t see the iframe widget as you build it. You have to extract and modify the frame url from looking inside the code.

See an example iframe code of this Google Book

You can see the Google Book embed in a free wordpress.com blog here:
How to embed Google Books in a wordpress.com blog

How to turn iframe codes into Flash codes

We will use Tagul to turn iframe codes into Flash codes.

Tagul – Gorgeous tag clouds

Why Tagul?

Tagul is basically a tag cloud creation tool that can create beautiful tag clouds for your blog.
* You may want to check out the Tag Cloud I created with Tagul.

But, right now, we will use it as a different tool – an iframe to Flash converter.

Although Tagul is a tag cloud creation tool, it can be used to link to a web page and not just a tag page. If I choose to link to the url of a “frame” that I found in an iframe code, then Tagul will link to it, too. It will produce a “text link” within a box and when the text is clicked it is replaced by the frame in the confined box. Right in your free wordpress.com blog!

And that’s how anyone can have iframe widgets like Google Books, Google Calendar etc in a free wordpress.com blog.

Things to do

First of all, open a free accunt at Tagul. It’s a member-only service.

Create a new cloud.

You will see a “Tags source” interface like in the image below.

Click on the image to view larger version

How should you fill in the details?
As you see in the screenshot, you have the option to fill in some details in the left panel.

- Please leave the “url” link empty. We don’t need it to embed iframe widgets in wordpress.com via Tagul.
- Write the word you want your text box to say.
(My “Tag cloud” in the screenshot says “Calendar” because I used it to embed a Google Calendar!)

- Shorten the url of your frame using bit.ly or similar url shortening service. Then put the shortened url in the field that says “Tags’ links pattern”.
(I put the shortened url of the frame of my Google Calendar in the screenshot.)

Now choose the tab “Appearance”.

Click on image to view larger version.

The “Appearance” tab helps you configure how your Tag Cloud will look.

“Customize cloud shape” is of no use here, since we have only one word in our “Tag Cloud” and you need many words to make that work. So choosing any shape will produce the same result.

You can choose “Tags Rotation Angles” arbitrarily.
(I prefer it as it is.)

Now expand the “Fonts” tab and choose a font.

Click on image to view large version.

Now expand the “Colors and Animations” tab and fiddle with the settngs. You can click “Visualize” to see what happens with each setting.

Click on image to view large version.

When you like the look of your Tag Cloud, don’t forget to click “Save Changes” on the right!

Now expand the tab “Grab and Share!”

Now choose the tab “Send link to a friend” and copy the link by clicking the button “Copy to clipboard”.

Your job at Tagul is practically over!

Adding the “Tag Cloud” in your wordpress.com blog
Choose where you want your “Tag Cloud” to appear and paste the link there.
(The Tag Cloud will appear anywhere that gigya shortcodes are allowed, that is, in a post/page/side bar/footer/header-widget.)

My link is this one:

http://tagul.com/preview?id=19054@12

It goes to my Google Calendar when clicked.

Now observe the link you got carefully.
Delete everything from the beginning of the link upto the = sign. That will leave you with a number@number combination.
After I deleted the unnecessary portion, my number@number is this:
19054@12

Here is the basic code structure that you need to use:

[gigya src=”http://cdn.tagul.com/cloud.swf” type=”application/x-shockwave-flash” allowscriptaccess=”always” width=”number” height=”number” flashvars=”id=number@number”]

Caution
Please don’t copy the code from above. Copy the code from here
Paste this code where you want your “Tag Cloud” to appear.

Remember to delete the part number@number in the code and paste your own number@number in its place. Also, don’t forget to delete the word numbet both in width=”number” height=”number” in the code and put the actual numbers. The numbers will determine the size of your iframe widget.

Bonus tip
If you want the link to open in a new window to allow full-screen viewing, this is the code you will need:

[gigya src=”http://cdn.tagul.com/cloud.swf” type=”application/x-shockwave-flash” allowscriptaccess=”always” width=”number” height=”number” flashvars=”id=number@number&openLinksInNewWindow=true”]

Copy the code not from above, but from here
Change the parts in the code in the same way you would the first code.

Important Notice
This tutorial is not the same as it appeared on the publication date. I had to rewrite the tutorial in some parts (date: 31, March, 2011) since Tagul changed its interface.
If you want, you can still read the previous version.

Find more posts on: widget, flash, code, wordpress.com

Calaméo – Publish and share documents

Calameo is yet another superb way to embed documents in a wordpress.com blog.

Calameo document embeds are rich in features. Click around in the Calameo embed below and see for yourself!

How to create a Calameo embed code that is compatible in wordpress.com blogs

It’s really easy to embed a Calameo document in your free wordpress.com blog.

Choose a document from their collection or upload your own document.
I chose to embed the publication Pitagoras.

Get the embed code
I clicked the link “Share” to get the embed code.

PITAGORAS

Copy the appropriate code
I copied the standalone url.

Copy the standalone url of your chosen Calameo document.
Paste the code where you need to have your Calameo embed.

The standalone url of the Pitagoras embed is this:

http://v.calameo.com/2.1/cviewer.swf?bkcode=0002685127af1680568e4&langid=en

Create a Calameo code that will work in wordpress.com
You need the url at this point.
Create your code in the following method:

gigya src=”STANDALONE-URL” width=”nnn” height=”nnn”

*Change the parameters in the above code as needed and paste it within third brackets:
[]
* Learn more about the gigya method.

This is how my embed code for PITAGORAS looks:
gigya src=”http://v.calameo.com/2.1/cviewer.swf?bkcode=0002685127af1680568e4&langid=en” width=”600″ height=”500″

All I had to do is paste the code between third brackets [] and I got the Calameo document embed up and running in my free wordpress.com blog.

Find more posts on: document, embed, flash, wordpress