Ginger Snap Crafts: teach me thursday {Making a Blog Button}

teach me thursday {Making a Blog Button}

Blog buttons are hard,
tough, pull your hair out,
who-comes-up-with-this-stuff,
keep you up all night kind of projects!
{At least it was for me!}

So this post is mainly for me,
just in case I ever forget
how I made my blog button.

I think I tried every how-to
out there but the one that
worked for me I found here.

First, you need an image.
An image size 125 x 125 works best.
That's the perfect size for a blog button-
not too big & not too small.


Post this image somewhere on your blog.
I'm making this button for our family blog.
So I just went ahead & added it onto
my first post way back in 2007.
After you've publish the post,
right click on the picture.
Select properties.
Then you'll see address/URL:
Copy that whole code.
You'll need it in a minute!

Now here's the html code that I use:

[center][a href="http://YOUR WEB ADDRESS/" target="_blank" title="BLOG TITLE"][img alt="BLOG TITLE" src="http://IMAGE WEB ADDRESS"/][/a][center]
[/center]
[center][textarea id="code-source" rows="3" name="code-source"][center][a href="http://YOUR WEB ADDRESS/"][img border="0" src="http://IMAGE WEB ADDRESS"/][/a][/center][/textarea][/center]

Where it says IMAGE WEB ADDRESS
you'll paste the address/URL code for your picture.
{Tip: Make sure you don't have two http:// in a row!}
[center][a href="http://YOUR WEB ADDRESS/" target="_blank" title="BLOG TITLE"][img alt="BLOG TITLE" src="http://2.bp.blogspot.com/-Uq2EjDkRyDE/Tb9rMsrDUfI/AAAAAAAAE-I/7ugPt6kkMN4/s1600/bowie+button.jpg"/][/a][center]
[/center][center][textarea id="code-source" rows="3" name="code-source"][center][a href="http://YOUR WEB ADDRESS/"][img border="0" src="http://2.bp.blogspot.com/-Uq2EjDkRyDE/Tb9rMsrDUfI/AAAAAAAAE-I/7ugPt6kkMN4/s1600/bowie+button.jpg"/][/a][/center][/textarea][/center]

Now were it says YOUR WEB ADDRESS type in the web address of your blog.
Since I'm making our family blog button, this will be bowiebunch.blogspot.com

[center][a href="http://bowiebunch.blogspot.com/" target="_blank" title="BLOG TITLE"][img alt="BLOG TITLE" src="http://2.bp.blogspot.com/-Uq2EjDkRyDE/Tb9rMsrDUfI/AAAAAAAAE-I/7ugPt6kkMN4/s1600/bowie+button.jpg"/][/a][center]
[/center][center][textarea id="code-source" rows="3" name="code-source"][center][a href="http://bowiebunch.blogspot.com/"][img border="0" src="http://2.bp.blogspot.com/-Uq2EjDkRyDE/Tb9rMsrDUfI/AAAAAAAAE-I/7ugPt6kkMN4/s1600/bowie+button.jpg"/][/a][/center][/textarea][/center]

Now you fill in the BLOG TITLE.
For me this will be Bowie Bunch.

[center][a href="http://bowiebunch.blogspot.com/" target="_blank" title="Bowie Bunch"][img alt="Bowie Bunch" src="http://2.bp.blogspot.com/-Uq2EjDkRyDE/Tb9rMsrDUfI/AAAAAAAAE-I/7ugPt6kkMN4/s1600/bowie+button.jpg"/][/a][center]
[/center][center][textarea id="code-source" rows="3" name="code-source"][center][a href="http://bowiebunch.blogspot.com/"][img border="0" src="http://2.bp.blogspot.com/-Uq2EjDkRyDE/Tb9rMsrDUfI/AAAAAAAAE-I/7ugPt6kkMN4/s1600/bowie+button.jpg"/][/a][/center][/textarea][/center]

Now for the last & most important step:

All of the front brackets [ will need to be replaced with < and all of the back brackets ] will need to be replaced with >.
Once you do that you will have an active blog button code.  When you copy & paste it as HTML/Java Script Box on your blog sidebar it should look something like this:




Bowie Bunch

 
Let me know if it works for you!

 







Fancy This

29 comments:

  1. That was useful! :-) I've never got around to making one, but now I don't have an excuse anymore. Thanks.

    ReplyDelete
  2. I can't wait to explore your blog! I LOVE the princess wand!! My daughter would LOVE that! I am following you!! :)

    ReplyDelete
  3. Hi there!
    I’m a new follower from the hop. I've also got a page on my site that lists more than 150 hops for each day of the week. Check under the header for the link to that page.
    I hope you’ll visit me soon and follow back!
    Have a great week.
    NCSue
    http://acts17verse28.blogspot.com/2011/05/lets-kill-captcha.html

    ReplyDelete
  4. hi following u back from 'a mom helping moms'-thanks for stopping by!

    ReplyDelete
  5. I so so SO need to do this...it took me forever the first time, and then the second time I had to look everything up again...

    great post - bookmarking!

    ReplyDelete
  6. You did a great job and I think it is great that you posted the directions so those that need to do this can from the instructions given.
    Thanks for visiting my blog from Thirsty Thursday and have a great day.
    I returned the bloggy love.

    ReplyDelete
  7. Great tutorial!! :)
    Thanks for stopping by my blog! I am returning the love!

    ReplyDelete
  8. THANK YOU SO MUCH!! I made one for my blog and it works. Your explanation made it really easy!!

    ReplyDelete
  9. So glad it worked for ya! I'm going to go grab it! :)

    ReplyDelete
  10. Great tutorial!! :) You have a BEAUTIFUL family, by the way!

    Brea
    www.becomingbrea.com

    ReplyDelete
  11. that was really cute and really useful! if you want, feel free to guest post on my site sometime!
    Following back!

    http://havesippywilltravel.blogspot.com/

    ReplyDelete
  12. I am new to blogging... what is this blog button for?

    ReplyDelete
  13. You can "grab" other people's buttons & put them on your blog somewhere. That way you can just click on their button & it takes you right to their blog. :)

    Hope that helps!

    ReplyDelete
  14. wow i've always wondered how to do this! too bad i just paid someone to make one for me lol....oh well, maybe i'll make another one for a link party or something

    new follower from boost my blog friday!

    ReplyDelete
  15. Ok I see! Great! Thanks for explaining :)

    ReplyDelete
  16. Thank you for all of your help!! I was able to create a button!! It took a while...but it worked.

    If you would like to see it here is my blog:
    http://craftybrooklynarmywife.blogspot.com

    Also, I became a follower too :-)
    Happy Mother's Day!!

    ReplyDelete
  17. Also, I'm stopping by from Truly Lovely Fancy This Fridays too.

    ReplyDelete
  18. Just browsing some of the blog hop blogs and I wanted to say hi! I will follow you as well. We also have a Facebook fan page at http://www.facebook.com/aiasdotca that you should check out! We always like and follow back, just leave us a note <3

    ReplyDelete
  19. This is so helpful Ginger, thank you!! I just popped over from Creative Crate's linky party.

    Your family is beautiful, and looks like it matches my 7 exactly! Ages and genders even look the same! =)

    Mara @ Super Savings

    ReplyDelete
  20. Just wanted to say thank you! I am new to blogging and have been scratching my head on how to create a button...This has helped soo much. I am looking forward to a break this week and plan to make a few!

    ReplyDelete
  21. great photo! thx for the steps :)
    here from NOBH - first timer!
    welcome to FHC :)) tea's on~

    ReplyDelete
  22. Great tutorial! Thank your for linking up at NOBH. I hope you will grab a button for your sidebar. Have a great day.

    ReplyDelete
  23. These are just about the best directions I've seen for creating a button. I'm still working on mine. I have the button but not the code. I have a Wordpress blog and I'm not sure if your directions will work on mine but I'm going to give it a try.

    ReplyDelete
  24. Hi! I found your site through the Tuesday Time-Out Hop. Please come follow me back at:

    http://healthykidshappykids.blogspot.com

    Thanks and have a great Tuesday!

    ReplyDelete
  25. Great tutorial! Please stop by www.laughloveandcraft.com and link up to my Share the Wealth Wednesday Link Party!

    ReplyDelete
  26. This is so helpful! I am bookmarking this for a future date, thank you so much for the tutorial!

    ReplyDelete
  27. Great tutorial...it worked great and was so easy - Thank you!
    I had been thinking about looking up how to make one this week...then yesterday I found your tutorial on It's a Hodgepodge Friday.
    So, no research need - Thanks again!

    ReplyDelete
  28. Thanks for stopping by my blog! I needed this info! Thanks for posting!

    ReplyDelete

Thank you so much stopping by Ginger Snap Crafts. I am so glad YOU are here. I so appreciate you being here & especially for your comments. They really make my day! :) If you have a question please leave it here, and I'll answer it in the comments. You can also email me at ginger at gingersnapcrafts dot com. For a quicker response feel free to message me on facebook. Hope to see you again soon! :)