18 March 2014

Top 10 DIY Blog Design Tutorials and Tips



A lot of people have been asking me how I created my new blog design. I love the design aspect of blogging and I'm always wading through the murky waters of HTML codes. My husband calls it my "crazy blogging voodoo". 

I have created all of my blog design myself using the tips and tutorials below. I am including tutorials on the most basics of blog design up to most advanced blog design. All of the tutorials are for blogger only, and I really hope they will be helpful for you! 

| FIRST THINGS FIRST |


In general the three blog design resources I cannot live without are:

Rhonna Designs App
I create literally everything you see design wise on my blog with this app. It has been the best money I have spent and I use it SO much. If you have a device to utilize this, I use it on both my iPad and iPhone, it will change your blogging life. For example I created all blog buttons, blog header, nav bar, and edit pictures with this app. Can't say enough about how much I love it. 

Picmonkey.com
Long loved by bloggers Picmonkey is a great tool for blog designing. I usually create things in Rhonna and then move them to picmonkey for cropping, or adding text, or combining design elements together with overlays. I am not a 'Royale' member and I haven't paid a cent to use it. There are lots of things you can do with the free stuff! 

Photobucket
I use Photobucket to host all of my images online as well as resize them for things like buttons (most common size is 150x150) Also if you want to make a clickable image with something like Image Maps (definitely a runner up for my top three, tutorial below) you will need to host the image somewhere. Photobucket is free and easy to use! 


| TOP 10 BLOG DESIGN TUTORIALS |


Now on to the tutorials. I will start with the basics and move on to the advanced stuff. 




DIFFICULTY LEVEL- EASY 

This is, in my opinion the most impacting thing you can do to start customizing your blog. It is the first thing people see when they come to your blog, your blogs "first impression" if you will. This tutorial from Something Swanky has got you covered. While you are there be sure to check out her tutorial on Image Maps which you will need to make your navigation bar clickable. It looks a little scary at first but its not hard once you get the hang of it!



DIFFICULTY LEVEL- EASY

Another thing you want to do when you are a new blogger is to make yourself some buttons. You'll want to have them accessible on your sidebar so people can easily grab them to put on their own sidebars. I make all of my button images in Rhonna Designs but then I upload them to photobucket to resize them. From there its easy peasy with the "Grab My Button Code Generator", paste that baby on your sidebar in your Layout tab and you're done! If you need a more step by step guide, check out this WikiHow



DIFFICULTY LEVEL- EASY 

Now that people are on your blog you want to get them connected to you! You can do this with social media icons, usually placed at the top of the page or below your picture in your sidebar. There are a ton of social media icon sets out there so you should be able to find something that you like. I chose to go with just text for mine because I liked the look of it! Rose at Every Little Polish has a great and simple tutorial on how to add social media icons to your page. She also has a free download of some really cute watercolor icons! So go grab em! 





 DIFFICULTY LEVEL- EASY 

One of the best ways to keep people clicking around on your page is to make a clickable image for your most popular posts and put it on your sidebar. There are a few ways to do this. The easiest of which is to create images using either Rhonna Designs, Picmonkey or Photoshop (or something similar). Take the image from your post and put text over top of it, so people easily know what they are clicking. Then simply go into your Layout tab, click "add a gadget" on your sidebar, select "add image", upload the image you just created and then you will see below there is a place to add a link. Paste the link to the post you are featuring here. A great little HTML tip I learned from my friend Lena is to put this code <!-- --> into the title box and voila, it will not require a title and just the image will show! Another way to add your most "Pin-Worthy" posts is to add an actual pic it widget. This tutorial over at The Blog Maven will tell you all about it. 



DIFFICULTY LEVEL- MODERATE 

I put this as moderate, just because it requires you to delve into your actual "Edit HTML" section of your blog, but it is really actually easy. Super easy. If you head to my "Motherhood" section of my blog that you'll find in the navbar up top you will see that all of the posts with the label "Motherhood" will show up on that page when you click on it. If you aren't utilizing your labels, you really should. Its a great tool for focusing your readers to something that interests them. I use this tutorial and then use the url that is created in my navbar with Image Maps. 


DIFFICULTY LEVEL - MODERATE

Under each post Blogger has icons to allow your readers to share the post that they have just read. This is awesome for you but the Blogger generated icons don't look that great, especially if you are going for a more sleek custom look on your blog. This great tutorial from The Blog Decorator will show you how to change these icons into much cuter ones! I have used this on my blog, and I have labelled it moderate because it took me two tries to get it in the right spot! 



