Tools for layout and visual improvements

22 views
Skip to first unread message

Jason Paddock

unread,
Mar 20, 2012, 9:15:26 AM3/20/12
to googlesite...@googlegroups.com
Here's a tool to spell words with Flickr images and then get code to post it as a banner on your site: 


Banner header created using Spell With Flickr.  
The tool creates an HTML code. How to insert: 
1. Copy the code by highlighting and pressing ctrl + C. 
2. On your site, select edit mode. 
3. Click the <HTML> button. (Don't panic about the code!) 
4. Before ANY character in the code, paste (ctrl + v) the HTML code from Spell with Flickr. 
5. Click Save.

Rob Herron

unread,
Mar 21, 2012, 9:04:00 AM3/21/12
to googlesite...@googlegroups.com
Very cool.  Here's another similar thing called ransomizr.  Ransomizer allows you to re-size the tiles (i.e. "letters").

http://kentbrewster.com/ransomizr/?m=spelling

Rob Herron

unread,
Mar 25, 2012, 6:08:13 AM3/25/12
to googlesite...@googlegroups.com
Both sites make it extremely easy to insert these words made from tiled pictures of letters.  Spell with Flikr doesn't automatically insert spaces between the words and it doesn't let you choose the size of the graphic.  If you know a little HTML you can do both yourself pretty easily.

To insert a space between two letters copy and paste the code below from left arrow to right arrow (including the arrows).  You will paste it between the last line of code for one letter and the first line of code for the second (i.e. insert it between the two letters where you want the space).
<img src="http://l.yimg.com/us.yimg.com/i/spacer.gif" title=" " height="50" width="50"> (change 50 to however many pixels you want the space to be).

To change the size of each tile insert the following code for each letter one space after border="0" and before the right arrow:
height="50" (change the 50 to however many pixels you want the spaces to be

Ransomizer does automatically insert spaces between words, and it does allow you to select from three preset sizes.  If you don't like any of the sizes the height="50" is already included in the code.  Just change the 50 to any number you like to totally customize it.


On Tuesday, March 20, 2012 9:15:26 AM UTC-4, Jason Paddock wrote:

Rob Herron

unread,
Mar 25, 2012, 7:12:40 AM3/25/12
to googlesite...@googlegroups.com
Make that <img src="http://l.yimg.com/us.​yimg.com/i/spacer.gif" title=" " width="50">

It works either way but a height isn't totally necessary.
Reply all
Reply to author
Forward
0 new messages