Blogging 101: How to Make a Blog Button for Blogger
I am supposed to be working on something for my work which is due, but then once I start tweeking my our or our wedsite I just cant stop, so for the past 2 days I was changing our entourage pictures in our wedding website I found this cool and easy to use picture collage maker (will make another post about this), updated my blog with button from the cool sites that help me...then it struck me I should make a button for our wedding website..and Google was again to the rescue, after much trying from the different tutorials this is the easiest to follow.
Source: http://www.wikihow.com ( my inputs in ITALIC)
Blog Buttons (or badges) are becoming a very popular way to promote, track and link back to your blog. Here is a short tutorial on how to make your own blog button. These steps should be pretty easy to follow and they are only for those blogs who use blogger.
1. Find a picture that you like. Either a photo you have saved on your computer or you can draw a picture using paint or any other drawing program you have.
Since am making our for our wedding website I decided to use the clip art from our wedding stationary, I just cant get enough of the lovebirds
I found this easy to use photo editor http://www.online-image-editor.com/
and I was able to create these
2. Upload the photo to an online photo gallery service, such as Photobucket. Resize the image to 125 x 125.
You could also use Picasa whis is convenient if you're using Blogger
Copy the URL link by right clicking the picture
you're supposed to have something like this:
https://lh6.googleusercontent.com/-jEnXS5F6-Tc/UgRqTvJLgnI/AAAAAAAADEM/s1FbGzliY_g/s161/photo_name.png
3. Sign into Blogger.
4. Go to your design tab and add an HTML gadget to the place you want your button to show.
6. Copy this HTML code:
-
<a href="http://YOUR WEB ADDRESS/" target="_blank" title="BLOG TITLE"><img alt="BLOG TITLE" src="http://IMAGE WEB ADDRESS"/></a> <textarea id="code-source" rows="3" cols="13" name="code-source"> <a href="http://YOUR WEB ADDRESS/"><img border="0" src="http://IMAGE WEB ADDRESS"/></a> </textarea>
8. Replace YOUR WEB ADDRESS with your actual blogs web address
9. Replace BLOG TITLE with your blogs title such as Tips For Saving
10. Replace IMAGE WEB ADDRESS with your new image html.
remember the photo URL, this is where you paste it :-)
remember the photo URL, this is where you paste it :-)
11. Save all of your work and test to make sure it works!