DIFFICULTY LEVEL - MODERATE

It always bothered me that the footer at the end of each post (also where the share icons are located) was grey. It looked like a big grey bar and I really wanted it to be transparent. After some extensive googling I found a tutorial that wasn't too difficult! Check it out here 

DIFFICULTY LEVEL - ADVANCED 

This is something that I haven't done yet, but I will be working on it shortly. If you want to see it in action, head over to my friend Jessica at Pig and Dac. Jessica recently redesigned her whole blog and it looks fabulous! My current template has two columns at the bottom but I would like to add another one. I have found a few tutorials for this both here and here

DIFFICULTY LEVEL - ADVANCED

When you head to my home page you'll see that I have changed every post to now be a post summary (also known as a jump break) with a thumbnail of the post. There are a few reasons to do this; it speeds up the loading time of your blog, it directs readers to more content on your blog, and it also provides you with more accurate post stats. The verdict is still out on whether I like it or not but so far I do, let me know what you think! My preference would be to have the top post full but the rest post summaries, but I couldn't figure out how to do it automatically and not having to add code to each post. So I went with the auto post summary tutorial found here.  

DIFFICULTY LEVEL - ADVANCED

If you aren't sure what this looks like head over here. I LOVE this idea and would love to have it as part of my motherhood label page, and perhaps a few more pages in the works too. The coding is a bit intense for me, and the tutorial is definitely for "coders" not just simple bloggers like me. I have tried twice to implement it but each time it ends up converting my entire blog not the page I'm attempting to code. Hmm. if you can figure it out let me know! Its a great little bit of code! 

There you have it my friends! I hope this has been helpful for you! For more design tips covering the basics see a great list from Something Swanky here



