Want to make a button?

I’m an autodidact.  This means I learn best by teaching myself. I had no idea what it was, or that there was a word for it.  All I knew was that I always got in trouble in school for not paying attention (because I was teaching myself.)  It was a pain in the ass as a child, but as an adult, it’s a total asset.

I’ve been in this business the better part of a decade.  I’ve learned everything the hard way, through trial and error.  I’ve learned how to use Photoshop, Bookcover Pro, how to properly format for eBook vs. paperback… but the hardest thing for me to learn is code.  I still struggle with it at times.

I recently made a grab button for a lovely champion of books.  And this is a popular feature bloggers like to use.  But does your button lead others to your site?  Would you like learn in five minutes or less how to make your own button? I’m going to show you how… and no, you don’t need to understand html or code.  Ready?

1. First, make your image.  Here’s mine.  I literally just threw it together for this post.  It’s of low quality, but what the hell, I’m teaching buttons, not Photoshop. Make it small – no more than 175 px x 125 px.

thumbnail2. Next, upload it to the web.  I made a private blog post where I can upload images I need to use.  Once you upload it copy the address.  i.e.  https://authoranitacox.files.wordpress.com/2014/03/thumbnail1.jpg

3.  Now, here’s where we need to pay attention.  Here’s the code you need.

<div align=”center”> <a href=”https://authoranitacox.wordpress.com&#8221; target=”_blank”><img alt=”Anita’s Den” src=”https://authoranitacox.files.wordpress.com/2014/03/thumbnail1.jpg”/></a&gt; </div>

Untitled

4. Change what is in red to your website/blog whatever.  (If you cut and paste your facebook address you need to remove the (s) in the http: part. For instance mine is https://www.facebook.com/AuthorAnitaCox and I need to change it to http://www.facebook.com/AuthorAnitaCox)

Change what is yellow to the title of your page or what you want it to read when your mouse hovers over the button.

Now Change what is in blue to the web address of your image that I had you save.

5. Cut and paste your new code into your widget (wordpress/blogger etc.)  If you’re adding this to a webpage hosted by someone else, you’re going to have to figure out where you can plug it in.

I hope this helps keep you from *headdesk* and gives you more time to write.

~With Love,

Anita

 

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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