HomeAbout Me & PoliciesBook Reviews by TitleAuthor Interview IndexProduct ReviewsAwards

Monday, September 14, 2009

Tuesday Thinger: 8 Great Tips for Helpful Blog HTML Codes

Welcome to another week of Tuesday Thingers! We always love to hear from regular participants as well as new people.

From time to time, I sit here pulling my hair out, trying to figure out how to do something I've seen on another blog. . . or I've got an idea and simply have to see if it will work. . . and I just can't figure it out! Ever been there? Well, usually, you can EVENTUALLY figure it out. . .

I learned two valuable code lessons over the past week, so I thought this would be a good (and hopefully helpful) topic for this week.

If you use blogger like I do, it gives you the option to align your post to the right, center or left, but what if you only want a portion of your post aligned a different way. . . centered maybe??

Here are some helpful HTML Codes (actual code will be shown in blue):

1. To center (or align left or right) words or images: <center> Then type here or enter image source code. End with </center>
And would appear like:

Tuesday Thinger

2. When you have an image that you simply can't add typing next to (like those Amazon Associate links) add this:
<iframe src="http://rcm.amazon.com/...(removed REALLY long code here).........&asins=0141439513" style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" style="float:left"></iframe>

3. Want to show code in your blog post?
Replace the < & lt; (remove the spaces after the &)
Replace the > with & gt; (remove the spaces after the &)

4. Want to have a new window open when a reader clicks on a link in your post instead of them navigating away from your page: Add target=”_blank” inside link code
<a href=”http://wendisbookcorner.blogspot.com” target=”_blank”></a>
It should open a new window if you click on the link (crossing fingers) Visit Library Thing Here

5. Want to indent a paragraph (book description) or picture:
Use <blockquote> Enter your text or image code inside, and when you are ready to end the indent </blockquote>
And it should look like this:
I hope you are learning something new with this Tuesday Thinger. . . and I sure hope I've got everything typed in correctly! :)

6. You want to create a link with text in your post, or in a comment (link to your Tuesday Thinger Post in the comments section ;) ) **note - you can put words on either side of the code if you only want one or two words to show as a link.**
Use this code, filling in the non-blue items <a href='http://your blog address here'&gt;What you want your link to say</a>
So, if I wanted to leave a comment that said Come Visit Wendi's Book Corner, I would use this code:
Come Visit <a href='http://wendisbookcorner.blogspot.com'>Wendi's Book Corner</a>
and it would loook like this. . . Come Visit Wendi's Book Corner

7. You want to add a link so people can send you an email:
<a href='mailto:Your email address here'>Your text here</a>
Mine would look like: <a href='mailto:wbarker@hotmail.com'>Send me an email!</a>
And would appear like: Send me an email!

8. You want to have a scrolling box within your post for an excerpt (or something else):
Use this code and change the non-blue items, Items in Bold are needed, non-bold are optional and can be deleted:
<div style="width: 395px; height: 100px; background-color: #C6AEC7; color: 000000; font-family: arial ; font-size: 14px; text-align: left; border: 4px solid #7E587E; overflow: auto; padding: 4px;"> Enter your text here </div>

It looks like:

Bonus: Find yourself getting confused with all the codes. . . or participate in weekly memes. . . or find yourself using the same format for your post over and over? Creat a template in Excel with the code so you just update your link or text and then copy/paste to your blog. :)

For more great hints and tips (html and general blogging) visit:

For a good tutorial on customizing (borders, background color, etc) Blockquotes, visit: http://www.bloggerbuster.com/2007/11/how-to-customize-block-quotes-in-your.html

For help with HTML color codes visit: http://www.computerhope.com/htmcolor.htm

Questions: Did you find any of this helpful? Do you have any favorite tips to share? Is there anything in particular you need help with (maybe one of us can help out)? Is there a particular topic (Library Thing or general blog tips/questions) that you would like to see next week?

My Answer: Ok - I'm exhausted! I had no idea it was so hard to document code in a blog post. . . if you don't do it right, it actually does what you are trying to show, and instead of showing the code for centering text, it ACTUALLY centers the text. LOL

Every now and then, I stumbe onto something that I just MUST figure out how to do for my blog. . . now. . . I'd love to figure out how to outline my blockquotes, and possibly change the background color inside it. :)
I'd also love to hear what other great tips are out there.
Looking forward to reading everyone's answers!!

~ Wendi

If you are new to Tuesday Thingers: Welcome! The meme was originally created as a way to network with other bloggers and to learn about Library Thing! I'd like to encourage you to join us. If you don't know what Library Thing is - you are in a great place to learn about new things, and if you are an old pro, stick around and share your wealth of information! Visit Library Thing here. To join in, copy the picture and question into your post and link back here so people can read other responses. Make sure you leave a comment here with a link to your post so we can stop by! If you don't have a blog, feel free to leave a comment here!


Teddyree said...

Thank you so much for the awesome tips, I am a bit of a moron when it comes to code, most things I use have come from asking sweet bloggers 'how to' lol. Like how to put code into comments :-)
The Eclectic Reader

Sandra said...

What a generous thing to do. I am so electronically dense I'm not sure where to put the codes or why anyone would put code in a post. But I'll play around with things and maybe figure some of them out. I appreciate these very much. One or two simple tricks can make a real difference in presentation on a blog. Thank you.

Anonymous said...

Thanks for all of these tips. I will be using some if not all of them!

Mary (Bookfan) said...

Wendi, great post. Thanks so much for taking the time to share it with the rest of us.

And, yes, I'd like to know how to change the back ground color for blockquotes!!!

DCMetroreader said...

These are great tips. Thanks so much for doing this!

caite said...

good tips...even the one I didn't understand. I a bit techno-challenged....lol
Here is my answer.

Dawn @ sheIsTooFondOfBooks said...

Yes, Wendi, this IS helpful! I'm learning HTML in tiny bits and pieces, and appreciate any hints that help me reverse-engineer what I've done :)

Chèli said...

This is my first time here for Tuesday thingers.

It's great

On LT, I'm cyderry
Cheli's Shelves

Melissa said...

Great post! I will be trying some of these out!

Related Posts Plugin for WordPress, Blogger...

Web Site Hit Counter
Amazing Counters