Tag Archives: html code

How to add copyable code for buttons in WordPress

99% if the time I consider myself to be a stubborn determined do-it-yourselfer.   This task of creating a blog button with a copyable code has taken a lot of research and a few challenges to figure out. Let me insert a disclaimer here that I am far from a tech guru.  I’m just a determined little girl whose to cheap to pay for such blog items 😉  Anyone who has been around the blog block knows that Blogger and WordPress don’t operate in the same tech worlds.  While I have seen MANY Blogger tutorials on buttons, I had a hard time finding some assistance in getting things to work as I wanted them too.  I need to start by giving some great thanks to Becca from Gardeners to Bergers for getting me started on this process.

While her tutorial is great, it’s meant for blogger.  In WordPress however you can’t add scroll boxes, when you try you get 2 buttons and no scrolling code to copy. So let’s get started.

First of all in WordPress you want to add a text widget to your sidebar.  Then you are going to want to add this code.  Note: enter your own web address (not fostering a creative life) and your own image url (not the littledtales url listed here) the alt= can be customized text usually a nickname or shortened form for your blog. I just realized my cursor was after the **** when I took the screen shot, so please ignore the straight line- do not include this in your code.

Now copy all of the code up to the first <div> (before the ****).  Open a new window or tab and go to About.com Forum Code Converter (this is your happy dancing time).  Scroll halfway down the page, paste your code into the box.

Click on the HTML to Text button. You should end up with something like this…

Copy this text.  Then go back to your blog text widget.  Paste this code where the **** was located between the <div> and <div> at the end of your original code. It should look like this

Click save- do a little jig because when you go to your home screen you get this….

To give you a bit more sense of accomplishment I like to test mine.  The best way is to copy the code on your blog sidebar, create a new post, click on the HTML tab in the upper right hand corner (next to visual tab) and paste your code.  Click back over to the visual tab and see if your button is posted.

Yay.  I’m a huge fan of Awesome people who share their knowledge, I just saved a boat load of money on custom header, buttons and so much more.  Hope this helps, it’s really not as hard as it seems!

Need to create a button- I have a post in the works on how to do it yourself on picnik, stay tuned!

I’ll be partying at:
Not Just a Housewife
Bella before and after
Home Stories A to Z
What I Whipped Up Wednesday
Tip Junkie handmade projects


1 Comment

Filed under Blog Love, DIY Projects