Wednesday, 20 March 2013

How to make a blog button (with a grab box)

Ever since I did a tutorial on how to create a blog header using picmonkey I've had lots of people ask me to do a tutorial on how to make a blog button, one with a grab box as well. Its super easy, follow these simple steps and you can achieve a lovely blog button!



1. Head on over to picmonkey (a bloggers best friend!) and open up an image in it. I usually go for a plain white background but choose any colour you like. Just type in whatever colour you want, for example red followed by background in the image search: red background.


2. One of my favourite things about picmonkey is that it enables you to resize your pictures really easily! I tend not to click 'use percentages' or 'keep proportions' as this enables me to type in whatever 2 numbers I like. I chose 250x200 a pretty good and standard size for a blog button, pick a size to suit your sidebar, you can always resize it if you are putting it on someone else's blog!


3. Next is the text! Picmonkey offers so many different fonts and there are lots of lovely ones that are free as well! This is just an example but play around with different ones until you find one that you like. 


4. Then if you like you can frame your image, unfortuately picmonkey don't offer too many free frames but you can do some simple but effective things, I rounded the corners on this blog button.


5. Then one of the most exciting parts is clicking onto the overlays page! There are tons and tons of free overlays and there are so many different ones. Just like the font play around and find ones you like, or don't add any at all, its up to you! There are lots of other things you can do on picmonkey, I thought I'd just show you the main ones, the ones I use the most often.

6. Then all that's left to do on picmonkey is to save your button, the most important step!

Now we move onto making the HTML for your blog button! I'll start with just the HTML for a normal blog button, no grab box.

<a href=" the link to your blog " target="blank" title=" your blog name "> <img src=" the direct link to your blog button image"0" /> </a>

Most of the above code should make sense to you, but maybe not the direct link part. This is how to find the direct link for your blog button!

I personally like to use tinypic for this part.



1. Go to the tinypic website and click choose file. It will then ask you to fill out one of those annoying spam word thingys but they are always super easy after you have clicked upload now!


2. It will then bring you to this page. Copy and paste the 'direct link for layouts' link and paste it into the appropriate place in the above code.

Then bob's your uncle you have the code for your blog button! 

Now I'm going to show you how to make up the HTML for the more useful blog button with a grab box! You can then put this on your blog and if people want to they can copy and paste the code so they can pop your button in their sidebar. This is also handy so you always know you have the code for your blog button.

HTML:

<div align="center" style="padding: 5px;"><img src="direct link to your blog button"  title="blog name" alt="blog name" /></div><textarea style="background:#f0f0f0;border:solid 1px #cccccc; color: #777777; font-size:100%; height: 50px; margin:auto; text-align: left; padding: 2px 0 2px 5px; display: block;  width: 200px;">&lt;div align="center">&lt;a href="the link to your blog" title="blog name"&gt;&lt;img src="direct link to your blog button" alt="blog name" style="border:none;" /&gt;&lt;/a&gt;&lt;/div></textarea>

Follow the same steps as above on tinypic to get your direct link, pop everything else in and there you go, you have your very own blog button with a grab box!

To add the HTML to your blog, go to layout, click add a gadget on the side of your blog that you want the button on, go to HTML/Javascript, copy and paste the HTML in, press save and then move the blog button to where you want it to sit in your side bar!

I really hope this post was helpful, let me know if you used it to make your own blog button in the comments and whether it was helpful!

Thanks for reading,
Shona x
SHARE:

10 comments

  1. What a great tutorial! I used Photoshop for mine, but picmonkey looks so fun I now want to make a new one!!

    Megan x

    ReplyDelete
    Replies
    1. :) I don't have photoshop and a lot of people don't either so thats why I showed people how to make one for free! x

      Delete
  2. This is a lovely tutorial and I'm sure it will help a lot of people. I too use Photoshop, but yes I agree it was a great idea to show people how to do it for free! xxx

    ReplyDelete
    Replies
    1. :) Thanks! I'd love to have photoshop but gawd its expensive! x

      Delete
  3. Thank you for the post lovely! Made a button a few days ago using a different tutorial and it didn't work. It's working perfectly now thanks! :) x

    ReplyDelete
  4. This is a fab tutorial xx

    http://beautyqueenuk.blogspot.co.uk/

    ReplyDelete


Blogger templates by pipdig