Hi guys! Now, obviously this is a book blog primarily. But I also have interests in other things…like cooking, television, animals, etc. One of those interests is learning more about blogging in general, specifically blog design elements. I don’t do a whole lot of work with that kind of stuff, but I find it fun to add my own special touches to my blog to make it more “me” — like my header & follow buttons that I designed myself.
Deciding to Make a Button
Recently somebody asked me to make a blog button for Tempest Books so that they could add me to their blogroll, so I went ahead and created a button (it’s hanging out of my left sidebar if you want to see!), and then realized that I was having some problems putting it on the sidebar.
Placing the image of the button by itself worked fine, but I wanted a box below the button to display the HTML code so that somebody could just copy + paste the code into their blogroll very easily. I’ve noticed that a lot of other blogs have this feature, so I really wanted to have it myself.
Figuring Out the Problem
Basically, I just Googled how to do it and found a great tutorial. But then it didn’t work, even though I followed the instructions exactly. Well, I decided to ask the writer of the tutorial for help, and she let me know that…
Adding a HTML code box below a sidebar button doesn’t work when you have the free version of WordPress.
Except when you use this little trick to do it! I bet that there are a lot of you out there who are using free WordPress (like me), and want to have their button’s HTML code available, so I thought that I’d share this so that you can make it happen yourself! And it’s SO EASY.
Code for Your Button & HTML Box
Just copy + paste this code below into your Text/HTML sidebar widget, and fill in the appropriate spots with your own information:
<p style=”text-align:center;”><a href=”YOUR WEBSITE URL” title=”WEBSITE NAME“> <img src=”IMAGE URL” width=”125″ height=”125″ alt=”IMAGE TITLE” style=”border:none;” /></a></p>
<div style=”border:1px solid rgb(221,221,221);background:#ffffff none repeat scroll 0 0;width:130px;overflow:auto;height:120px;line-height:1.5em;margin:auto;padding:5px 10px;”><a href=”YOUR WEBSITE URL” title=”WEBSITE NAME“> <img src=”IMAGE URL” width=”125″ height=”125″ alt=”IMAGE TITLE” style=”border:none;” /></a> </div>