Traveltino + [travel]

Simple HTML Things I Learned from Blogging

Today's post is not about travel... but it's about blogging. I'm going to share with you 2 indispensable things I learned regarding blog formatting. I use these tips to enhance the look of my blog and provide my readers with (hopefully) a good experience.

A quick note: all < > are replaced by { } on this particular post, so as not to disrupt any active HTML codes.

1) target="_blank"
If you want readers to navigate out of your page by following a link, but without closing your page, the target="_blank" is your friend. Insert it into your {a} code. This is how it will look on Edit HTML view:

Sample it by clicking {a href=http://myfolieadeux.com/" target="_blank" } here {/a}

Sample it by clicking here.

2) Photo Icons
If you click on one of my City Guides icon (Paris, New York, Marrakech) on the left sidebar, all posts tagged as such will be sorted according to its label. To me, clicking on a photo icon is more interesting and attractive than clicking on a word from a list. Here's how I do it.

  • Create your photo icon via Photoshop, etc.. The size of my City Guide photo icons are 185 x 150 (w x h)
  • Open a New Post on Blogger
  • Upload your photo icon on New Post
  • This is what appears on the Edit HTML view:

Click to enlarge

  • Subsequently, add a Gadget to your sidebar; I used the HTML/Java Gadget
  • Copy and paste the above HTML from your uploaded photo icon to your Gadget
  • Erase the {div} and {a} code phrases that come before the {img} code phrase
  • Then, view your blog and search for the appropriate label that you would like to tie-in with your photo icon. Or simply use this HTML code phrase in {a} format: http://myfolieadeux.com/search/label/Paris - this will tell where to search and pull stuff according to your labels: in this case, Paris.
  • Now, you are basically replacing the erased {div} and {a} codes by typing your new {a} code in front of the {img} code on your HTML/Java gadget as per format below. Each code below corresponds each photo icon to my search labels: Paris, New York, Marrakech. This is how it will look. See the new {a} code preceding the {img} code? Note: check to ensure code is closed by {/a}

  • Save and Publish
Capiche? Hope this helped!

P.S. I also posted "3 Tips for Shooting Portraits" here.