Raising Memories: Blogging Tips (Positioning Photos in Your Post)
  

Saturday, March 6, 2010

Blogging Tips (Positioning Photos in Your Post)

First let me just say that I am not a Blogger guru or anything of the sort. I am, however, having fun with blogging. I like to try new things with my own blog and I know some things from designing my own websites & such.

I shared a blogging tip a while ago on my blog because I had mentioned a Blogger feature to a friend who also blogs and she didn't know about it. It wasn't hard to use and it's sooo handy!! I thought if she didn't know about it, other people don't know about it, so I decided to share my little tidbit with my modest little readership ;)

Then my sister in law got a blog and started asking questions about how to do things with it. Seriously, within the last year or two, the number of people I know IRL (in real life) who have started blogging is huge. So, I begin a series of posts about blogging wherein I will share some little tips I have come across in my time of blogging.

Image and video hosting by TinyPic
(fancy little image, eh?.. did I mention my love for Photoshop?)


So, we begin the series with "How to position a photo in your Blogger post"...

(a good one for beginner bloggers or bloggers who are still trying to click & drag within the Compose window)

When you're typing your entry in blogger, you can type in "Edit Html" mode or in "Compose" mode. If you don't know much about html, you will likely choose "Compose" which is fine (most of the time).

However, when it comes to positioning photos, it's pretty annoying!!!


Luckily, it's easy to switch between "edit html" and "compose" tabs, and luckily I have a little something to share with you about html.

If you have a bunch of photos for one blog post, you will probably click on the "Add Image" icon and then browse for the photos on your computer, set your layout, and upload your images (because you've probably figured out that you can click on "Add another image" and upload multiple images at once).


The great thing about that is that blogger uploads all of your photos into your post for you and you can see them right there in the compose window. The annoying thing is that they all sit, one after the other, at the beginning of the entry and even though you can click & drag your photos around, it's really hard to do that within the tiny little compose window!


It would work to click & drag in the example shown above because my bottom photo and the spot where I want it are visible within the Compose window. But if I want to put my first photo there, I cant do it!

Here's The Solution:

1. Do everything you want with your entry in "Compose" view, including uploading your photos.
2. Then click on "Edit Html" to switch tabs.
3. You will then see something that looks like crazy gibberish code at the top, where your photos are, and you will need to resist the urge to run away in confusion and frustration (assuming you have not worked with html before). Resist the urge.


4. A small lesson in Html:
In html, when there is a link, it starts with <a href= and then it goes on and on until it ends with </a>
5. Since Blogger posts pictures as links (so that you can click on the picture and see it at its original size), you want to look for the section of code that begins with <a href= and ends with </a> (that section is highlighted in the above image- you can click on it to see it larger if you need to)
6. Highlight the first section of code that looks like that. Copy it (by pressing ctrl + c) and then paste it (by pressing ctrl + v) in the place that you want the first photo to show up in your blog entry.
7. Repeat step 6 for each of your photos.
(If you get confused about which photo is where, just click back over to the "Compose" tab and figure it out).
8. Be sure to delete the code at the top of the entry after you've pasted it where you want it (or you'll have each photo repeated at the start of your entry)

I hope I've explained this clearly. It's a really easy thing to do once you understand that little bit about the html code- it just takes a little getting used to!

Please let me know in the comments whether this tutorial made sense or was useful to you!
And if it didn't make sense or you still have questions, comment & let me know- I'll be happy to help if I know the answer!

Got something you'd like to learn about photography or blogging?
Tell me about it in the comments & if I can help, I'll post about it!

6 comments:

  1. I love blogging tips - I'm pretty conservative with the number of pics I post in a given blog entry so I can usually get them where I want them... but it's good to know of a way to fix it if I ever have the need :)

    My tip for you, is that I've started a list of frequently used html codes in yahoo notepad that I can pull up as needed... including linked within for commenting on others blogs like this:
    Heather from :Couponning101
    and
    Acting Balanced

    ReplyDelete
  2. Hi there.
    Stopping by via SITS to say hello.
    Enjoy the rest of your day!

    Harriet

    ReplyDelete
  3. hi thanks for the tip ,i want to share a tip of mine too as i am the running away type person from the HTML codes so what i do is that i click on the pic in the rich text editor and "CUT" it from the list of pictures given one after an other and then move the cursor in the desired place and then i paste it with a write click :) saves me from HTML

    ReplyDelete
  4. OMG yes. html is scary. I have totally stayed in my comfort zone. I love that people like you are smarter than me and know how to do scary stuff on the computer. Thanks for the lesson. You are a good teacher. Are we going to be graded on this?

    ReplyDelete
  5. iram- very good tip- may make my whole post unnecessary ;) But at least now some people know a little more about html, eh? :)

    lol Thanks, Linda :) (No report cards, I promise ;)

    ReplyDelete
  6. Do you know how to place 2 photos beside each other- or how to write beside a photo?

    ReplyDelete

Thanks for taking the time to leave a comment- I love reading them! :)
~Heather Lynne

Contact Form

Name

Email *

Message *