Blogger Blog Button and Code Box Tutorial

I wanted to add a blog button to my sidebar with a code box for sharing; however, each code that I tried resulted in a blank code box! I was so frustrated. After lots of Googling and trying lots of tutorials, I began to notice that lots of people were commenting that they had the same problem on Blogger. The code box would hold text, but not code. Also, if the text box was in a regular post then it would work perfectly. But, when the code box was in a sidebar widget it wouldn't hold code.

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.

On the left-hand column, select layout. Decide where you want your blog button and code box to live; usually, this is a sidebar. Click "Add a Gadget."A pop up will appear, from which you can choose gadgets. Usually when adding code to your sidebar, you select the "HTML/Javascript" gadget. DON'T DO THIS! Instead, select the "Text" gadget.
 

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">&lt;a href="Your Blog URL" target="_blank" title="Your Blog Title"&gt;&lt;img alt="Your Blog Title" src="The Direct URL of Your Image"/&gt;&lt;/a&gt;</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.