Decorate your google ads with AdSense Decorator

AdSense Decorator is a cute product allowing customization of Google ads on your website. It's probably a bit too heavy for what it does since nowadays we see much more complex web tools, but it does its job.



Here's a screenshot with one of their default templates:

Embed spreadsheets in your website using Zoho sheet

Zoho sheet is another great product from Zoho that can generate spreadsheets embeddable in your blog or your website.

Just create your spreadsheet and click on the "Publish" menu, where you will find the option "Embed in Website/Blog". From there, after agreeing on making the spreadsheet public, you can copy the HTML and paste it in your website.



Here is how the embedded Zoho spreadsheet looks like:



And here's the code:

<iframe src='http://sheet.zoho.com/publish.do?docurl=uQcCx5q7c8%2BexjSstIh0sQ%3D%3D&name=W5%2BmaSCODVz%2BuVm31GQvyw%3D%3D'
frameborder='0' scrolling='no'
style='height:500px;width:600px'>
</iframe>

Embedding powerpoint presentations in your page - Slideshows from Zoho

Zoho launched some time ago the Zoho Show service, allowing creation of web based Powerpoint like presentations. Embedding such a presentation in your page is really simple. Once you logged in your account at Zoho, create your presentation and then go to "Actions" menu and choose embed slideshow. From there, pick up the HTML code and simply paste it in your site.



Here is the code for one sample presentation:

<iframe src="http://show.zoho.com/ViewURL.sas?USER=hanganum&DOC=welcome&IFRAME=yes" height="370" width="480" name="Welcome" scrolling=no frameBorder="0" ></iframe>

And here's how it looks like:

Embed images in your website using Webshots

Webshots allows you to embed photos in your website. Just click on the image and you'll find underneath the image, the rightmost link called "Publish photos". From there, you can pick the text underneath the entry called "post in your blog or website"

Here's how the code looks like:

<a href="http://travel.webshots.com/photo/1473029048062137079hwjNxv"><img src="http://thumb19.webshots.net/t/62/162/2/90/48/473029048hwjNxv_th.jpg" alt="Colosseum at night, Rome"></a>

And here's the embedded image:

Embed DailyMotion videos in your website

DailyMotion - another great video sharing site. Embedding videos from DailyMotion is just as simple as YouTube. Underneath the video you'll find the "Embeddable Player" entry from which you can copy and then paste on your site the HTML code for that video.

<div><object width="425" height="335"><param name="movie" value="http://www.dailymotion.com/swf/7i1Ui4np0BFDmag0l"></param><param name="allowfullscreen" value="true"></param><embed src="http://www.dailymotion.com/swf/7i1Ui4np0BFDmag0l" type="application/x-shockwave-flash" width="425" height="335" allowfullscreen="true"></embed></object><br /><b><a href="http://www.dailymotion.com/video/x1gef9_burnweb">BURN_web</a></b><br /><i>Uploaded by <a href="http://www.dailymotion.com/rescuescg619">rescuescg619</a></i></div>

And here's the embedded video:

BURN_web
Uploaded by rescuescg619

You can customize too the width/height of the video.

Embed videos from Metacafe

Looking to embed videos from Metacafe? Here's how: on the page of the video on Metacafe, look underneath the video for the "Blog/Embed player".



Here's how the code looks like:

<embed src="http://www.metacafe.com/fplayer/496348/amazing_dance.swf" width="400" height="345" wmode="transparent" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed><br><font size = 1><a href="http://www.metacafe.com/watch/496348/amazing_dance/">Amazing Dance</a> - <a href='http://www.metacafe.com/'>The best bloopers are here</a></font>

And here's the embedded videos:


Talking Cats - Click here for this week’s top video clips

You can customize the width and height of the video. They even feature a nice option of having your blog name listed on the page of that videoclip. "By embedding this video, you can have your blog listed on this page. Click here to see how.Place this video in your website or blog. Works on: MySpace, Blogger, Xanga, Friendster and many more".

Embedding videos in your blog - YouTube

Everyone knows how to embed YouTube videos in their website. We're taking a quick look today at how it's done.

Basically, for each video you found on YouTube for which you want to embed it in your blog or your website, look for the "Embed" entry in the right part of the video. There you'll find a string similar to

<object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/kkT7A3jegBc"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/kkT7A3jegBc" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object>

and this is how it looks in your website:



Note you can change the size of the video accordingly. Just replace the width and height attributes in the HTML code above. Here's a smaller version:

Embed flash games in your site

Embedding flash games in your site is just as simple as embedding youtube videos. Take the absolute location of the swf file and write the following code, making sure that the src attribute for the embed tag is replaced with the URL to the swf file.

