First: Create a jpg to say anything you want. I made mine in the photo editing software of my choice. Just make sure you start off with a canvas size of 2"x2" so you don't distort it too much when you make it into a button.
Second: Host your photo somewhere online so it has an image location. You can use photobucket or flickr. I just like to use Facebook, and I have one album that I set the privacy so only I can see the pictures. So no one has access to it, but at the same time, each picture has a web address.
Third: You need to know where your button is going to link to, and also the location of your picture.
<a href="http://kmattso2.blogspot.com" mce_href="http://kmattso2.blogspot.com" target="_blank"><img alt="HAL" src="http://photos-a.ak.fbcdn.net/hphotos-ak-snc3/hs128.snc3/17567_990209759560_1948136_54957368_4480204_n.jpg" WIDTH=150 HEIGHT=150 mce_src="http://photos-a.ak.fbcdn.net/hphotos-ak-snc3/hs128.snc3/17567_990209759560_1948136_54957368_4480204_n.jpg"/></a>
Fourth: Copy and paste the html above and replace all of the bold with your corresponding information. The first two are the same, and whatever address you put in is where the button will take you. I'm not entirely sure the point of the HAL but I put that as HAL for Happily After All. You can make it say whatever you would like. The last two are the same as well and that is the link to where your picture is.
Fifth: You have a button!
Sixth: In order for anyone to use the button and place it on their own site, they'll need to copy the html code. But you can't just paste it on your blog, because it will show up as the button. You need the html to display as text so it can be copied. To do this, you can insert a scroll bar under your button.
<a href="http://kmattso2.blogspot.com" mce_href="http://kmattso2.blogspot.com" target="_blank"><img alt="HAL" src="http://photos-a.ak.fbcdn.net/hphotos-ak-snc3/hs128.snc3/17567_990209759560_1948136_54957368_4480204_n.jpg" WIDTH=150 HEIGHT=150 mce_src="http://photos-a.ak.fbcdn.net/hphotos-ak-snc3/hs128.snc3/17567_990209759560_1948136_54957368_4480204_n.jpg"/></a>
As you can see, if you were to copy and paste the text inside, it would create a button.
Here is the html you'll need.
<div style="background-color: white; border: 3px none black; font-family: Georgia,Garamond,Serif; font-size-adjust: none; font-size: 16px; font-stretch: normal; font-style: normal; font-variant: normal; font-weight: normal; height: 120px; line-height: 26px; overflow: scroll; width: 200px;">
<span style="font-family: "Times New Roman"; font-size: 12pt;"><a href="http://kmattso2.blogspot.com" mce_href="http://kmattso2.blogspot.com" target="_blank"><img alt="HAL" src="http://photos-a.ak.fbcdn.net/hphotos-ak-snc3/hs128.snc3/17567_990209759560_1948136_54957368_4480204_n.jpg" WIDTH=150 HEIGHT=150 mce_src="http://photos-a.ak.fbcdn.net/hphotos-ak-snc3/hs128.snc3/17567_990209759560_1948136_54957368_4480204_n.jpg"/></a></span></div>
The part that is bold, you will replace with the html code from your button.
You'll need to make just a few changes with the bold section. If you leave it like it is, it will simply put a button in your scroll bar instead of putting the html text. That defeats the purpose of doing it right? To fix that you have to replace all of the < and >'s in the bold section. For example the < a at the beginning? Switch out the < for & l t ; (remove the spaces) And the >'s will become & g t ; (remove the spaces).
This will deactivate the html code from displaying as the button. Where you type & g t ; a > will show up in the scroll bar. Then your followers can copy and paste right out of the scroll bar and place your button on their page.
Hopefully you guys don't have any problems figuring this out! Let me know if you have any questions.
No comments:
Post a Comment