Seekrit Codez

How to embed a link within a comment

The HTML syntax to embed a link in a comment is:

<a href="url">link text</a>

So for example,

<a href="http://bit.ly/dKRaQx">Some chick blow drying her hare (sic)!</a>

will create this link: Some chick blow drying her hare (sic)!

How to document a Seekrit Code

So: you want to document the HTML markup you use to achieve some awesome exploit or other. But wait! How do you get the browser to "leave the markup alone", and not read it as markup? In computer speak, this is called "escaping" or using "escape codes" - you want your text to "escape" the standard treatment.
Preliminary: you need to avoid the "Compose" tab entirely and use the "Edit HTML" tab exclusively. Among other things, the "Compose" tab will mess up the handy Table of Contents links above. (If you forget and the table gets messed up, no worries - just delete everything to the left of the # character in the href attribute in the TOC list, or else Vikram will fix.)
Now: there are (at least) two three tricks to documenting teh codez.
The zeroth trick is to edit this very "Seekrit Codez" page (use the "Edit HTML" tab!) to see illustrations of all the formatting tricks.
The first trick is HTML character entities. When you write a main post and use the "Edit HTML" tab, any time you type a < character, it signals the beginning of an HTML tag. In order to get the < to appear "as is", you need to use the HTML character entity. Character entities can be used to represent any letter at all, but there are two letters which are absolutely critical.
  1. The first is the code for < - type &lt; instead.
  2. The second is, naturally, for &, which you'll need to do when documenting character entities (like I'm doing now!): type &amp; instead.
BTW, when documenting codez of all kinds, it is convention to display all code in Courier font. This is something of a PITA without the "Compose" tab, I know - just copy the <span> tag exactly: <span style="font-family: "Courier New",Courier,monospace;">text in Courier</span>
Second trick: what if you have a whole mess of HTML code (or other text) you want to document, and you want to preserve the formatting (line breaks, spaces, etc)? Enclose the code with the <pre> tag. Then, the line breaks will be preserved, and the Courier font used automatically. So, when you post this:
<pre>&nbsp;
    two codez, owr not two codez...
    ...wot waz teh kwestchun?
</pre>
You'll get: 
 
    two codez, owr not two codez...
    ...wot waz teh kwestchun?
Note, you'll still need to use the character entities for tags and such, as documented above. ALSO: I discovered that while the <pre> tag preserves formatting, blogger itself will mess it up when this page is edited - unless you use an &nbsp; ("non-breaking space") entity immediately after the <pre> tag, as I've done. Finally, don't worry about the table of contents links - if you can suss out what Vikram has done and can mimic, awesome, otherwise, Vikram will fix it up if other folks add stuff.

Inserting a "Read more" link for long posts on the front page:

Using If you want your long post to only show a paragraph or so and then have the reader click on "read more" to find the rest of the post, the code you type is: <!-- more --> (Note: there is a space before and after the word "more"!) Everything following that code will come after the "Read more" link once you publish the post. Note: you want to do this in the "Edit HTML" tab of the posting window, not the "Compose" tab. Originally reported here.

Inserting images in comments

The blogspot comment feature will not accept the <img> tag at all. So, as a workaround, we've implemented the following two special codes which allow you to post images in comments.
img:"url"
will post the image located at the url in your comment "as is"... suitable for small images, emoticons, etc...
imgw:"url"
will post the image with the width="350" attribute - whatever the actual width of the image, the displayed width will be scaled to 350 pixels - the max for the comment layout. Suitable for larger images which would otherwise overflow the page. Originally reported here.

How to embed a video in a post

Video sites like Youtube will have a button labeled "Embed" or some such on the video page - use it! Grab the embed code and paste it into the post (in the "Edit HTML" tab).
Now, the tricky part: making the width correct. The best width for our blog layout has been determined to be 460 pixels wide (thanks Magic Fayre!). The correct height will depend on the original aspect ratio but 285 works well for widescreen vids.
Trickier still: there are two spots to adjust the width. The one that matters is the second spot, not the first. Find the spot near the end of the embed code where it says width="some number" and replace some number with 460. Edit the height="some other number" code and replace the number with 285 or whatever is appropriate for the aspect ratio of the video.
(Technically speaking: the width attribute of the top level <object>tag is (apparently) irrelevant; the width attribute of the nested <embed> tag is the one which must be set to 460.)
Subscribe to: Posts (Atom)