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'>
    <table><tr>
     <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:else/>
        <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>
          <b:else/>
            <data:post.title/>
          </b:if>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
      </h3>
     </td>
    </tr></table>
     <style>
       h3.post-title {
       margin: 0px !important;
       }
     </style>
    </b:if>

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. :)

12 comments :

Betty Boop said...

Thanks, it is still a little confusing to me. I think I need to just try it and maybe I can figure it out.

Janine Huldie said...

I never thought I would love coding, but the more I learn the more I love it. Thanks for sharing a few more tips here today Camille!! :)

Sinea said...

Camille, Thank you, thank you, thank you! I have been wanting to know how to do this. Bookmarked the page!

Stop by my site for the hop tomorrow!
OK?
Many blessings,
Sinea Ducks ‘n a Row

mail4rosey said...

No attempt at coding yet over at my place, but I know where to come now for tips if the time comes. :)

Claudia Castro said...

thanks for sharing this!! I need this :)

www.prettylittledahlia.com

Raising Reagan said...

What a great tutorial!
HTML is always fun to learn~

¤´¨)
¸.•*´
(¸¤ Lanaya | xoxo
www.raising-reagan.com

Roshni AaMom said...

Thanks so much! I may use the hover coding!! Hope it works for me!

Marina said...

Thanks for sharing, I didn't know how to do this!

onlythemanager said...

Wow! How did you learn all that?

hemcoined said...

I would love coding...but i want learn more and more!!!
Fixed Mount Gangways

rebecca said...

I'm going to try this image next to the post title. I've always wanted to and I'm doing this by the end of the week. Thanks love for this tutorial

Tara Marie said...

Ooh thanks for posting this - as much as I've learned about html, I could never get the hang of how to put an image next to my post title. Awesome! I'll have to try this later :)