Here's the code:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="400" height="300">
<param name=movie value="week13/images/copter.swf">
<param name=quality value=high>
<embed src="http://www.hurtwood.demon.co.uk/Fun/copter.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="400" height="300">

</embed>
</object>

And here's how the game looks like. Give it a try!

Embed custom widgets from box.net

www.box.net allows embedding of custom created widget in your pages. Here's how the embedded widget looks like:



The code for embedding box.net is here:

<embed src='http://www.box.net/static/flash/widget_player.swf' type='application/x-shockwave-flash' FlashVars='subString=folderId=konguisj9s,color=000000,title=My shared files' scale='noscale' wmode='transparent' width='289' height='258'></embed>

The widget is REALLY cool - anyone can see a list of pictures/videos you may want to share. It has specific integration tips for blogger, wordpress and a few others. What's really cool is that you can upload files within the widget itself. You don't need to visit their website to upload new photos. It's that simple!

Cons:

• it comes only in 3 colors
• no HTML alternative - only Flash

Embed google reader in your blog or your homepage

Google Reader is my favorite news reader. You can embed the news in your page either by importing the shared items in your page. Here's how it looks:



and here is the code for it:

<script type="text/javascript" src="http://www.google.com/reader/ui/publisher.js"></script>
<script type="text/javascript" src="http://www.google.com/reader/public/javascript/user/06940223543497213265/state/com.google/broadcast?n=5&callback=GRC_p(%7Bc%3A'green'%2Ct%3A'Shared%20items'%2Cs%3A'false'%7D)%3Bnew%20GRC"></script>

You simply go to the "Shared items" sections in google reader and follow the link in the section "Put a clip on your site or blog".

Note: if you use Blogger, it's even easier to embed.

Cons: you can't change the coloring, which makes the visual integration difficult. The green color they's displaying around the news it's probably one of the least used colors, so if your theme has a black background, you'll end up with a small stain on your beautiful blog.

Embed Visual DNA in your page

Friends.imagini.net have created a cool people profiler.

Here's how you can embed it in your blog: just paste the following code in your page:

<embed allowScriptAccess="never" allowNetworking="internal" enableJavaScript="false" src="http://dna.imagini.net/friends/swf/widget.swf" quality="best" bgcolor="#000000" width="340" height="240" name="widget" align="middle" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="bgcolor=#000000&i1=http://dna.imagini.net/i/RESIZE_62BEF7F2.jpeg&c1=&i2=http://dna.imagini.net/i/RESIZE_-20E95CBC.jpeg&c2=&i3=http://dna.imagini.net/i/RESIZE_-7858FD0F.jpeg&c3=&i4=http://dna.imagini.net/i/RESIZE_57EDBD35.jpeg&c4=&i5=http://dna.imagini.net/i/RESIZE_-2853CD61.jpeg&c5=&i6=http://dna.imagini.net/i/RESIZE_60BD8C5F.jpeg&c6=&i7=http://dna.imagini.net/i/RESIZE_62BEF7F2.jpeg&c7=&i8=http://dna.imagini.net/i/RESIZE_-E26BA3F.jpeg&c8=&i9=http://dna.imagini.net/i/RESIZE_761F2B14.jpeg&c9=&i10=http://dna.imagini.net/i/RESIZE_62BEF7F2.jpeg&c10=&i11=http://dna.imagini.net/i/RESIZE_494EB337.jpeg&c11=&i12=http://dna.imagini.net/i/RESIZE_-3B3CA847.jpeg&c12=&i13=http://dna.imagini.net/i/RESIZE_791C6076.jpeg&c13=&moodlabel=SOFISTICAT&lovelabel=LOVE BUG&funlabel=CONQUEROR&habitslabel=NEW WAVE PURITAN&uid=408756-8b07&srv=iwebhd3" ></embed> <div style="text-align:center; width:340px;height:25px;margin-top:0px; border-top:1px solid rgb(150,150,150);background-color:rgb(0,0,0);padding:5px 0 0 0; font-family:Arial, Helvetica, sans-serif; font-size:11px;"><a href="http://networking.imagini.blueorange.co.uk/vdna.php?uid=408756-8b07&srv=iwebhd3" style="color:rgb(255,255,255)">Read my VisualDNA</a><span style="font-size:10px;color:#cccccc">™</span> <a href="http://dna.imagini.net/friends/" style="color:rgb(255,255,255) ">Get your own VisualDNA™</a></div>

and here's the output:

Read my VisualDNA™ Get your own VisualDNA™