Recently, I’ve been asked for my Blog Button. I realized I didn’t have one. How terrible! A Blog Button is a Brand. It’s a digital calling card. It lets people know who you are and how to find you. It’s like having a Blog on speed dial.
Some Buttons are more detailed than others. Some are simple. But all are recognizable. I began scouting around for a photo or image I could use. Because Buttons are small in size in order to fit on a Blog’s sidebar (that column to the left or right of your main articles), I wanted something a little simple yet descriptive.
It took a little time, but I think I’ve captured the essence of who I am, and what my Blog is.
Anyone who wants to share my blog just needs to copy the coding text in the box under the photo, and post it to their own Blog! Their link will have just the photo, not the coding. How’s that for advertising?!
Now for the How-To’s. It’s really not at all as difficult as I thought it would be. In fact, I’m not a computer geek AT ALL (well, maybe just a little), so for me to be able to do this by my own research… that should definitely tell you this is easy-peasy!
1. Choose your image. Make sure you have the rights to the photo, or have paid for licensing (my Button image came from Shutterstock, I added the personal photo and all text). Save it to your computer desktop. Even if you have it in your digital photos, I recommend saving a second copy to manipulate without fear of losing the original.
2. Find an online photo editing service. I like Photobucket. It’s free. It’s easy. It allows for creative editing and photo correcting. Create an account if you haven’t already, and upload your image to your online album for editing. Be sure to save when you’re finished. [You can also edit the photo on your computer if you have Photoshop or PowerPoint. Upload the finished image to your online photo album.]
3. Open the image online and make sure it looks like you want it to. THIS PART IS REALLY IMPORTANT! Make sure to save your image to a small size. Buttons are typically 150 x 150 pixels. Most sidebars allow for 200 pixels so you definitely don’t want anything wider than that or it won’t fit. Resize your finished image, and save it to your online album.
4. Open the image again. You’ll see a box list of coding. Select the “HTML code” and copy the entire code. Paste it into a Word Document. [In the image below, this is identified as "Original Coding'].
5. Between the first two quotation marks (“), delete the link and replace it with your Blog home address. Otherwise, it will link back to your online photo only. [In the image below, It's highlighted as "YOUR_BLOG_HOME_HERE" for your example.]
6. Directly underneath all this code, you’ll want to add the Additional Coding. [In order for you to visibly see it, I had to post it as a photo image. Otherwise, it would act as code, which isn't helpful for learning.]
7. Where the red link and highlights read “ENTIRE_ABOVE_CODING_HERE”, delete whatever is between the two quotation marks (“) and replace it with the ENTIRE original coding. Make sure the two coding sections are right on top of each other. [See the last section in the image above: “END CODING should look similar to this:”
8. I recommend saving this coding in a Word document for future reference. You can use it as a template for making more badges and buttons for your Blog.
9. To add the Button to your Blog: add the text in HTML format for either a Post or a Widget, and save.
10. If you add it as a Blog Post in HTML, do NOT revert to “visual” post editing before saving. This will invalidate some of the HTML and you’ll have to re-add the coding to make it work.
That’s it! I hope this keeps you from experiencing the headaches I had when trying to find this information. Please let me know if this helped you or if you had problems with my instructions.
And Frankly, My Dear… that’s all she wrote!