Tutorial: sharing blog buttons
INTRO: WHY A USER FRIENDLY SHARING OF YOUR BLOG BUTTON?
It can be useful for:
- Proposing buttons exchange to fellow bloggers
- Provide your button to fellow bloggers who want to include you in their blogroll
- Any other occasion when you want to allow someone to easily show your button or badge or whatever little image of yours!
(NOTE: I don't have direct experience but I guess that for advertising buttons you might be required for something specific and certainly the person offering advertising space will be able to support you as needed!)
I suggest you to show your button in your blog column or in a dedicated page (as I've done here) and offer two options:
“a) Right click on the button image and save it on your desktop. Upload on your site where you want to display the button and link to: http://yourblogurl
OR
b) Copy the code and paste it on your site where you want the button to appear”
Option “a” will take several steps to people that want to show your button.
Option “b” is more immediate and below you will just learn how to create and display the needed bit of code.
PART 1: STORAGE OF THE BUTTON IMAGE
Ok, let's say that you have ready your button image in the size(s) you want it.
I suggest you to upload it in your blog files repository, exactly as you would do with a normal image to include in one of your posts. But you can also upload it on Imageshack or Photobucket or a similar service for hosting images: I don't have direct experience with this solution but I've seen others doing it.
Copy the url that links directly to the image and save it for later. If you uploaded the image in your blog, the url should look like this: http://yourblogurl/.../yourimagefilename.format
PART 2: THE CODE BIT
Now here's the code structure:
- The first part (in pink) tells the system to center the image. The fellow blogger that grab your code will have the image automatically centered in the width of his/her space. (OPTIONAL).
- The second part (in blue) tells the system to make the image clickable and where the link should redirect, ie to your blog url. The final bit of this line (in light blue) tells the system to open the link (ie your blog) in a new window (OPTIONAL).
- The third part (in green) tells the system where to grab the image to display. ATTENTION: The image that others will display will be DIRECTLY the one that you uploaded on your blog (or image hosting service). If you delete, move, rename, modify the image you have uploaded these changes will apply to what is shown in the page of the people that have grabbed this code! This can be helpful (for example, if you want to change or restyle your button, replace the image in the same location and with the same filename and it will be automatically updated in every page that has has taken this code) but be careful not to remove, move or rename the button accidentally or your fellow bloggers that grabbed your code will see a red "x" in their page instead of your button!
Example:
CLICK TO DOWNLOAD THE CODE IN A FILE: 1.pdf
Copy, paste and replace:
yourblogurl --> complete web address of your blog
yourimagelink --> direct link to the button image you stored previously
Here you go! This is the code, you can send it as it is in the body of an email or in instant messengers ecc...
PART 3: HOW TO DISPLAY THIS CODE ON YOUR BLOG IN ORDER TO MAKE IT EASY TO GRAB FOR OTHERS
If you simply customize and paste the code above in your blog, the system will recognize HTML markup instead of interpreting the code as text only as needed. Messy...
What you need to do is adding another little bit of code in the html: the textarea tag. It will create that "window" where u can insert your code as text only. Open the tag BEFORE the code bit above and close it at the end, like this:
(Width, height, cols, rows: these values are customizable, depending on the area you have to display it, play with the numbers and see what fits for you).
Example finished:
This is the html code bit to write in your blog:
And this is how it appears on your blog:
And this is what will appear if someone copies and pastes the code in the window above on another blog:
CLICK TO DOWNLOAD THE COMPLETE CODE IN A FILE: : 2.pdf
Copy, paste and replace:
yourblogurl --> complete web address of your blog
yourimagelink --> direct link to the button image you stored previously
Customize: Width, height, cols, rows values
Well this works for me at least! :)
Hope it's clear and helpful if you need any help (or just someone to use as tester for your code), just give me a shout leaving a comment below!
Trackback address for this post
3 comments
Comment from: Flavia @ Estilo Home [Visitor] · http://www.estilohome.blogspot.com
This is so helpful, thank you so much!
03/05/10 @ 17:53
Comment from: Gosia [Visitor] · http://pickpost.blogspot.com/
Hi suze! well I'm too far un-geek to get your advise (but i'm sure it is comprehensive and neat) but i just wanted to tell you you prepared your tutorial in a very eye-pleasing way. Nice aestetic!
03/05/10 @ 21:38
Comment from: Eileen [Visitor] · http://www.bluebirdluxe.com
Thank you, Suze! I just made mine! :)
07/22/10 @ 09:32
Comment feed for this post
