Blog design & html tips: 001

March 7, 2012

bannerI sometimes receive emails from readers, fellow bloggers and people who want to start a blog, asking who designed my blog or if I can design a layout for their own blog. In short: I designed my blog myself but no, sadly I don't have time to make layouts for other people. I will however, share some "tips" that can help jazz your blog up a bit! If you are already familiar with HTML then you probably know how to do all of this already but hopefully it will benefit some people!

I am going to make this a "series" and try and stick to one tip per post, so that it doesn't get too confusing. In this post we will be focusing on how to make your images appear in rows like this:

This type of code is really useful for "weekly roundup" type posts, or even if you just plan on sharing a lot of pictures but want them presented in a neat and compact way! To begin with, your images should all be the same height and width, otherwise they will look uneven and messy. If you don't have access to photoshop, you can crop your images via Picnik on Flickr (I use instagram for iPhone, which also crops them) I would recommend cropping the images to square.

♥ To begin, you need to decide how many pictures you want per row. I like to keep mine at 3 pictures but you can add more or less if you wish. To add more pictures per row, simply change the width (in the coding below) to a smaller number.
♥ Next, copy and paste the following code into your blog post (make sure its the "html" mode, rather than "compose")

♥ Replace "IMGURL" with the width of the images you want to use. I set the width to "178" for my blog, but you may need to adjust this if your layout is wider or smaller than mine. Just play around with the numbers until you find what works best for your blog.
♥ The code above is one row of images, you can add as many additional rows as you like by copy & pasting the code again.

I hope this helps! If you have any ideas for future html/design tip posts let me know. I am going away tomorrow for a few days (a family friend is getting married) so things may be quiet around here and twitter until after the weekend. Enjoy the rest of your week!

xoxo

29 comments:

  1. Lovely post :) I am so rubbish with computers but this was really helpful and easy to follow. X

    ReplyDelete
  2. this is such a good idea for a set of posts, I have no idea about html xxx

    ReplyDelete
  3. I'm ready looking forward to this series as I'm technologically challenged when it comes to blog designs haha, I can't wait for the next installment : )

    http://itsbeautystartswithin.blogspot.com

    ReplyDelete
  4. Great idea for a series of posts, I'm looking forward to reading more! :)

    Caroline x
    Caroline's Catwalk

    ReplyDelete
  5. I'm so glad you're doing this series, I have to admit almost everything technical I do is just guesswork! Kinda wish I hadn't dropped IT so early on now I blog!

    www.coffeeandrosesx.blogspot.com
    xx

    ReplyDelete
  6. great post! I love to learn more tips even if you know how it is still good to know and learn more!

    ♥ http://fashionxfairytale.blogspot.com/

    ReplyDelete
  7. This is so helpful, thank you for sharing!

    ReplyDelete
  8. Recently I have really wanted to sort my blog layout but didn't have a clue how. I can see these posts being so helpful! :D

    xx

    http://wearenouvellevague.blogspot.com/

    ReplyDelete
  9. Really helpful, I've been searching around for help on how to do this for ages so thank you! Maybe you could do a post on how to make the text underneath a picture to be the same width as the actual picture, so the text starts and ends where the picture starts and ends in terms of width, if you get me :) x

    ReplyDelete
    Replies
    1. Of course! I'll try do that tutorial soon! xo

      Delete
  10. I will definitely be using this; I use Picasa's collage function at the moment but it doesn't always work that well so this will be perfect! Thankyou for sharing!
    xxx

    ReplyDelete
  11. Thank you SO much for this!!! I would love a tutorial on how to make the horizontal list of links under your header (home, about, faq etc).
    :D

    ReplyDelete
    Replies
    1. Sure, i'll make sure I post how to do that sometime soon! xo

      Delete
  12. Love this post :) wish I had this a while ago when I was pulling my hair out trying to do my blog header.. check it out? :) xxx

    ReplyDelete
  13. This is so helpful, thank you! :)

    ReplyDelete
  14. Great post, look forward to reading more of your tips :) x

    ReplyDelete
  15. I will certainly be using this! Can you give tips on making a blog button?

    ReplyDelete
  16. This is such a useful post. How do you then insert the images though? Do you just add them as normal or does the coding of the image need to go in amongst that code??

    I'm going to be checking back often for more tips, I need all the help I can get!! Haha!

    Amelia @ UGLY DUCKLING x

    Come say hey at Ducklingtoswan.com!

    ReplyDelete
  17. You just upload the image to a host (flickr, imgur, tinypic, etc) and then copy URL (direct link) for the image and insert it into the part of the code where it says "IMGURL" (each IMGURL is for a new image)
    Hope that makes sense!
    xo

    ReplyDelete
  18. this is really helpful, thank you so much!! :)

    www.the-ant-ler.blogspot.com

    ReplyDelete
  19. This is a great idea for a series. I'd be interested to know how to customise the spacing between images - always something I'd like to alter but don't know how

    love your blog as always :)

    x
    rococ0.blogspot.com

    ReplyDelete
  20. Lovely post :) Thanks a bunch for the help!
    xo Heather
    http://ahopelessnotebook.blogspot.com/

    ReplyDelete
  21. ah, i'm glad i've found your blog.

    you're really an inspiration :)

    ReplyDelete
  22. Ah finally, wanted to know how to do this for ages. Thanx

    www.lookwhatigot.co.uk

    ReplyDelete
  23. Thank you so much for this!
    extremely helpful, especially for silly people like me!

    ditzydaydreams.blogspot.com

    ReplyDelete
  24. This post was really useful, thanks!

    Kayleigh xx

    www.beauty-bows.blogspot.com

    ReplyDelete
  25. I'm useless at HTML, I can just about handle the basics! Thankfully I haven't succumbed to instagram myself, but it kinda annoys me when people's round up posts are all over the place (OCD s pet hate? Whatever) xx

    ReplyDelete