How to make a blog button to share
Ranked #3,504 in Internet, #196,282 overall
How to make a blog button with coding
Do you blog?
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
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
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 »
- 16 featured lenses
- Winner of 9 trophies!
- Top lens » Different Helps for IBS-C