Make your own Blog Button and Grab Box

How to make a blog button/grab-a-button box:
1. Create a 150X150 pixel image using picnik.com (or any other design program, I prefer Picnic & Microsoft Powerpoint). Picnik is great because it’s free and it sizes your images as pixels which makes it easier when you are designing images for blogger. Here is a great tutorial on how you can use picnik to make buttons/designs.
2. Save as a png. Png files are not good for printing but they are the best (that I’ve found) when it comes to viewing an image on the web (Never save your design as a jpeg! see above).
3. Upload image to imageshack.com ({also free} – or any other file sharing website) and copy the “direct link”.
4. Insert all of your information (blog address, image shack direct link, blog name)  into the highlighted sections of this code (the first code makes the button, the second one makes the grab box, place both codes and you will get both).

<center><a href=”http://sewcraftcreate.com/” target=”_blank” title=”Made by Heidi“><img alt=”Made by Heidi” width= “150″ src=”http://img413.imageshack.us/img413/251/blogdesign101.png” /></a></center><center><textarea id=”code-source” name=”code-source” rows=”3″>&lt;center&gt;&lt;a href=”http://sewcraftcreate.com/“&gt;&lt;img border=”0″ src=”http://img413.imageshack.us/img413/251/blogdesign101.png” width=”125″/&gt;&lt;/a&gt;&lt;/ center&gt;</textarea></center>

5. Copy the code. Sign into your blogger account and go to “design.” Click on “add a gadget” in your column. Click on “HTML/javascript” and paste the code into that box. Save. View your blog and admire your new button/grab button box! 
6. If you wish to add your button/grab box into a post, open a “new post,” click on “edit html” and paste the code into your post box. Then click “compose,” you should see your button/grab box. Publish your page and voila!

 Caution: Be really careful when altering code. If you remove anything that you shouldn’t (even a simple back-slash or you accidentally add a space where you shouldn’t), your code won’t work correctly.

Comments

  1. Steffi says:

    It is nice to see you offering help to people wanting to design their own blog. If you want any help answering some of the questions I would be happy to help in it (I am a free lance web developer).

    Also I wanted to share that although png are more crisp, they are also normally 4-5 times the file size of a jpg. So if your blog has lots of images consider a mix of png and jpg so that it does not take a long time to load up your blogpage when someone visits. (especially for large background images)

  2. Cole's Corner says:

    Thank you so much for doing this!
    I'm awful exciting about learning more about it!

  3. Heidi says:

    Steffi-

    Awesome! Thanks so much for the tip! I really appreciate your taking the time to comment, my readers thank you too! :)

    Feel free to chime in on any other topic I post on this week! :)

    Thanks again,

    Heidi

  4. Nora says:

    WooHoo! Doin' a lil dork dance. I made a button & I've been wanting to do this FOR FLIPPIN EVAH! *LOL* Thanks so much, Heidi, for the fantastic TUT!
    ♥hugs♥

  5. Shauna says:

    I have to say thank you so much for this tutorial. I have tried so many times to make my own blog button, without any luck. Then I found your blog & yeah, I finally did it! Thanks again for sharing this informative yet simplified tutorial. I just became a new follower.
    Shauna
    http://myshaenoel.blogspot.com/

  6. james says:

    thank you for this tutorial. i made my first button. i'm so excited lol.

  7. Mel the Crafty Scientist says:

    Love your tutorial – only recently found it, but I included it in my roundup of tutorials for making blog buttons here: http://www.thecraftyscientist.com/2011/06/roundup-blogging-resources-blog-buttons.html. Check it out if you want and please take a featured button! : )

  8. Mandy says:

    Thank you so very much for all of your tutorials. I just figured out through this how to link to a website through a sidebar photo. I also learned through your signature tutorial how to make a line separating posts. Seriously, I had searched FOREVER for a tutorial on that last one. Yours are so clear and easy to follow. I really, really appreciate it! And, your blog is beautiful, by the way. Thanks!!

  9. Heidi says:

    Mandy,

    Great! I am glad you were able to use the tutorial! :)

    -H

  10. sarah says:

    so glad to happen upon your blog. i have wanted to try this for sooo long. can you offer any advice on getting you own web address? also, i have heard that wordpress is the safest way to always have your blog saved? any thoughts on this? xo, sarah (sorry not letting me post with my google account. you can find me here.
    http://www.littlecitizensoftheworld.blogspot.com or here.
    http://www.melondot.etsy.com

  11. Heidi says:

    Hi Sarah!

    Sorry it has taken so long to respond. I am about to have a baby (and move). Needless to say, things are a little crazy over here :)

    I would use google to secure your domain address. It is $10 a year and they do ALL of the work for you. Just go to "design" and then the "settings" tab and then to "publishing." You will see "need a domain? buy one now" link, click on that and it will run you through the entire process. It takes about three days to get it set up, so some of your content won't be available during that time. Just be patient and it will run beautifully within three days.

    I have heard great things about wordpress but I have not made the switch so I am not the nest person to ask. Sorry :)

    Hope this helps..

    -Heidi

  12. Lisa says:

    I've spent hours working on my blog button. I've tried 3 different sets of directions. Yours finally worked!!! Thanks you!

  13. sarah says:

    hi heidi, thank you so much for the response. i truly know the feeling of life everchanging. we just sold our house, my husband just got a new job, and we are searching for a new home 2 hours away from where we had originally planned to settle down again. and, we have 2 kids who kind of run the show.:)

    i wish you the best. please stop by my shop. http://www.melondot.etsy.com. perhaps your little will need a custom tee. and i will wait for you to begin taking new clients.

    enjoy your bundle. sarah

  14. Carol says:

    These are great tips! I enjoy reading through blogs especially when I learn something about blog design.

  15. sologake says:

    Great i like that, I really appreciate your idea, You have a best collection of designs …
    Vertical Jump Bible

  16. Mina Peek says:

    I went over this web site and I think you have a lot of fantastic info, saved to my bookmarks (:.

  17. plorderrgn says:

    Nice post. I was checking out continuously this web site using this program . satisfied! Very useful info especially the leftover area I keep such information a lot. I became searching for this type of data for years. Cheers and greatest of fortune.

Trackbacks

Speak Your Mind

*