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.
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:
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 email@example.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: