How To Add a Button with HTML box to Your Sidebar on Blogs

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;”>&lt;a href=”YOUR WEBSITE URL” title=”WEBSITE NAME“&gt; &lt;img src=”IMAGE URL” width=”125″ height=”125″ alt=”IMAGE TITLE” style=”border:none;” /&gt;&lt;/a&gt; </div>

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s