How to make a blog button to share

Ranked #3,504 in Internet, #196,282 overall

How to make a blog button with coding

A blog button, have you ever heard of it before? A blog button is a picture or graphic that when clicked on will take the person to your site. A good way to get some traffic and advertise your blog is to offer your readers your blog button, that they can put on their site. So I am going to try and show you the coding for adding an interactive blog button to your site.

Do you blog?

Blogging. It seems like everyone is doing it now. If you don't currently blog, then I'm sure you know someone who has a blog. The term blog came originally from the term weblog, first used in 1997. A blog is generally an online journal or diary. It's a place where people can share their thoughts, ideas and personal history. People make blogs to share pictures and stories with families far away. They blog to sell a product, and some just like to write their thoughts online. Some blogs are open to anyone and everyone, and some are by invite only. And most people really enjoy the interacting that happens with blogs.

I personally started blogging over 5 1/2 years ago. We had moved to a new state and very small town. We are a homeschool family, and there was only one other family (at that time) in our little town that homeschooled. I was desperate for fellowship and interaction. I had read about a homeschooling blogging platform and starting thinking about wanting to blog. But it seemed so different, and I just couldn't decide if I should blog or not. Through the coaxing of a good friend, I finally started my first blog. I was excited and scared at the same time. What if no body wanted to read what I said? What if I never got any visitors?

Well, starting on the platform that I did was perfect for me. It was a homeschooling community, and one that I thrived in. I had women from all over the world commenting on my blog and me commenting on theirs. I didn't write about all that much that was exciting, just our normal days, but it was so nice. I felt like I was talking to some old friends, and they would encourage me with their kind comments. I didn't think much about networking back then, all I knew is that if I wanted to get comments and people to read my blog, I needed to read other blogs and comment on theirs. I have made some dear friends since my early journey into the blog world. And though the platform I now use for blogging has changed, the premise is still the same. If you want people to read and comment on your blog, you need to read and comment on theirs. And little did I know then, but that is one of the many online forms of networking. That is were a blog button comes in.

You can offer readers of your blog to put your blog button on their site. So when other readers are reading their blog, they see your blog button, click on it and they are directed to your site. Because most of us read and follow blogs that have the same interests as we do. So if you are into crocheting, and your friend is into crocheting, and you both share a lot of crocheting tips, tricks and stories. It would be nice to exchange buttons so that their readers can find your blog and you can find other blogs.

Blogging books

Loading

Getting a graphic

There are many ways to get a graphic for your site. You can find free sharing graphic and picture sites or you can make your own. Lots of times I will take a print screen of a portion of my blog site and then crop it in a photo editor to the size I want. That way my blog button matches my site. Most blog buttons are 125x125 in size, though you can make them any size you want.

Once you have a graphic, you need to upload it to a photo storage site like Flickr or Picasa. Picasa is easier to get the simple URL you will need in your coding. Both of these sites are free and you can sign up within a couple of minutes.

After you have uploaded the graphic, you need to get the URL link code. In Picasa you click on the photo and in the right hand column there is an area to click if you want to 'share the link'. Click on that, and then put a check mark in the box that says URL only. That will give you a clean URL code to put in your blog button code.

Photo Storage Sites

Picasa Photo Album
Google Photo Album
Flickr Photo Site
Flickr Photo Album

Blog Button Coding

To add the coding, after you have uploaded your picture to a photo hosting site you want to add an HTML widget to your blog and add this code into your widget.

This is a generic version of the HTML code you want to use in your widget box:

<center><a href="YOUR WEBSITE URL"><img src="IMAGE URL" height="84" width="150" border="0" alt="WEBSITE NAME" /></a>

<textarea cols="15" rows="4" wrap="virtual"> <a href=" YOUR WEBSITE URL "><img src=" IMAGE URL " height="84" width="150" border="0" alt=" WEBSITE NAME" /></a></textarea></center>


You would want to change the YOUR WEBSITE URL with your website's URL, the IMAGE URL with your images URL and the WEBSITE NAME with your website's name.

This is my coding so you can see what a finished product looks like:

<center><a href="http://wgcreates.blogspot.com/"><img src="https://lh6.googleusercontent.com/_rTcb2SaZsY8/TX2EuSDvFTI/AAAAAAAABag/Zmt0DZYoy20/s144/websitebutton.jpg" height="84" width="150" border="0" alt="watered garden creations" /></a>

<textarea cols="15" rows="4" wrap="virtual"> <a href="http://wgcreates.blogspot.com/"><img src="https://lh6.googleusercontent.com/_rTcb2SaZsY8/TX2EuSDvFTI/AAAAAAAABag/Zmt0DZYoy20/s144/websitebutton.jpg" height="84" width="150" border="0" alt="watered garden creations" /></a></textarea></center>

You will also want to change the width & height to match the size of your graphic. The graphic I made is 84x150, so I changed the width & height to match. If you make a more common 125x125 size graphic change the code to match that.

I have updated the coding listed here on April 5th, 2011. Some extra coding was in there that I didn't notice and it made the main code inoperable. This code should now work. Please let me know if it doesn't.

Watered Garden Creations - My Blog

Loading

Let me know if you use a blog button on your blog.

  • 2livelovelaugh Oct 31, 2011 @ 8:53 am | delete
    Thanks! It worked right away! I've been looking for the easiest way to do this and this is it!
  • djroll Apr 26, 2011 @ 3:43 pm | delete
    The image on your lense isn't showing - for me anyway.
  • WateredGardenCreations Apr 26, 2011 @ 5:50 pm | delete
    Thanks for letting me know about the image on my lens. I think I have it working now.
  • djroll Apr 26, 2011 @ 2:47 pm | delete
    I'm off to give it a try. Your conversation with agashimae I also find helpful.
  • agashimae Apr 5, 2011 @ 8:19 am | delete
    hi! i was wondering why it doesnt work for me i tried it with photobucket and flickr but it wont work... pls help me this is my blog agashimae.blogspot.com
  • Load More

by

WateredGardenCreations

My name is JoAnn. I'm a Bible believing Christian, married to the love of my life for over 16 years. I'm a homeschool mother, writer, web designer, b... more »

Feeling creative? Create a Lens!