Tuesday, March 12, 2013

A Few Simple Image Codes :)

Have you ever wondered how to make a caption pop up when you hover over an image?

You just add this code after the link url: title="Google Plus"

Your code will now look like this: <a href="LINK URL" title="CAPTION"><img src="IMG URL"></a>

And if you want the link to open in a new window when clicked on, add this: target="_blank"

So your full code will look like this: <a href="LINK URL" target="_blank"><img src="IMG URL"></a>

You can even do both of those codes, like I did. My code looks like this: <a href="http://plus.google.com/100645864246748829279/posts" title="Google Plus" target="_blank"><img src="http://i305.photobucket.com/albums/nn216/Camilleta/Blog%20Stuff/icon1_zps9a9ba486.png"></a>


If you want to change the size of an image, you can add this code: height="NUMBER" width="NUMBER"

The full code will look like this: <img src="IMG URL" height="NUMBER" width="NUMBER">

As a real like example, this is my button code (just the image part): <img src="http://i305.photobucket.com/albums/nn216/Camilleta/Blog%20Stuff/at3_zpsb7501b26.png" width="150" height="150">

You do not have to use the same number for both. And if you only use the height code without the width code, it will adjust the width automatically. Same if you use the width code without the height code.


If you would like an image next to your post title, like this:

Check out this tutorial: http://helplogger.blogspot.com/2012/04/how-to-add-image-next-to-blogger-post.html

I did have to adapt the tutorial a little bit to make it work on my blog. This is what I did.

Go to Dashboard, click More Options (the little downwards arrow next to View Blog button), pick Template.

Pick Edit HTML and check the Expand Widget Templates box. Press Ctrl F and search for <b:includable id='post' var='post'> and delete that and the next 19 lines. That's 20 lines in all to be deleted and replaced by this code:

<b:includable id='post' var='post'>
  <div class='post hentry'>
    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
     <td class='ssybyposttitle'>
      <img src='PUT THE IMAGE URL HERE'/></td>
     <td><h3 class='post-title entry-title'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><data:post.title/></a>
        <b:if cond='data:post.url'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:href='data:post.url'><data:post.title/></a>
       h3.post-title {
       margin: 0px !important;

Replace PUT THE IMAGE URL HERE with your image url, obviously. For example, my little ladybug image is http://i305.photobucket.com/albums/nn216/Camilleta/Blog%20Stuff/posttitleimage_zpsa3d92771.png

Whenever you edit your HTML code, make sure you save a copy of the original, just in case. I just open a Notepad and paste my code in there before making any changes, then double-check that my blog looks good and is coded correctly before deleting the original code.

For more coding and blog tips, click HERE. :)
Post a Comment