Pages

Monday, May 27, 2013

My First Blog Button Coded!


As some of you know I am facilitating a Stash Busting Sew-A-Long - the 2013 Style the Stash Sew-A-Long - which needed a button so you can add it to your sidebar and connect through to see what we are up to - or join us, if you want to.  I'll give you details at the end of the post.

You wouldn't think that such a simple little text button like this could have caused me hours and hours and hours of headaches.  Yes, I spent about two working days (about 16 hours) on working out how to make and code and image button for the 2013 Style The Stash Sew-A-Long which I am facilitating:




Link: www.stylethestashsewalong.blogspot.com

This was my first attempt at making a button.  I had never used photoshop before and had no idea how to make an image button or how to code it.


So I had several attempts and several woeful failures.

I decided to keep the first button simple, text and that's it .  How simple that should be.  I knew I needed an image file and I knew that photoshop could save text as image files.  But, I had beginners luck and I couldn't get photoshop to write text.

 Undaunted, and after spending a few hours on the internet, I discovered that there was a way of saving Word documents into image documents.  You create the document, upload it as a web page, and then download it as an image.  Simple, I thought.  And I know how to write text in word. So here was my first attempt:


Not sure why the line was in, but it was.  Next I uploaded and downloaded as an image.  It came back with pink writing on a light brown background.  Not what I wanted, but who was I to argue.  I decided to try again.

This time I managed to keep the image pink text on white background.  Success, I thought.  So, I uploaded to picmonkey for resizing.  Well, I don't know why uploading, downloading and uploading should change an image, but this is what I got next:

Colourful, but a little closely cropped, and I'm not sure that I wanted such a dramatic looking button.

So, I tried again.  With Photoshop.  This is what I managed to make - with lots of attempts - and by now a very serious headache - to get the text within the framework of my little box.


Actually I had no idea why I couldn't use photoshop the first time, because the second time it was quite easy.  Some little gremlin somewhere I would think.

The headache needed attention, and I was quite fed up by now, so it was time for:


The next day I decided to attempt to code my text image.  I found lots of helpful how to do its on various Blogger sites.  Papers in hand, I decided an hour or so of concentration would see the job done.

Coding an image requires that the image be uploaded to a photo service such as Flickr.  I don't have a Flickr account as our web shield service doesn't allow it unless I ask for permission.  As I really don't need Flickr, I read through the notes and found you could use Blogger/Picasa as your image source.

So I uploaded the image to a draft file.  Got my URL code in HTML.  Felt proud of myself.  Comes before the inevitable fall.

I followed the template and coded the button.  I placed the code in the widget section of Blogger layout.  The image appeared on my sidebar.  No code for you to grab the button, but the code text box was there.

Well, headache returned.  More Chocolate needed...




The helpful notes all told me that if something was amiss, go back and try again, as something was probably not quite in the right order.  Dutifully I did so.

Same result.  Bigger Headache.  Decided that really a button wasn't that necessary.

Some days later, with headache starting to be a dim memory, I  googled  "why doesn't my button work" .  Well, it seems that the HTML code has altered and it is now HTML 5.  I looked at some buttons that I know from blogs I visit, , and sure enough, their  grab text boxes had become empty as well.

I was on to something.  Would have preferred to have had this knowledge from the word go.  But I didn't.  Deciding to not waste emotional energy on this thought, I decided instead:  "Right, I thought, lets have another headache".  And I did...

First I had to find a web based photo hosting service that Webshield would allow.  Photobucket seems to be okay - I think because they are a photoediting service as well.  Crafty work around there to outwit Webshield.  I register and upload my image.

I code my image.  I put it up.  Something is not right.  It does not put the image up.  This is serious chocolate territory.  I'm fed up again.



I try again.  I use another set of instructions.  They are very similar but slightly different.  This should work, I tell myself.  It didn't.

Cook dinner.  Eat dinner with husband. Load dishwasher.  Take headache back to the computer and study the two code templates.  Find the error - the first code had an example website written in and the helpful tutorial had forgotten to say take that out.  Or I didn't read it or comprehend it at the time.  I took it out.  

The button didn't work.

I tried again, working out maybe I had taken a bit too much out.

The button worked.   I put it on the stylethestashsewalong.blogspot.com website and the image and text  box appeared.  I then cut and paste the grab code and put in in my personal blog.  The button....connected...to the stylethestashsewalong blog site.

I didn't believe it.  I still don't.  I'm going to try again.

The button works.



So if you go to www.stylethestashsewalong.blogspot.com you can grab yours as well.
(And if you want to take part there is still room - email me stylishsarah251@gmail.com)

I hope it works for you.  If not:


More chocolate I think...

Sarah Liz :)


P.S:  if you want to make your own button, these are the blogs I visited for instructions about the updated code:

www.codeitpretty.com/2012/08/make-html-grab-button-for-your-blog.html

lwww.citygirlgonecoastal.blogspot.com.au/2013/05/updating-your-blog-button-with-grab-code.html






10 comments:

  1. Well done Sarah Liz, what a huge amount of effort to get it done. I think I'd have had wine with my chocolate! :)

    ReplyDelete
    Replies
    1. Hi Jacq, that's quite understandable, lol's

      Delete
  2. Thank you for working so hard to create a button for the sew along. I will proudly display it on my blog. =) Chocolate is my answer to everything!

    ReplyDelete
    Replies
    1. Hi Lyn, yes, it is the best medicine...and now the button is done, the effort was worth it :)

      Delete
  3. Wow. Thank you for figuring this out, and for sharing what you went through to do it. Good job! I really appreciate your efforts!!!!

    ReplyDelete
    Replies
    1. Thanks Ellen, and I can help other people now who want to make a button!

      Delete
  4. Good Job!You WOnt Be Able.to Bribe Me With A Whole Bag Of Chocolates To TrY It After The First Headache. Maybe Give Me A month And 2 Bags Of Chocolates!

    ReplyDelete
  5. Hi Far, Yes, I should have stopped after the first headache as well - shows you have much more sense than me, lol's

    ReplyDelete
  6. First I am going to each choclate then I am going to install the button on my blog :-)
    I will have to try to make a button. Thanks for all tips!

    ReplyDelete
    Replies
    1. Hi Beata - go to the other blog -www.stylethestashsewalong.blogspot.com to pick up the button - that's the coded one. You'll find the HTML widget text in the box under the button on the sidebar. Not sure how it will work with wordpress but it seems to work with blogger. If it doesn't work with wordpress, it could be because WP needs different coding.

      Delete