How The Heck Did You Do That?? -Blogger Tips and Tricks #2

September 14th, 2012 kimbacaffeinate Blogger Tips and Tricks 8 Comments

14th Sep

My first Blogger Tips and Tricks post received such a positive response that, I have decided to make this a monthly feature. I know sometimes html codes and blogging in general can make you feel like you’ve just taken a trip in the Tardis..but my wish is to make it as simple as possible for you.

Update: I noticed when copying code from this post the quotes are fancy and can mess with code. Please replace them before using code.


 1. Placing Images Side by Side on my Blog.

 

This is a simple way to place them side by side.

Access the HTML side of your post and type the following code:

<table>

<tbody>

<tr>

<img alt=”” src=”image url image 1″ width=”180″ />

<img alt=”” src=”image url image 2″ width= “180” />

</tr>

</tbody>

</table>

 

In the highlighted blue area you will need to place the web hosted URL of your image. You can use photobucket(this is what I use and it’s free), flickr etc to house these images. What?? how do I do that?? It’s easy, download image desired to your computer. Set up account with web-based photo shop such as Photobucket. When you are logged on, upload picture from your computer by selecting upload and following directions. Then click save and go to your albums. Under photo you will see direct link, copy and paste that url into the red area above, repeat for second image. In the blue area select the width you want the photo to be.
2. Want them to have clickable links????

 

 


(go on click on them) 


Use this code in HTML:

<center>

<table cellpadding=”0″ cellspacing=”0″>

<tbody>

<tr>

<td><a href=”url address to website”><img border=”0″ src=”url image of picture” /></a></td>

10px;”>url address to wrbsitel”><img border=”0″ src=”url image of picture” /></a></td></tr>

</tbody></table>

</center>

  • To add to your post, go to html side of compose and copy and paste this code into post.
  • copy and paste the link site URL in the red area.
  • In the blue area copy and paste your image URL. Remember it must be an image stored online, for example photobucket or flickr. (be sure and size them the same)
  • Repeat for each image.
  • The 10px  is the distance between images and you can change that number to suit your needs.

 

4. Can I do more than 2 side by side images? 

Yes you can, for more images, simply add more code surrounded by ( <td style=”padding-left:10px;”>  and </td> ) Make sure you add them before the tag ( </tr> )
  • <td style=”padding-left:10px;”> paste 2nd link url here“><img src=”paste 2nd photo url here” border=”0″ /></a></td>

5. Can these codes be used in my side bar?

Yes, just be sure to re-size images to fit width of your sidebar. On blogger, go to add gadget and use html code. Copy and paste the codes we used above.

Tips:

1. Commenting on other blogs:

Be sure to set up accounts with all comment systems that include a link to YOUR blog. (ie. comment luv, blogger, disqus, worldpress, twitter.) I get comments and would love to reciprocate..but if I cannot find you easily I cannot comment.

I know it’s a pain, and I know it takes time to set up profiles but you will see an increase in comments to your blog..trust me. Choice a user name and icon to use for all profiles. This will make you recognizable!!! You can use the same password to make it easier to remember. Add your blog and twitter link to this profile. Market yourself everywhere you go.

2. Images in your side bar 

To all the bloggers with pictures in your side bars that hang out over the edges..you can use photobucketflickr etc to re-size those images to fit within the sidebar. You can also resize your side bar by customizing your template. For blogger, go to template, customize, adjusts widths and play around with it, till you get the look you want.

Good Luck and if you have a problem..email, tweet or facebook message me 🙂

If there is something you want to learn about or need advice on
email me and I will try and include it in an upcoming post.
Copyright (c) 2011-2013 Caffeinated Book Reviewer
Photo of kimbacaffeinate
About Kimberly
Kimberly is a coffee loving book addict who reads everything fiction in YA, NA, and Adult. She's a self-professed Whovian, Supernatural, and Sherlock Holmes junkie, She enjoys sharing books, tips, recipes and hosting the Sunday Post. The coffee is always on and she is ready to chat... Twitter | Facebook | Instagram

Stay Caffeinated!

Never miss a post by adding Caffeinated to your Inbox

Your email address will not be shared with anyone

8 Responses to “How The Heck Did You Do That?? -Blogger Tips and Tricks #2”

  1. Bookluvrs Haven

    WOW you have a few of these posts. Awesome. I am going to spend some time exploring your tips. Thank you so much for all the information!!

    – Lily @ Bookluvrs Haven

  2. Angelas Anxious Life

    HOLY SMOKES! I had a whole blog post on my blog about how to get the dang pictures to be side by side and no one could help me!! Thanks for this… it is a BIG help!!!!!!!! ! ! ! ! ! !!!!!!!!!!!!!!!

  3. Michelle

    I am loving this series of yours! Especially the side by side comment thing. I need to re-do my blog roll page ASAP!! 🙂

    Thanks for sharing these great tips!

    • kimbacaffeinate

      Nope, gah, and I tried several others and they do not work. Let me research and I will reply when I find good code again.

    • kimbacaffeinate

      Angie, the code works but images don’t appear is this happening to you too? What platform are you using? WP? Blogger?

        • kimbacaffeinate

          Here is the problem, when I share code on self-hosted wordpress it messes with the quote marks. Copy the code and then fix all quotes, so that they face correctly and not backwards…then it will work. I am trying to make images of the code, so that my theme cannot screw with them..LOL