Cheat sheet for formatting at TPM
In reading TPM for awhile, I have seen sporadic questions and frustrations about doing "simple" things. So here is a limited Cheat Sheet. You can also link to the cheat sheet alone at this page.
Go to the full entry for the "Cheat Sheet"
Common html codes
How to see the codes in your posts TPM in "Blog Now"
On the formatting bar under the "body" and "extended" tabs you will see on the right side two options buttons. They are A and <A>
If you click on the <A> button it will display the html codes (or allow you to enter them manually.
When you click on the A button, it will take you back to "wysiwyg" mode.
OR
The blog entry system defaults to Format: Rich Text.
To see the html codes (and edit them), you can switch to "convert line breaks"
Reselect "Rich Text" to go back to standard entry mode.
Breaking your article up into two parts.
If you do not want the full text of each of your posts to show on your "YOUR BLOG" page, you can break it up into two parts.
On the blog entry screen, you see 2 tabs above the formatting bar - "Body" and "Extended"
What you type in the "Body" entry space will show up on "YOUR BLOG." If you put all of your article there, then all of it will show up.
HOWEVER
If you click on the "Extended" tab it will give you another entry window. Put the remainder of your post in the extended space.
Save it.
If you use the "Extended" entry window, what is in the "Body" will show up in "YOUR BLOG" and when people click on your article's title, the full article will show up (Body and Extended)
Making a List - does not work in comments
Go to the full entry for the "Cheat Sheet"
Common html codes
| Action | Code | Use Example |
| Bold | <b></b> | <b>bold this</b> |
| Italics | <i></i> | <i>italicize this</i> |
| Underline | <u></u> | <u>underline this</u> does not work in TPM comments |
| <strike></strike> | <strike>this text</strike> does not work in TPM comments |
|
| blockquote | <blockquote></blockquote> | <blockquote>quote this text</blockquote> |
| URL Link | <a
href="http://www.the url">text</a> (opens in same
window) <a href="http://www.the url" target="_blank">text</a> (opens in new window) |
|
How to see the codes in your posts TPM in "Blog Now"
On the formatting bar under the "body" and "extended" tabs you will see on the right side two options buttons. They are A and <A>
If you click on the <A> button it will display the html codes (or allow you to enter them manually.
When you click on the A button, it will take you back to "wysiwyg" mode.
OR
The blog entry system defaults to Format: Rich Text.
To see the html codes (and edit them), you can switch to "convert line breaks"
Reselect "Rich Text" to go back to standard entry mode.
Breaking your article up into two parts.
If you do not want the full text of each of your posts to show on your "YOUR BLOG" page, you can break it up into two parts.
On the blog entry screen, you see 2 tabs above the formatting bar - "Body" and "Extended"
What you type in the "Body" entry space will show up on "YOUR BLOG." If you put all of your article there, then all of it will show up.
HOWEVER
If you click on the "Extended" tab it will give you another entry window. Put the remainder of your post in the extended space.
Save it.
If you use the "Extended" entry window, what is in the "Body" will show up in "YOUR BLOG" and when people click on your article's title, the full article will show up (Body and Extended)
Inserting a YouTube (or other service-based) video or photo.
Also there are directions at mageduley's blog
This is pretty straight forward. Actually, inserting from one of the photo sites is pretty much the same thing.
THIS ONLY WORKS WITH ONLINE RESOURCES
1. Go to the video or photo you want to include.
2. Copy the "embed code"
3. Go to the place in your blog post that you want the video/photo to show up.
4. Click the
button on the entry toolbar. (this is going to change your entry screen
to potentially an intimidating gobbeldygook of text and code, but forge onward)
5. Paste the copied embed code into your document.
6. Click on the underlined A button to go back to your wysiwyg screen.
That's it. You did it!
| Unordered (bullet) <ul> <li>a</li> <li>b</li> <li>c</li> </ul> returns
| Ordered (numbered) <ol> <li>x</li> <li>y</li> </ol>
|
Advertisement
Kewl cheat sheet, I bookmarked it.
Nice of you, really, to trouble.
=D
March 23, 2009 9:23 PM | Reply | Permalink
Not a big deal really. I hope it is helpful to the community.
March 23, 2009 9:38 PM | Reply | Permalink
I'm sure it will be. I posted a link to it in Cyants Help Desk Blog, I didn't think you would mind.
http://tpmcafe.talkingpointsmemo.com/talk/blogs/pseudocyants/2009/03/post-questions-about-compsite.php
They seemed to be kindred kinda spirit thing to me.
=D
March 23, 2009 9:41 PM | Reply | Permalink
That was kind of you :-)
March 23, 2009 9:59 PM | Reply | Permalink
I copied to an HTML tags doc.
March 23, 2009 10:07 PM | Reply | Permalink
What?
March 23, 2009 11:19 PM | Reply | Permalink
That you , needed this.
March 23, 2009 10:04 PM | Reply | Permalink
Molto grazi, mucho gracias, merci beaucoup, and t'anks a bunch.
March 23, 2009 10:06 PM | Reply | Permalink
Wow...really helpful. Thanks for taking the time to put this together.
March 23, 2009 10:08 PM | Reply | Permalink
Very very fine. I have been playing with this for a week and I am having fun. I will bookmark this and probably copy it onto word.
You and Pseudo and some others over the months take time to help other bloggers.
This is a nice thing to do.
No kidding. No jokes
March 23, 2009 10:10 PM | Reply | Permalink
☼ Thanks for this helpful info. My two ¢.
Random cool symbols you can copy and paste
into a word program document if you want them.
→ ↓ ↔ ↕ ↨ ← ↑
☼ « » @ ΐ ≠ ∆
♫ ¿ ¢ ╬
March 23, 2009 10:25 PM | Reply | Permalink
Thanks stratofrog.
Here is a link to the html codes for special ascii codes. This may be more technical than most folks want, but sometimes handy for non-English words with accents, tildas, etc.
March 23, 2009 10:35 PM | Reply | Permalink
Is that why question marks sometimes
show up in the body of people's text?
March 23, 2009 10:56 PM | Reply | Permalink
Ah the wicked ? mark
Yeah, that is a "special character" translation issue and crops up unexpectedly. One of the most common issues folks run into is writing in MS Word then copying into a blog or comment. Word uses "curly quotes" which frequently don't translate well.
The trick for fixing "curly quotes" is to to either replace them with the " on the keyboard or enter the special character code. For other special character issues special character chart link I posted above may help.
I'm not a big Microsoft fan
March 23, 2009 11:03 PM | Reply | Permalink
this is also often caused when the character encoding in the post/comment is different from what is stated in the page's header. Generally in English web pages the conflict is between just two different sets: ISO-8859-1 and UTF-8, but some pages that were published before HTML 4.X became the standard might use weird encodings without a meta-tag explicitly expressing it.
(for those who rea this, and dod not understand, please just let it slide. it would require a long and convoluted explanation)
March 23, 2009 11:26 PM | Reply | Permalink
Thanks for chiming in!
March 24, 2009 12:00 AM | Reply | Permalink
Wow Ya' all! I am humbled. Thanks for your appreciation, and glad I could add something useful for folks.
March 23, 2009 10:37 PM | Reply | Permalink
And many thanks for the reminder on using the "extended' tab when posting.
March 23, 2009 10:43 PM | Reply | Permalink
Welcome. I have seen that issue raised several times in my reading of TPM posts so thought I'd throw it in.
March 23, 2009 10:54 PM | Reply | Permalink
Adding my thanks to the rest. Only post I've ever bookmarked.
March 23, 2009 11:16 PM | Reply | Permalink
Thanks barefooted!
March 24, 2009 12:12 AM | Reply | Permalink
You can also copy and paste from the Insert: Symbols in MS Word into comments, too. So you can us things like é or © or ₤.
Does anyone know how to get a strikethrough?
March 23, 2009 11:24 PM | Reply | Permalink
Oh, I guess that's what Stratofrog was saying above. Sorry for once again being redundant again. I've tried strikethrough several different ways to no affect. Are there some HTML functions that just don't work here (Movable type)?
March 23, 2009 11:32 PM | Reply | Permalink
You should be able to use the strikethrough html tag, but only in a blog post, not in comments to a blog post. Comments have a very limited set of allowable html tags, and I believe the only ones missed by Rowan in this post were ordered and unordered lists. Llists are poorly understood, and woefully underused on the WWW, so listing instructions for the html code would have tended towards overkill in this thread.
Here's the strikethrough html code format:
<strike>the text that has been struck</strike>
March 23, 2009 11:35 PM | Reply | Permalink
Thank you,sir. I won't even ask about (un)ordered lists- unless it's about simple bullets or numbering, my head may explode.
March 23, 2009 11:45 PM | Reply | Permalink
Kewl
I had trouble with strikethrough, too. Oh avatarless one.
March 23, 2009 11:48 PM | Reply | Permalink
I dunno, Bwak, but you got a kwazy look in your eye...
Funny thing is, when I was here before the last site changes, I had copied the image of the little hash-smoking TPM guy off the masthead thinking I might use it as an avatar (I really did). I come back and it's the "no avatar" avatar. Now, everybody's using it, dangubitt.
March 24, 2009 12:18 AM | Reply | Permalink
actually, the difference between ordered and unordered lists is easy to explain, as long it remains narrowly focused on the HTML defaults (bullets and decimal numbering)
In both ounordered and ordered lists, individual list items have the exact same html tags. The default for an unordered list is a simple bulleted list:
<ul>
<li>Moe</li>
<li>Larry</li>
<li>Curly</li>
</ul>
- Moe
- Larry
- Curly
A default ordered list begins a 1 and increase 1 whole number each succeeding list item:<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ol>
One final note, which addresses an issue about weird double spacing at TPM, is that when posting a list, it is essential that all line breaks are removed from it, and it is all written on one continuous line:
<ol><li>One</li><li>Two</li>
<li>Three</li></ol>
March 24, 2009 1:48 AM | Reply | Permalink
Thanks, PCA. Now I'm trying to think of some things I can list just to do it (maybe a "not-to-do" list or a list of lists of lists or...maybe not).
March 24, 2009 10:02 AM | Reply | Permalink
Ooooh nice Cy! Thanks I am bookmarking that one :)
March 24, 2009 11:02 AM | Reply | Permalink
Thanks - I added it to the Cheat Sheet
March 24, 2009 12:10 AM | Reply | Permalink
Head exploding but will sort it out later¿ Er thanks again, Dr. Manatee and all other bright TPMers. I have the info now to make a blog.
P.S. Is it really "cheating?"
March 24, 2009 12:49 AM | Reply | Permalink
Definitely NOT cheating! Your head will quit exploding once you do it a few times.
March 24, 2009 12:56 AM | Reply | Permalink
A quick note for Windows users only. Two freeware text editors that I use frequently have macro functionality, and if anyone wants to use them for composing blog post and/or comments in them, I can provide macro files for both editors which will add the code without any extra effort other than a mouse click or keystroke combination, depending on which editor is being used.
Let me know, and I'll post download links, plus basic instructions at my blog.
March 24, 2009 2:00 AM | Reply | Permalink
PseudoCyAnts, Thanks for the offer. I'd be interested in what you are using.
March 24, 2009 9:50 AM | Reply | Permalink
This is so very helpful.
I've one question--maybe the answer is in here already, but I'm slow. How does one add pictures to one's blog? I've figured out how to add videos, but they're already online. I'm talking about pictures on my own computer. When I hit the add illustration button I get a "resource unavailable" button.
Alternately, is there a way to pull a picture from a web resource without first saving it to one's computer.
Thankee... aMike
March 24, 2009 10:30 AM | Reply | Permalink
Hi Mike, I did a blog post about it shortly after the change over. It is not super technical and maybe Cy or Rowan have an easier way, but it has been the best way I have so far. Here ya go:
http://tpmcafe.talkingpointsmemo.com/talk/blogs/mageduley/2008/11/testing-image-insert.php
March 24, 2009 11:06 AM | Reply | Permalink
Thankee kindly.
March 24, 2009 1:16 PM | Reply | Permalink
Many thanks, this will be most helpful.
March 24, 2009 12:13 PM | Reply | Permalink
This is very helpful. Do I understand correctly that you can develop a "Word" template, and then cut & past symbols? I have never had that work for me.
Thanks so much to all of you!
trial for fun
J
March 24, 2009 1:15 PM | Reply | Permalink
'Trial for fun' was with the html "strike" code. Why didn't it work?
March 24, 2009 1:16 PM | Reply | Permalink
Do these things only work in a blog entry?
March 24, 2009 1:17 PM | Reply | Permalink
CVille, strikethrough is the only command listed in this cheatsheet that will NOT work in comments. It will work in a blog post though.
I've always felt that strikethrough has limited utility for normal use, and is generally something to be used when working on drafts, and when wanting to change a few things, but wasn't not certain about the changes, so did not want to forget the original. In a public forum situation, about the only thing I use it for is biting back a little bit with humour. ie:
You've got your head |strike|up your|strike| in the sand.
It's a way to kind of dance beyond allowable behavior in commenting without actually crossing the line.
March 24, 2009 1:53 PM | Reply | Permalink
Thanks! I would pick the only one that doesn't
Now, if I could just get some shortcuts for some of these things it would be great, but I've never been able to figure them out either!
PS - I like the strikeout for the same reason as you.
March 24, 2009 2:01 PM | Reply | Permalink
OK, I take that back! "would" was supposed to be bold, and I stopped it at the end of the word, and "doesn't" was supposed to be underlined!
March 24, 2009 2:03 PM | Reply | Permalink
Yep, make sure you use the closing code :-)
March 24, 2009 4:33 PM | Reply | Permalink
CVille, you did not close the bold tag, and the TPM code that checks/edits for valid html at submission, screwed up too, and closed the bold tag after the blockquote.
You must explicitly close html tags (not an absolute, but good enough for what you'll be using). The way to close an html tag is the same as the way you open it, plus a forward slash inserted just after the less than symbol:
<b>text to be bolded</b>
text to be bolded
March 24, 2009 5:14 PM | Reply | Permalink
I have this page bookmarked!
March 24, 2009 1:19 PM | Reply | Permalink
OH!!!!!!!!!!!
I think I just bookmarked it too!?!
Seriously, I am grateful as well. :-{)>
March 24, 2009 2:29 PM | Reply | Permalink
Thanks, RW! This is great. But like Oliver Twist, may I ask for more? How do you embed a You tube or video or picture?
If this is asking too much, I understand. What you have done here to day is wonderful.
March 24, 2009 3:28 PM | Reply | Permalink
Inserting a YouTube (or other service-based) video is pretty straight forward. Actually, inserting from one of the photo sites is pretty mush the same thing.
THIS ONLY WORKS WITH ONLINE RESOURCES
1. Go to the video or photo you want to include.
2. Copy the "embed code"
3. Go to the place in your blog post that you want the video/photo to show up.
4. Click the button on the entry toolbar. (this is going to change your entry screen to potentially an intimidating gobbeldygook of text and code, but forge onward)
5. Paste the copied embed code into your document.
6. Click on the underlined A button to go back to your wysiwyg screen.
That's it. You did it!
March 24, 2009 4:30 PM | Reply | Permalink
Wow, thanks. I hope it's easier to do than it sounds like.
March 24, 2009 5:07 PM | Reply | Permalink
I have updated the "Cheat Sheet" to reflect additional questions (lists, and inserting video/photo)
March 24, 2009 4:52 PM | Reply | Permalink
I am so grateful to all of you who attempt to elucidate the "how to."
Yet, am I an ingrate to yearn for a button that says" Click here to post photo" or "click here to blockquote" or "click here to..." whatever?
Honestly -- isn't that quite possible, technically? So that all the detailed instructions would be written in to whatever code, leaving only clean white space with a simple instruction to click???
Am I mad? Or simply suffering from what "should be" rather than what is ????
Which is not to say that I do not appreciate the help I am offered. But y'all are still not saying it in terms I can deal with. Sort of like a bridge player with Master points trying to explain bidding to a complete neophyte. Yes, I see the time warp in the analogy. But, forcrhristssake. Tic Toc. These are the moments of our lives....
Please? May I have a button that says: "Post photo"?.
But thank y'all, just the same.
March 24, 2009 7:18 PM | Reply | Permalink
ww, I'm with you! Something like in Word where there is a icon with a cute li'l picture. you click and you're done! I don't think RW can get to that right away, but he might some day in his free time!
March 24, 2009 7:47 PM | Reply | Permalink
Well WW, there IS a button for pictures, and blockquotes, and lists and so forth. HOWEVER, several issues arise:
1. Those buttons do not exist in the comment form (and perhaps they should).
2. You can't really use the photo button inside the blog software because TPM does not allow people to upload to their system - and I think with good cause give space, and virus possibilities.
3. There are problems with things like those buttons, because they get pushed and people change their minds - or push the wrong button. In the default format, that is invisible, but the codes don't go away. Generally, that is not an issue but it can be with things like blockquotes and lists where things keep showing up and people don't know how to get rid of them.
Actually, exactly the same thing happens in Word (and most word processors). I have to ditch Word documents and start all over because of such issues.
My purpose with the cheat sheet actually arose from someone with empty blockquotes they did not know how to get rid of. The only way to fix those invisible problems is to make them visible and know what to look for. Secondly, while the TPM comments say you can use html tags for formatting, it doesn't give samples of the tags. Folks who don't know them can't use them.
What WOULD be helpful and partially address your desires for a clean sheet of paper, would be an "erase" or an "undo" button that removed the hidden codes. I am not a programmer, so I don't know the possibilities (or barriers) of that.
March 24, 2009 8:57 PM | Reply | Permalink
The World Wide Web Consortium (W3C) maintains and improves a free open-source WYSIWYG HTML editor: Amaya. You are able to compose a blog post in it, and copy/paste over to the MyTPM blog editor.
It is free, as in $$, but as with almost all decent software, has a learning curve cost before becoming adept with its interface.
Just goto the Download Amaya binary releases page, and click on the link below your desktop computer's operating system.
March 24, 2009 9:44 PM | Reply | Permalink
Thanks PsuedoCyAnts!
March 25, 2009 12:29 AM | Reply | Permalink