July 27, 2011

How to Make Your Own Blog Button

One of the best ways to get your blog noticed is to make a blog button. A blog button is a small image that fits in your sidebar that gives the title of your blog and when clicked, links directly to your blog. It really isn't very helpful to put your button on your own blog since anyone that sees it is already at your blog. However, if you put the right HTML code below your button, your readers can copy the code, paste it onto the sidebar of their blog and have your button show up on their blog. It's basically free advertising. Here's an example of mine:






<center><a href=http://www.blogdesignsbydani.com/><img src="http://bdbd.blogdesignsbydani.com/Dani%20Button.png"/></a></center>


Want to learn how to make one yourself?

To start, you will need some type of graphics editing software. I usually use Photoshop, but this tutorial will be using Pixlr, a free online program that is quite comparable to Photoshop. (You do not have to download any software to use Pixlr.)

Remember to click on an image to enlarge it.

1. Go to http://pixlr.com. Click "Open Photo Editor".
2. Click "Create a New Image" from the pop-up screen.
3. A window will pop-up allowing you to choose the size of your image. This is up to you. My button is 125 x 125 pixels. If you want something more rectangular, you could do 150 x 100 pixels as you see below:


Click OK and your new blank image will open.

4. This next part is up to you. You can design your button however you like. I do suggest that you make your button match or at least be similar to your blog header or overall blog design. This is an advertisement, so show them on your button what they can expect to see on your blog.

If you do not need help with the design, skip to step 5.

If you would like help, follow me as I create a button for a fishing blog.
For this design, I used a digital scrapbook kit by Crazy-4-Monograms called "Big Catch". To add elements from her kit, I did the following:

4a. Click "File" (from the black menu at the top) and then "Open Image" (Ctrl+O). Select the image you would like to use in your design. Repeat this for all of the images you would like to use on your button. Here's what you might see:


You may need to rearrange your windows so that you can see your blank button image. (Use the Navigator box to zoom in and out of your images. Just slide the lever to the left or right. Also, use the bottom right corner to resize your image windows.)

4b. Notice that my fishing button has a thin blue border around it. To get this, I filled the first layer on my button with the blue color you see below. To do this, click on the Paintbucket tool and click anywhere on your image.
  To choose the color you are using to fill the background, click on the big color rectangle. A window will pop-up allowing you to change the color. Click anywhere in the outer circle to change the hue (the color). Click anywhere in the middle diamond to change the saturation (how light or dark that color is). When you are done, click OK.


You will have to click on your image with the Paintbucket tool for your background to match the new color you chose.

4c.  Now you will need to transfer your images one by one onto your button image. Each image will create a separate layer on your button image. The Layers box will show you each of the layers as we add them.

I'm going to start with my wavy blue paper. To copy it to my button, I need to select the window with the wavy blue paper and click "Edit" and then "Select All" (or Ctrl+A). Once it is selected, choose "Edit" and then "Copy" (or Ctrl+C).
Now go back to your button image. Click "Edit" and then "Paste" (or Ctrl+V). The wavy background should appear on the image and as a separate layer in your Layers Panel.
4d. Because the original wavy paper was so much bigger than my button, the pattern shows up way to big for my button. To shrink it down, click "Edit" and then "Free Transform" (or Ctrl+T). You should see a box around your entire wavy paper image with a little blue square in the top left corner. Hold your mouse over the blue square until you see a double arrow. Click with the double arrow and drag your image down until it is small enough to fit in your screen. You may need to slide it up and then re-size it again.


Make sure that you use only the corners to adjust the size. Otherwise you will distort the image. If you find that the shape does not match the shape of your button, i.e. it is too long on one side, you can cut out the part you don't want.
I moved the wavy pattern with my arrow keys on the keyboard until it was positioned so that my background color showed up around the edges.
4e. To trim the bottom of my wavy pattern, I clicked on the Marquee tool and then clicked and dragged to make a rectangle on the bottom of my image where I want to cut off the pattern.
 Once it is selected (dotted lines are in place), click Delete. To remove the selection, click "Edit" and then "Deselect All" (or Ctrl+D).

4f. The steps to add all of your other images are pretty much the same. However, let me show you how to add effects like shadows. Below you can see that I have added all of my graphics. I now want to add a shadow on the fish to make it stand out. With my fish layer selected, I am going to click on the "Layer Styles" icon at the bottom of the Layers box. It is a square with a star in the corner.
A window will pop-up. To change the Drop Shadow, click on "Drop Shadow" and adjust the levels to your liking. When done, click "OK".

