Wednesday, July 16, 2014

How To: Create and Install a Blog Button

How To: Create and Install a Blog Button using PicMonkey
 One of the easiest DIY design elements you can add to your blog is a grab button. You can have one for your blog, or a link up, a series of posts on your blog, etc. For this tutorial I'm going with the blog button you'd typically want on your sidebar. I'll show you how to design one using a photo and then install it.
Go to picmonkey.com. Click on edit.
How To: Create and Install a Blog Button
 Pick the picture you want to use.
How To: Create and Install a Blog Button
 Click on 'crop'. In the expanded section type in your desired button pixels. I'm using a 250 by 250 for this one. And, click on 'scale photo'. Drag the little box you just created to crop the part of the picture you want, and then click 'apply'.
How To: Create and Install a Blog Button
 Now you've got your properly sized button background. I edited my picture's brightness at this point too.
How To: Create and Install a Blog Button
 Now the important part, add your blog name.
How To: Create and Install a Blog Button
 Along with any graphics. Since the text didn't pop enough I added a rectangle, set it behind the text, and faded it. Make your button pop in whatever way you want.
How To: Create and Install a Blog Button
 When you are all done save it.
How To: Create and Install a Blog Button

Now let's get your code! Open up your photobucket account, and upload your new button.
How To: Create and Install a Blog Button
 Then open up a new tab with a button code generator, I use this one.
How To: Create and Install a Blog Button
 Fill in those three blank sections with your blog name, your blog's web address, and your image url.
How To: Create and Install a Blog Button
 To get your image url hop back over to photobucket and click on the 'direct' option under 'links to share this photo' to copy it. Go back to the code generator and paste it in.
How To: Create and Install a Blog Button
 I leave the rest of the options alone personally. Then scroll down toward the bottom and click the preview button.
How To: Create and Install a Blog Button
 This is what your button is going to look like. Make sure it is a-ok and then click on 'get code'.
How To: Create and Install a Blog Button
 There is your beautiful button's code.
How To: Create and Install a Blog Button

So, how do you get it to your blog? Open up your blogger dashboard, and click on 'layout'.
How To: Create and Install a Blog Button
 Click on 'add a gadget' in your sidebar section, and then scroll until you see 'html/javascript'. Click that little plus button.
How To: Create and Install a Blog Button
 It will pop this up. Go back to your code generator and highlight and copy your code.
How To: Create and Install a Blog Button
 And then paste it into the 'content' box. I add a separate label to my sidebar items so I leave the 'title' section blank. You can, of course, type in 'grab my button' or 'take me with you' etc in that little box too. Then hit save, and drag your new gadget to the proper spot you'd like it to appear on your blog. Click preview to make sure everything is right, and then 'save arrangement'.
How To: Create and Install a Blog Button
 Now you should be able to open up your blog and see your shiny new button with a handy grab box below it!
How To: Create and Install a Blog Button
 And, that is all there is to it! Now go out there and make buttons until your heart is content. If you have any questions please don't hesitate to ask me. I'm happy to help in any way I can. This was a requested tutorial, so if anybody has a 'how to' they'd like to see send me an email or leave it in the comments - I'm definitely not an expert but I did all the design on this blog myself with a lot of elbow grease, trial and error, and google.

Check out my previous 'how to' as well: How To Create an Inspiration Board with PicMonkey.
post signature

15 comments:

  1. Thank you for this super detailed tutorial! Can't wait to try it out :)

    ReplyDelete
  2. Love it! This is the same method I used for creating my button :) I'm impressed you did all the design work yourself!

    ReplyDelete
  3. Wow!!!! You're quick girlfriend!!! Thanks for doing this tutorial!!!! I never even knew the code generators existed!!! Thanks for that little tip! Maybe that's where I was going wrong, trying to write the code myself. Ha! Thanks again!

    ReplyDelete
  4. Awesome job with this tutorial! I did the DIY route before and this is WAY better than the tutorials I used! Saving this in case (when) I forget how to do it!

    ReplyDelete
  5. This is a good tutorial, Courtney :-) I am not one to use PicMonkey because I use Photoshop for all my blog images, but I'm sure other people can benefit from this tutorial you made. I'll make sure to share!

    ReplyDelete
  6. Where was this a year or so ago when I needed to make my button!?! Great tutorial. I love how your font color is like a rainbow. How did you do that? Excellent tutorial. Insert hand clapping emoticon here. Ps I think I might take your button. You're a must read/must comment on blog. Means you should be on the ole sidebar.

    ReplyDelete
  7. Thanks for the awesome tutorial!! Saving this for when I want mine changed.

    ReplyDelete
  8. Such a great tutorial. Except, I have about 0 patience… Sooooo, can I recruit you the next time I'm in need of a button? :)

    ReplyDelete
  9. I really need to dig into pic monkey! Great tutorial!

    ReplyDelete
  10. THANK YOU thank you thank you! I am so lame in regards to anything computer related and this tutorial is SO easy and amazing! I was actually going to ask you how you made yours and this is perfect!

    ReplyDelete
  11. What a wonderfully detailed tutorial!

    ReplyDelete
  12. Great post! I ADORE your new button!!! Aria is such a cutie pie! :) Pinning to share your helpful tutorial with others! :)

    ReplyDelete
  13. LOVE THIS POST, Courtney! Will be using it very soon in the future as my current button needs a revamp!

    ReplyDelete
  14. This is just what I needed! Any idea if flickr is like Photobucket in regards to generating code? Just thought I'd ask :) Thanks!

    ReplyDelete

Thank you for taking the time to leave a comment! I love them oh so much. I respond via email so please be sure to have your email linked. If not check back for responses via the thread.