A Blog Button Tutorial

I don't know about you, but for the longest time, when I would try doing blog buttons in my sidebar, with that little box of code under it, the box would be empty. I think I tried about ten different tutorials, but nothing worked. Then, finally, I found one tutorial that worked if I put the code in a page, but in the sidebar, it was still not working. I looked through all the codes I had tried, and through trial and error, I finally changed a code just enough that it would work. It might just be my blog that doesn't accept the code, but I have heard that others have had similar trouble, so maybe not. Anyhoo, I am going to post the tutorial.

1. Designing a Blog Button

Making a blog button is really a pretty simple matter. You can make them just with the tools that your computer offers, or you can use an online photo editor. I like to use Ipiccy for most of my work, but I also use Lunapic. Lunapic has a service you can pay for that gives you better editing tools, so it is not ideal. The only tool I really use is the transparency tool, which Ipiccy doesn't offer and is free. So a mix of the two can work, or whatever. A blog button can be any shape, can have a colored or a transparent background, and can be a .jpeg or a .png. It doesn't really matter. The only requirement that I would suggest would be a higher quality image, so that it doesn't look grainy. Also, if you are saving a newly transparent image with lunapic or ipiccy, remember that you have to save it as a .png or it will not stay transparent. But if you don't have any transparent parts you want to keep, then .jpeg is fine.

2. Uploading a Blog Button

Before you can make a 'grab my button' widget, you need to have code for your image. To do this you will need to upload the image to a free image hosting site. There are a lot of them, but I prefer Tinypic because of it's simplicity. Just upload your image. When you upload an image to tinypic, it will give you HTML code for your button, an IMG code for forums or message boards, a URL, and a Direct link. You will want to copy all this into a text editor (I like NotePad). I say text editor because word documents and the like tend to change formatting, and with code, formatting is everything. Anyway, save all the information so that you will be able to access it easily. OK, so now you need the following code. The pink 'SITEURL' you need to change to the URL of your website or blog. The green 'SITETITLE' you need to change for the name of your website or blog. The blue 'IMAGELINK' you need to replace with the Direct Link that Tinypic gave you for your image. You will notice that there are two of everything. This is because one set is the image itself and it's links, and the other set is what goes in the scroll box underneath it. Once you have the following code all set up with your information, go to your blog dashboard. Go to Layout>>Add Gadget>>HTML/Java Script. Paste your code into the the widget, and you are good to go. Let me know if you have any questions.

<div align="center">
<a href="SITEURL" target="_blank"><img alt="SITETITLE" src="IMAGELINK"/></a> </div>
<div align="center"><form><textarea rows="3" cols="17">&lt;center&gt;&lt;a href="SITEURL" target="_blank"&gt;&lt;img alt="SITETITLE" src="IMAGELINK"/&gt;&lt;/a&gt;&lt;/center&gt;</textarea></form></div>

Also, I can design a blog button for you based off of your input and give you ready-made code that you just paste into a gadget. Completely free of course, its an enjoyable experience for me since I have way to many blog buttons for my own blog and don't need to make any more. And then of course, you don't have to do it. 

 photo theauthor_zps8356b86b.png


No comments:

Post a Comment