Luckily (for me and you) I found a solution to the blank code box.
For this Blogger Blog Button and Code Box tutorial, you'll need:
- An image to represent your blog
- A website to host the image (I use photobucket.com)
- A Blogger blog (This tutorial is to solve a very specific problem with Blogger's platform.)
First, upload your image of choice to your image-hosting website. Then, find the Direct URL of the image. On photobucket, this is in the lower right-hand corner. Once you've found it, remember where to find that code and open a new tab. In this tab, go to Blogger. Click on the blog that you're working on.
From there, the box will update and allow you to configure your text. Add a title, if you'd like. Then, in the upper right hand corner above the text box, click on "Edit Html."
In there, copy and paste the following code:
<center><a href="Your Blog URL" target="_blank" title="Your Blog Title"><img alt="Your Blog Title" src="The Direct URL of Your Image" /></a><center>
</center><center><textarea id="code-source" rows="3" name="code-source"><a href="Your Blog URL" target="_blank" title="Your Blog Title"><img alt="Your Blog Title" src="The Direct URL of Your Image"/></a></textarea></center></center>
You'll see the phrases Your Blog URL, Your Blog Title, and The Direct URL of Your Image (which you found on the image-hosting website earlier in the tutorial) in the block of code. I've highlighted them here for visibility, but they don't need to be highlighted in the code. These, you'll need to substitute with your information... like filling in the blanks. Be sure to leave the quotation marks around these phrases! After filling in all the blanks, go back to the upper right hand corner of the text box and click on "Rich Text." There, you'll be able to see what the code will actually look like. If it doesn't work, don't fret! A bit of code or a quotation mark might have accidentally been deleted. Just delete, copy and past the original code, and start over.
If everything looks good, then click save. I hope that this helps someone! I was so frustrated after trying code after code without success, when the actual problem was where I was putting the code. I'm not an expert at html by any means, but I just got lucky experimenting with ways to make this baby work. If you have problems or questions with the tutorial, leave it in the comments. I will try to help (but, like I said, I'm no expert at html.)
I'm happy to announce that A North Star in an Eastern Sky is participating in Blog Button Swaps! (Hence, the reason that I even had to figure out how this code works.) If you're interested in partnering with me, check out my advertise page.