Your button is now done and ready to be saved!

5. To save your button in Pixlr, go to "File" and then "Save". Save it to your Computer, Enter a name for your button and then choose a format. I recommend saving your image twice. The first time, save it as a PXD (a layered Pixlr image). This saves all the layers and styles that you added to your image. The second time, save it as a JPEG. This will flatten the image (remove all the layers) which you need to put it on your blog. (Once you hit OK, find a folder on your computer to save it to.)

 

6. Before we can post this button to your blog, you need to upload it to the web. To do this, you need an image hosting site. Photobucket is a great image hosting site that is free and gives you plenty of storage. Set-up your account by following the instructions on their site. Once you are logged in, click the green "Upload now" button. Click the green button "Select photos and videos" and Browse to find your jpg file. When the image is uploaded, click the small box next to the file name so that there is a check mark. Then click "Choose action" and select "Generate link codes for selected".

 A window will pop-up. Click in the box that says "Direct link". This will copy the link code so that you can paste it in the next step.
(If you accidentally saved the image before getting the link code and you are now in your album, hover your mouse over your image until a list of options appears below the image. Click the code next to "Direct Link". Clicking this automatically copies the link for you.)

7. Time to go back to your blog. Go to your Design page from your Blogger Dashboard.  Click "Add a Gadget" from your sidebar. In the pop-up window, choose "HTML/JavaScript".

Paste the following code, changing the part in red to match your blog button codes.


<center><a href="Your Blog Address"><img src="Your Direct Link (the code you pasted from Photobucket)"/></a></center><br/>
<center><div style="border: 3px solid black; overflow: auto; height:
125px; width: 125px; color: black; background-color: white;"> &lt;center&gt;&lt;a href="Your Blog Address"/&gt;&lt;img src="Your Direct Link (the code you pasted from Photobucket)"&gt;&lt;/a&gt;&lt;/center&gt;</div></center>

Here's what it would look like if for my blog:


 Click "Save" and then "View Blog".

Your button appears with an HTML code box below it for others to use to place your button on their blog!


Did this work for you? Let me know how you did!

