March 19, 2011

Controlling images in Blogger

You know how when you click on an image in Blogger, it enlarges? Well, I love that feature for photographs, since you can see even more details in the picture.

But for graphics I place in my blog, I'd rather not have them be clickable. I think that cursor image can be distracting and may lead readers to click when they see it.

I like the cursor only to appear on my actual links and downloads I have on my blog.

So I played around with the code a bit and found a pretty simple way to take this "clickability" away. (I did leave the images below clickable! So you can see the code more easily!). :)

After you place an image in the post, you can see it's code under the "Edit Html" tab. It's a huge long code and there are parts you can remove really easily to doctor up your image.

First, you can remove everything from that "onblur" part right until you get to the beginning of the image code...you can see the code highlighted in the picture to the right.

This will take away the enlarging option when you click on the image. But, you will still see your mouse change into that hand-shaped cursor.

To remove that type of cusor, look for the part where it says "cursor: pointer;" and remove it (shown to the left).

Now your image is truly embedded into your blog page, as if it is part of the design! I love how this makes the blog seems more "website-ish".

Would you ever try something like this on your blog? I hope you are all having a wonderful weekend!

2 comments:

  1. Thank you for your tips. I'm still learning so I need all the help I can get. =)

    ~Jennifer
    http://mrsparkerssecondgrade.blogspot.com

    ReplyDelete
  2. Thanks again for such easy to understand directions! Love it!
    Swamp Frog First Graders

    ReplyDelete

 
Blogging tips