Monday, August 4, 2014

Blog Buttons and an Alternative Method of Creating Them

Copy this code into an HTML widget to share my button on your blog!
<a href=""><img src=""></a>
A Splash of Ink has a button! It's about time I created one of these blogging staples. I've been seeing them around a lot lately and I figured I should make one up. It was a lot more work than I thought it would be. I followed all the instructions on all the blogs, but I could never get the html code to show up in the text box below the button. After spending endless hours trying to solve this issue, I came up with this alternate (non-programmer) way. I am sure there are better ways to do this, but I thought I'd share how I made it work, in case someone else was having all the same problems I was having.

After you have your button created (see the tutorial the Notebook Sisters wrote if you need help with this step or if you want to try the normal way of making a button, haha), then add your button to your sidebar. I just added mine using the image widget that you can find under layout/add a new gadget section of your blog.

Next create a blog post announcing your button. Right at the top of the post paste this bit of HTML code:
<a href="YOUR BLOG URL"><img src="IMAGE URL"></a>
Fill in the appropriate information. You can find the url for your button by right clicking the button that should now be in your sidebar and clicking "Open in new tab". This should open a new tab with only the image in it. The address of that tab is your image url. Alternatively, you can right click and click "Copy image URL".

After you've pasted your HTML code you need to highlight it and quote it. There should be a parenthesis icon in the tool bar in your blog post editor (beside the bullet points) that will quote the text. This stops the HTML from "activating", like it will when other people post the code in their blog.

Then after the post has been published, create a text box widget right below the picture linking to the post where you've left the HTML code. To make it look a little more cohesive, don't put a title in the text box. Originally, I tried to just use the quoting feature in a text box with the html coding, but it didn't work! It "activated" the code.

So there you have it. You can see my sidebar for an example of how it should all come together. This tutorial might seem a little uninformed, because it is, haha. But like I said earlier, I wanted to share what worked for me. If you have any suggestions on how to make blog buttons or any tips/experiences on battling HTML leave them in the comments. Please tell me I'm not the only one!

P.S. If you share my button, first off thank you so much, and second, let me know if it doesn't work/there's problems!

P.P.S. I'd like to thank Samantha over at Bookish Serendipity for nominating me for a blog award. I've said this before but, every time you guys give me an award I always feel so honored. You should definitely head over to her blog and check her out.

Reading: The Silkworm by Robert Galbraith
Listening: Switchfoot
Watching: Defiance


  1. I love this method! I also had problems with the online tutorials I found, so I'll have to try this. Thanks for the shoutout!

    1. Thanks! I'm so glad to hear that I'm not the only one who had issues. Let me know if it works for you:)

      And no problem for the shout out, I'm happy to do it.

  2. N'awww, thanks for linking to my tutorial. I like your version too, though, and now I am nabbing you blog button because IT IS BEAUTIFUL and also your blog is awesome. Hehe. *steals button and runs away to add it to own blog*

    1. Awwww, thanks for the kind words:) You don't even have to steal my button, you can HAVE it for ever and ever (until I do a blog redesign, then we'll have to do trade in, haha).

      I'm always happy to link up to a helpful post, especially one from your blog, since you've linked to some of my posts in the past! It's always a pleasant surprise to see a spike in my traffic sources coming from the Notebook Sisters, tehe.


Related Posts Plugin for WordPress, Blogger...