29 comments:

  1. You are amazing. Thank you so much for the help.

    ReplyDelete
  2. Did anyone have trouble with the code working on your blog? I added an extra bracket near the end of the code that I wasn't supposed to. I fixed it now, so take a look at the code again if it didn't work for you the first time.

    ReplyDelete
  3. UPDATE
    I tried again and this time did not use the direct link but instead used the embed link option on Picasa. That worked. Dani please check it out to be sure it looks correct. Thx for the help.

    ReplyDelete
  4. Overflow here, sorry about that. I tried again as my html box also had the image inside of it. This time I used Photobucket. I would like the html box text to be smaller or not be so bold. Is that possible? Thx again.

    ReplyDelete
  5. gail,

    Your button looks great! So glad you figured it out. I have not tried Picasa yet but have been meaning to.

    To modify the box, change the part that says 3px (after border:) to 1px or 2px to make it skinnier and more than 3 to make it fatter.

    To change the size of the box, you need to change the height and width. The HTML I gave you is for a box 125px wide by 125px high. So find the part that says "height: 125px; width: 125px;" and change the numbers only. Make sure you keep all the colons, semicolons, and px.

    The code I gave you is not making your text bold. I'm not sure how your blog works, since it isn't Blogger. But, if you are able to change the HTML yourself, you need to find the part that says: "#blog_right #sidebar2 ul li". Under that section it says, font-weight:bold;. Change the word to bold to normal. This will change more than just your button though, so if you want other parts of your sidebar to be bold, do not change this.

    Does this help?

    ReplyDelete
  6. Thx Dani
    I changed the code to a 2 then a 1 and it didn't change the font size. Revisiting the code tells me the change is still there, just not working out. I suspect it may be an issue with my theme. There are a few challenges that can come up from time to time.
    I like the button, although creating w/the layers was too challenging for me. Good practice for with the the new tool, Pixlr.

    ReplyDelete
  7. Hi Gail,

    Changing the code to a 2 or a 1 will only change the width of border around the box. Sorry, I didn't explain that clearly. Changing the font size will have to be done with your actual blog, not the code I gave you.

    I'm glad your button worked out. It looks great. I'm glad you got some practice with Pixlr, too!

    ReplyDelete
  8. Hi Dani, I just put a blog button on my blog. The code works great! Thanks for the great tutorial on how to add it. I always wondered how bloggers did that so I was thrilled when I came across your blog.

    ReplyDelete
  9. I'm so glad I found your blog. I've been trying to add my button for days from instructions from other website with no luck but after trying your instructions just once. Walla.....it works!!! Thank you.

    ReplyDelete
  10. Thank you!!! I've been trying all day with instructions from other websites and none of them worked for me! I tried just ONCE with your instructions and it worked PERFECTLY! Not sure what I did wrong with the other ones, but thank you so much for your instructions!
    God bless!
    Yasmin

    ReplyDelete
  11. I had tried to build my button with other tutorials and the html code was never quite right and it appeared funky on my blog. Now I used your advice to fix it and it works great - Thank you!!

    ReplyDelete
  12. This worked great! Thank you so much!

    ReplyDelete
  13. Such clear directions! Coudnt have done it with out your help!

    ReplyDelete
  14. Yeah! Thank you so much! Your directions were very clear. I was able to make my own blog button and put it on my blog. Thanks again!

    ReplyDelete
  15. OMG! That was great! Thanks so much. I am in no way smart when it comes to this kind of thing but I was able to do no problem! Thanks again so much!!!

    The Busy Busy Hive

    ReplyDelete
  16. Thank you so much for the step-by-step instructions for newbies like me. I am having problems on the last step. My button looks huge on my blog (mrsgarciascorner.blogspot.com). I would really appreciate any assistance in shrinking it down to size.

    ReplyDelete
    Replies
    1. Look at the size of your file. Adjust the size (while keeping everything proportional) so that the image is smaller and then save it and upload it again. What software are you using to create the image?

      Delete
  17. I followed the directions on your blog and made the height as well as the width 125. I will redo it all again. Thanks for such an awesome and helpful blog. You make it very easy for me to try a whole bunch of techie things I would otherwise feel to overwhelmed to try.

    ReplyDelete
  18. I forgot to mention I am using pixir.

    ReplyDelete
  19. I redid it as you suggested Dani, and everything worked out great! Once again thanks for all your support and such helpful information.I will be trying out lots more stuff as soon as summer vacation starts.

    ReplyDelete
  20. I wanted to as the new blogger has changed, and I followed all your steps, but when i go to the layout page and press "Add a gadget", there were no buttons saying html.

    ReplyDelete
    Replies
    1. Keep scrolling, it should be there. It says, "HTML/JavaScript" :)

      Delete
  21. Thank you very much. It worked well. First I wasn't able to see the picture, just the HTLM-script underneath, but this was because I pasted the ( ) next to the red "the code you pasted..". After I eliminated that, it worked perfectly.
    I created the picture on word 7 and uploaded it on Photoshop. Brought it to the right size, loaded it up to Photobucket and followed your instructions.
    You are a genius!

    ReplyDelete
  22. Just found this post! Thanks so much for your help with this. I've been trying to make a button for my blog for a while, but could never figure it out! Your directions were very simple to understand and worked wonderfully! Thanks again!
    Jess

    ReplyDelete
  23. Wow! This is so useful and easy to follow, thank you! xx

    ReplyDelete
  24. THANK YOU SOOOOOO MUCH! YOU ARE REALLY AN EXPERT!

    ReplyDelete
  25. THANK YOU SOOOOO MUCH, YOU ARE REALLY AN EXPERT. VISIT MY BLOG HTTP://WWW.WILLOWARTSTUDIOS.BLOGSPOT.COM. TO SEE THE RESULT! LOVE IT

    ReplyDelete
  26. Dani you are a legend! Tried someone else's instructions the other day and I couldn't get it to work. This was so easy! Thank you, thank you, thank you!

    ReplyDelete
  27. I've used so many of your tutorials for my new self done blog design. So sad you are no longer posting!

    ReplyDelete

Thank you so much for leaving a comment! I would love to answer everyone's questions, but I am a busy mama. I will try my best, but technical questions that require me to study your blog's html are very time consuming for me. I may not be able to answer all of these comments. If you are a reader that knows the answer to a question, please help your fellow readers by offering your advice.