Design: How to make a blog/share button

As I run my own little design "business" and get a lot of emails regarding design tips and advice I thought it would be a great idea to start a new series (which I will post either weekly or twice a week) sharing  tips and a little 'how to' on blog design. As this is my first post of the series I thought I'd start off with a popular one...making and coding a blog button. 

Now most people think you have to have PSP or other fancy programs in order to create a button... you don't! It is an upper hand if you do though as you can create fancy graphics and a crisper image but even using good old paint will do the trick. I thought I'd show you an alternative to PSP however if you want your button a bit more fancy, its easily accessible too - Ribbet. Skip to step 4 if you already have a button and just need it coding.

1) Firstly you will need to create the base of your button. If you open up paint or a similar program you will need to make a blank shape (as Ribbet only allows you to upload & edit, not create). The standard button size is 200 x 200px but you can alter this to whichever size you require. (The circled numbers shows the size) Then click save.

Alternatively you can use your own image (e.g. of yourself, blog picture) and re size it to your desired width e.g 200x200px to then upload and add text/decorations on top.


2) Now you will need to go onto www.ribbet.com and select 'edit a photo', find the blank image you just created and you will end up on this screen shown below. You will see your blank shape in the main area. To add graphics/text click either of the circled links.



3) You can make all sorts with it, experiment with shapes, colours and sizes - if you sign up too (which is free) you unlock all of the premium features! Once you are happy with the completed button click 'save' at the top and double check the dimensions are 200x200 (or whichever size you created) and also make sure the format is png. Images are alot crisp and clear as png, I find jpg makes them blurry!


4) Once you have your button you will then need to code it up ready to pop on your blog for people to share. I upload my images to www.Tinypic.com - it's super quick as there is no sign up necessary. You will need to click 'browse' and locate your button, then keep file type: image and resize: default then click 'UPLOAD NOW!' You will then fill in a captcha form and end up on a page like below.


5) Copy and paste the first line of coding into a HTML/Javascript widget on your blog as shown below. You will need to replace the part of the code I have highlighted with your blogs URL. DO NOT delete anything else.


6) Once you have added your URL to the code you now have your button. However, you will need to use a little HTML in order to share the code with your readers. After the code you just pasted, write the following HTML tags which I have written in red. (Or just copy and paste the red bit below) REMEMBER this MUST go after the code you already pasted from Tinypic.

<br /><textarea> Once you have written or copied the red part above, copy NOT cut the original code, (without the tags you just wrote) and paste them after the tags. (Yes you will have the same code twice) You will need to close the text area by adding the red HTML tag below after ALL of the code (so it will be the last word in the box).
</textarea> 7) It should look like this but with your own HTML code/URL. As you can see inbetween the two codes is the BR and textarea tags, then after the whole code is the closing of the text area (which is the part your readers copy and paste)



All you need to do now is click save and voila you just created your own button with a copy code! If you enjoyed this tutorial or it helped you in any way please leave a comment below. I'd also love to hear any suggestions for future tutorials or if there is anything you're stuck with I'd love to help.

Alternitavely I create buttons on my design shop here for £5.

7 comments

  1. Great post! If I ever want to create a button for my blog, I know where to come! :)
    Amy | http://amysbeautyjournal.blogspot.co.uk/

    ReplyDelete
  2. I know where to come now, when creating another one! I got so stuck last week and it took about a week to finally get a button onto my blog!

    Good post,
    Zofia xo
    (littlemisspradaxo.blogspot.co.uk)

    ReplyDelete
  3. What a great post! I shall have to bookmark this as I sometimes have people ask the best way to do it and I can't explain things for toffee!

    Thank you so much for linking up with the I Love My Post Hop.

    Sarah
    Life in a Break Down
    xx

    ReplyDelete
  4. This is so helpful! I'm having problems getting the text to show up underneath though....I've followed your instructions to a T but mine won't show up...any suggestions?? Thanks for this great tutorial though :)

    ReplyDelete
    Replies
    1. Hello :) You're welcome! Sometimes if you edit the code or preview before publishing the second code which you pasted in between the textarea tags disappears so you will just need to re-add it in between them again :) x

      Delete
  5. some very helpful tips, I am trying to learn all I can to make my website top notch. I came across some really impressive wordpress portfolio themes that really enhanced my pages look and its little things like this that can really add those extra touches

    ReplyDelete