43 comments:

  1. Thanks for the tips. Will be checking out some of the links. Visiting from Wine'd Down Wed. Linkup

    ReplyDelete
  2. Thank you for the great tips! Now to head through them and see which work for Wordpress.com blogs.

    ReplyDelete
  3. These are great tips! I have been wanting to do the thumbnail grid for my recipes and DIY as well, and I cant figure it out!! If you find an easier tutorial please pass it along!! :)


    Amanda // Happily Ever After

    ReplyDelete
  4. OMGosh, I can't wait until I have some time in my day to sit down and try some of these!!!! Thanks!!!

    ReplyDelete
  5. Hannah TerpstraMarch 19, 2014 5:15 pm

    Thanks for stopping by Erlene!

    ReplyDelete
  6. Hannah TerpstraMarch 19, 2014 5:16 pm

    Thanks Katy! Im sure some of them will work for Wordpress definitely! I know a few of them had codes for both :)

    ReplyDelete
  7. Hannah TerpstraMarch 19, 2014 5:16 pm

    Thanks for coming by Amanda! I know, I love love the thumbnail grid but it is tricky! I will absolutely let you know if I find a different tutorial for sure!!

    ReplyDelete
  8. Hannah TerpstraMarch 19, 2014 5:17 pm

    Thanks Diane! So glad they are helpful for you!

    ReplyDelete
  9. Hannah TerpstraMarch 19, 2014 5:17 pm

    Thanks for coming by Whittney! Designing your own blog definitely takes time but its soo rewarding! :)

    ReplyDelete
  10. pinning this to try later!! Thank you so much for sharing your "voodoo" lol =)

    ReplyDelete
  11. Something SplendidMarch 19, 2014 8:36 pm

    This was an awesome article! Thanks for sharing! Pinning for later!
    -Karli
    www.somethingsplendidblog.com

    ReplyDelete
  12. I love this! I spent my summer designing my blog and feeling so accomplished when I was finished! I later had an actual designer create something different...unfortunately I'm not very good at the "crazy blogging voodoo". This is so awesome and such a great help!
    Thanks

    ReplyDelete
  13. This is great! I can't wait to check out some of these tutorials, especially the clickable navigation bar!

    ReplyDelete
  14. Great tips and informations! Thank you so much for sharing this. I'm still learning the blogging bizz and need to know so much more.

    ReplyDelete
  15. These are so incredibly helpful! Thanks so much, Hannah!

    ReplyDelete
  16. Um. are you serious right now?? Rhonna?! You did all of that in Rhonna?! You amaze me. Not joking. I am so shocked.


    Also, I want to do the image mapping thing... Like, have an image but then have all of the images within the image link to something else. Is that image mapping? The link on that gal's page gave me an error message.


    Anyway, seriously Hannah, you must teach me your Rhonna ways one day.

    ReplyDelete
  17. haha!! Yeah I know, Rhonna and I are like BFF's! HA! Seriously though it is an awesome awesome tool for bloggers, and isn't too tricky once you get the hang of it. My favourite trick is to utilize the "mask" option. It basically changes your picture to highlight whatever you have overlayed on top of the original image, like text for example. The header image for this post was done that way, picture, text over top then switch mask on, and voila, just the text shows with a white background. Anyway there are tons of things you can do with it! I feel like Im the Rhonna spokesperson right now! ;) Oh and yes, Image mapping, you got it, thats exactly what it does. It looks tricky but isnt too bad when you get it figured out... if you ever need any help let me know!

    ReplyDelete
  18. Thanks Amy! So glad they will be helpful for you! :)

    ReplyDelete
  19. Thanks Joanna! And welcome to the big wide world of blogging! It can be kind of crazy and daunting to start out but I have found that you learn so much as you go and don't expect too much from yourself, don't forget why you started bogging :)

    ReplyDelete
  20. Thanks for stopping by Brynne! Im so glad this will be helpful for you! the clickable navigation bar is key! You can definitely do it! :) Good luck!

    ReplyDelete
  21. Aw thanks Sami! I have gone through so many blog designs and loved and hated them! haha! I also once paid for a premade design but in the end I only had it up for 2 weeks because I really felt it wasn't authentically me. I've found that adding your own design elements little by little can really make you feel like your blog is more authentic! Thanks so much for stopping by!

    ReplyDelete
  22. Thanks Karli! Hope you'll find something helpful!

    ReplyDelete
  23. haha no problem Julie! Thanks so much for stopping by! and for pinning!

    ReplyDelete
  24. Stopping by from the linkup! Great tips!! I'm going to work on a few of these for my blog. xoxo

    ReplyDelete
  25. Great tips, I'd never knew about the 3-column footer but I really like it!

    ReplyDelete
  26. Hannah TerpstraMarch 20, 2014 9:07 pm

    Thank you so much for stopping by Shannon! Glad these will be helpful for you! I'll be popping over to visit you shortly! :)

    ReplyDelete
  27. Hannah TerpstraMarch 20, 2014 9:08 pm

    Thanks Mary! Yes I definitely like the footer idea too! From what I am reading it can be an awesome way to keep readers sticking around and get them connected to other posts! :)

    ReplyDelete
  28. These are great! I'm new to blogging and have been wanting to add some of these things to my blog. I think this will help me out a ton! Thank you!

    ReplyDelete
  29. Angela @ Life in VelvetMarch 21, 2014 10:53 am

    Such great tips! I absolutely love your blog and all of the design elements! I pinned this and plan to go back and do several of these over the next couple of weeks :) Thanks so much for
    linking up at Thursday STYLE! Have a
    great weekend!

    ReplyDelete
  30. This is awesome! thanks for posting these great tips!

    ReplyDelete
  31. That's funny, my husband says I'm "intimidating" when I talk about web design. I think that's probably the only way I have left to intimidate him!


    I'm following via Blog Lovin' - thanks for these tips!

    ReplyDelete
  32. Jen St Germain LeemanMarch 23, 2014 10:27 pm

    Thank you for your fab advice! SO glad I stopped by from the Weekend Blog Block Party.

    ReplyDelete
  33. Thanks for all the great info and the links on how to.

    ReplyDelete
  34. I'm a huge fan of Rhonna's and I use the app for all of my blog graphics too! Can't wait to try these tips!! Thanks.

    ReplyDelete
  35. Great tips! Pinning for later. Happy SITS day!

    ReplyDelete
  36. Thank you for these tips! I will certainly share. I've already incorporated some into one of my blogs! Happy SITS Day!

    ReplyDelete
  37. Can't wait to check out these tutorials! Happy SITS Day :)

    ReplyDelete
  38. This is an excellent collection!! I'm going to share on twitter!

    ReplyDelete
  39. these have been so helpful I am absolutely useless at HTML!

    ReplyDelete
  40. Thanks for this post! It was a huge help, especially considering how bad I am with HTML and all that jazz. :')


    x


    http://beckythewallflower.blogspot.com

    ReplyDelete

I love reading your comments. I always respond but tend to reply to your comment rather than email. I hope you'll check back for my response!

UA-45077507-1