Blogging Tips & Tricks: How to make your own button and grab box

10:04 AM

Welcome back to 

Blogging Tips & Tricks
today I am talking about 

  • How to make your own BUTTON and grab box

To read the other tips and tricks you can find them all HERE
(just keep scrolling down to view them all)

Make sure you come back for these upcoming topics!!
{If you have any suggestions or topics you would like to see covered please
I would love to cover as much as I can!}

Here is what is still coming up....

  • Blogging Tips
  • Blogging Etiquette
  • Utilizing social networking
  • Commenting
  • Secrets I have learned in blogging
Let's get started...

If you are going to be interacting in the blogging world to any degree
it is important to have your own button. 

So, if you don't know how to make your own, here is how you can do that....

(This is also helpful for when you may need to make a button 
for another blog at a particular size)

First decide which size you want it to be. The most common size is 150x150

I will show you how I make mine using GIMP. Here are other posts that might help you with the basics of GIMP if you are unfamiliar with it.

Where to get  or use FREE design manipulation software HERE

Basic GIMP Tutorial HERE

Add your image, brush, or design and your wording

When you have achieved your desired look make sure you save as a JPG file.

Next upload to your photo host of choice. I use

Now this is where it can get tricky but it is not hard at all just do every step thoroughly
Go to your design page and click on "Add a Gadget"

Then scroll down the list and click on "HTML/JavaScript"

In that box you will want to add this code...
(you can just copy and paste this and then add your own links)

<center><img src="YOUR IMG URL" />
<textarea cols="22" rows="4" style="text-align: center;">&lt;a border="0" href="YOUR BLOG ADDRESS" target="_blank"&gt;&lt;img src=YOUR IMAGE URL AGAIN&gt;&lt;/a&gt;</textarea></center>

to find your image URL find the image you uploaded to Photobucket and look for
"direct link
this is the code you will paste into that part.

When you add the code in and press save it should look something like this on your blog

make sure the button code underneath works for people who want to grab it

**BONUS TIP: (a little helpful blogging etiquette)
When sending another blogger your button for them to place on their blog...
send them the whole code, not just your image
The code that you see in the grab box is what you would send over to them. 
Then all they have to do is stick it into their HTML box 
instead of having to make an entire button for you.
(whenever you write or share anything with other bloggers it is always good bloggy etiquette to make it as easy for them as possible to share your work by sending your codes or html, they are more likely to want to work with you again!!!)

You Might Also Like

14 Thank you for your thoughts

  1. Thanks for this little tutorial! It helped me to update my featured button which was looking a little tacky. Thanks again :)

  2. I am going to pass this along to a friend who recently asked and I didn't want to make a tutorial for timely so thank you!! ;0

  3. I just came across your blog today. LOVE IT!!! I just finished reading this series of yours. Thank you so much for putting all of this information together. I have some work to do. I have things I want to change. I will be back. Thanks! :)

  4. I just realize that I have a question for you already. How do you get the "Reply to comment" feature on blogger?

  5. Thank you so much again, I just did it and it worked PERFECTLY! Amazing. Thank youuuu!

  6. Thank you so much for this but I still can't figure it out! I can't find the direct link. Grrr!

  7. Oh yay! I had to start an account with photo bucket but it finally worked! Hallelujah!

  8. You made that sooo easy! Thank you! I got it to work the first time and I am so happy about that!

  9. Thank you for this, it was really helpful!!


  10. Thank you!! I tried this with flickr and with picasa and it wouldn't work, so I opened yet another photo sharing acct and it worked with photobucket on the first try! Thank you for your super easy instructions!

  11. This is really helpful! I'm not so good with html code yet - what parts do I delete to get rid of the text area? Thanks!

  12. hei, i love yout button works..great job!!
    would you like to be my friend?iam glad if you follow me back :)



Thanks so much for stopping by! Please leave your comments and looking forward to getting to know you!!



networked blogs

Popular Posts

Flickr Images

Contact Form

pop up