Tuesday, May 5, 2009

How to Add a Pop-Up Caption in Blogger

As many of us have discovered, Blogger has no easy way to add a caption to your photos. For someone like me, who can be pretty long winded, it irritates me that I have to add even more to an already long post just to explain what a short caption could do so much more efficiently. I also think captions give a more polished look and feel to a blog, so I've been spending a lot of time trying to find a good way to make this happen.

I haven't found that way yet, but I did find a method that makes me happy in the interim. Instead of placing the caption below or beside the picture, you can easily place a caption "within" the picture. To see this in action, hover over the picture here:


If you'd like to do this to your own pictures, just choose a picture on your computer and follow along!

1. Upload the picture to your blogger post by clicking the add image icon () and then use the "Add an image from your computer" option to insert the pic.


2. Once you have your image uploaded, and making sure you're in the "Edit HTML" tab of your post, you should see a lot of code similar to this:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_rYUxmku_JcI/Sf_h2Lo2YxI/ AAAAAAAAAgQ/BuwWqR9BzEY/s1600-h/13059_product_571284295_thumb_large.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 200px; height: 200px;" src="http://4.bp.blogspot.com/_rYUxmku_JcI/Sf_h2Lo2YxI/ AAAAAAAAAgQ/BuwWqR9BzEY/s200/ 13059_product_571284295_thumb_large.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5332228804783268626" /></a>

3. You need to paste the yellow code into the right spot in the above mentioned code, so it looks like this:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_rYUxmku_JcI/Sf_h2Lo2YxI/ AAAAAAAAAgQ/BuwWqR9BzEY/s1600-h/13059_product_571284295_thumb_large.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 200px; height: 200px;" src="http://4.bp.blogspot.com/_rYUxmku_JcI/Sf_h2Lo2YxI/ AAAAAAAAAgQ/BuwWqR9BzEY/s200/ 13059_product_571284295_thumb_large.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5332228804783268626" title="what you want your caption to say/></a>


4. Change all the words in italics to what you actually want the caption to say, and hit "Preview". As long as you've copied all the code correctly, you should be able to hover over the picture and see your caption pop up. (If you don't see it, or if your picture doesn't show up correctly, check to make sure you didn't accidentally delete any quotation marks or slashes from the code.)


2 comments:

Creations With Heart May 5, 2009 at 10:49 AM  

Very cool! Where do you get all of your Ninja Knowledge?!! =)

Ninja Jenn™ May 5, 2009 at 1:43 PM  

Thanks! Most of it comes from either questions asked by my readers, or my own questions that arise as I am trying to write. If I find something that's making me crazy, once I get the answer, I usually post it, figuring that I can't be the ONLY person who has ever gotten irked with that subject.

Thanks for reading and commenting!

Do you have any ideas for future topics you'd like to see?

<3

Label Cloud


Powered By:Blogger Widgets

  © Blogger templates ProBlogger Template by Ourblogtemplates.com 2008

Back to TOP