Blog design & html tips - How to make a blog button

April 1, 2012


My last html-help post was quite a hit so I am planning to keep doing this series until I run out of ideas. If anyone has any suggestions on things they'd like to see a tutorial for, please leave a comment!

Today i'm going to show you how to make a blog button! Its quite simple and I usually make mine in Photoshop, but i'm aware that not everyone will have it, so after searching the web I found a free alternative. Well, actually, I found Picnik which is shutting down this month...then I found a newer/better tool, woohoo!

♥ Firstly you will need to decide if you want to create your button with a photograph, or if you would prefer a text-only button. If you want to use text only, I created a blank base which you can download here (just right click --> save as, on the blank white image)

♥ Next, go to the website we will use to create the button --> http://www.picmonkey.com

tutorial image
♥ Click on the "edit your photo" banner and choose the photo (or the blank button if you want to use that instead) to upload to their website.

tutorial image
♥ I chose to use a photograph - don't worry if its super big we'll fix that later.

tutorial image
♥ From the menu on the left side of the screen, click the first icon "basic edits". Then we will be choosing the crop option. How much you decide to crop the image depends on how you want your banner to look, some people prefer square buttons but I like mine to be rectangular. Decide on how you are going to crop it and click apply. (if you are using the blank white button, skip this step as I already cropped and resized it to a suitable size!)

tutorial image
♥ Time to add the text! Click the "P" icon on the menu (fourth from the top) Here you are given a list of fonts and an empty box to write your text into. Play around with a couple of different fonts, sizes and colors until you find one that suits. (I apologize that I didn't screen cap this part, but its pretty easy so I didn't think I needed to! The font I used for my button pictured above was Sue Ellen Francisco)

tutorial image
♥ This next step is completely optional, but if you think your button looks a little too minimal, you can add a cute little shape to jazz it up a bit! To add one to your button, click the "overlays" icon which is the fifth one down. Choose your shape, color and adjust the height to suit! I would recommend keeping these to a minimum if your button has a photograph. My button looked a little too bare on the bottom so I added a butterfly in a very light coral color, so it didn't distract the eye too much.

tutorial image

♥ Now you're almost finished! We need to resize the button by clicking the first icon, basic edits, again. Click resize and set your width. I usually keep my blog buttons between 180-220. Today I set mine to 200px wide. Make sure the "keep proportions" box is ticked then click apply.


♥ Congrats, you're all done and have made a button for your blog! Just click the save button at the bottom to save the button to your computer.

♥ To post your button somewhere on the web just upload it to an image host like http://imgur.com. Copy the "direct link" URL and from the following code, replace the IMGURL with the direct link to your image. Also replace BLOGURL with your blog/website URL.


♥ If you want to place your button in your sidebar and include a code for your readers to share it (like I have in my sidebar) then just use the following code, replace IMGURL/BLOGURL as above and remove all *'s from the code.


♥ I hope this wasn't too hard to follow...happy button making!

xoxo

14 comments:

  1. Thanks so much for sharing this, so nice to see people sharing tips and tricks! xx

    Visit The Other Side Of Cool
    Tweet me! @othersideofcool

    ReplyDelete
  2. Thankyou so much for doing this! Please could you do one on how to get your photos closer together (in the sidebar and in your post) and how to do the footers at the bottom of your posts! Thankyou :)

    ReplyDelete
  3. I owe you a big big THANK-YOU! for posting this - i've been looking for an easy-to-use/good online photo editor for ages and this site is great! Thanks. :-)

    rachelpan xo

    ReplyDelete
  4. thanks a lot!!! a friend of mine told me about this blog, and not only did i love it at once because its visually attrative but also is a great help for brand new bloggers like me!
    Im following u, how could i not?
    xoxo

    Mic (Argentina)
    http://mytrendyjournal.blogspot.com

    ReplyDelete
  5. Thank you so much for this post, I always struggle with buttons so this really helped me!

    http://www.dear-sweetlings.com

    ReplyDelete
  6. Thanks for sharing! It's pretty easy, but you'd be surprised how many people don't know how to do this!

    -Lindsey
    Et tu, tutu?

    ReplyDelete
  7. such a lovely tutorial, it really helped me out and I will definitely try it!

    ♥ http://fashionxfairytale.blogspot.com/

    ReplyDelete
  8. This is such a good tutorial!

    Pip x

    ReplyDelete
  9. Thanks for this it has given me alot of help!,i had never even heard of this website before!! xx

    ReplyDelete
  10. I'd love to know how you did your "posts by category" list. I've been wanting something similar. Also, do you know how to center the captions and titles of gadgets? Thanks!!

    AbernathyCrafts.com
    Yvette Norris

    ReplyDelete
  11. All of these HTML posts are so helpful!
    thank you!

    Ditzydayreams.blogspot.com

    ReplyDelete
  12. Thankyou so much for writing that post it's been so much help for me!Just made a grab button now,please check it out!

    www.thesecretmakeuphoarder.blogspot.com

    ReplyDelete
  13. OMG this post has been so helpful and picmonkey is fantacti! thank you so much!

    ReplyDelete