How To Offer Your Members Multiple Styled Vote Buttons
Hello everyone,
This tutorial is for those of you who wish to use multiple styled buttons on your Aardvark topsites list. In other words, the following code example will allow your members to choose from different styles of vote buttons after they have joined your site.
Being as it is a rather complicated process to explain in words, I felt that the best approach would be to simply share an altered version of my own code.
The basic steps that you need to follow in order to offer your members multiple buttons are the following:
1. Create your various buttons in Photoshop, or in some other graphics program of your choice. Make them whatever colors, styles and sizes that you like.
2. After creating your buttons, make sure that you optimize them so that they are the smallest size possible.
3. Upload the new buttons to the chosen directory on your topsites web server.
4. Now it is time to perform the heavy duty stuff; that is, editing the l
ink_code.html file that is located in the folder of the skin that you are
currently using.
5. IMPORTANT: Back up your original link_code.html file before you begin the following steps. In other words, work on a copy. Did you get that?
6. To make this as easy as possible for you to understand, I am going to teach by example, using altered code from my own topsite. You can edit this code to your heart's delight, but you must keep a few things in mind:
a. Where it says
Your-Site-Name-Here, you obviously need to replace the text with your list's name.
b. Where it says
/MyImages/, you need to replace the text with the actual path to whatever folder you are using to store your new button images.
c. Where it says
Your-Button-Name-Style05.gif, you need to replace the text with the actual name of each of your buttons. Make certain that you change the file extension to whatever graphic format you are using for your buttons; that is, PNG, JPG, GIF, etc.
d. Where it says
width="240" height="60", you need to replace the text with the actual dimensions of each of your buttons.
7. Now, here is the sample code to use in your
link_code.html file:
Code:
<script language="Javascript" type="text/javascript">
<!--
function selectAll(theField) {
var tempval=eval("document."+theField)
tempval.focus()
tempval.select()
}
//-->
</script>
<div style="text-align: center;">
<h3>Vote Buttons HTML Link Code
</h3>
</div>
<br>
Below you will find the various styles of vote buttons that are available for Your-Site-Name-Here members.<br>
<br>
After deciding which button you would like to use on your site, do the following:<br>
<br>
<strong>1.</strong> Click on the <strong>select all</strong> link that is found below the button image of your choice. Clicking on the <strong>select all</strong> link will select all of the HTML code that is in the text box.<br>
<br>
<strong>2.</strong> Next, use the <strong>copy</strong> keyboard command for your particular computer platform -- such as command-c or control-c -- to copy the HTML code into your system's clipboard, pasteboard, or whatever it is called on your platform.<br>
<br>
<strong>3.</strong> This next step may be different, depending on how and where you have your website hosted:<br>
<br>
<ul>
<li>If you operate your own web server and have direct access to the HTML files which comprise your site, simply use your computer's keyboard <strong>paste</strong> command -- such as command-v or control-v -- to paste the HTML code into the area of your home page HTML document where you would like for the Your-Site-Name-Here button to be displayed, and save the changes to the file.<br>
<br>
</li>
<li>If your website is hosted at an ISP, or at some other location, assuming that you have access to the HTML files which comprise your site, after using your computer's keyboard <strong>paste</strong> command -- such as command-v or control-v -- to paste the HTML code into the area of your home page HTML document where you would like for the Your-Site-Name-Here button to be displayed, you must save the changes to the document, and then upload the new version of your home page HTML document to the proper location on your ISP's web server. Obviously, you already know where that is, if you are running a website.<br>
<br>
</li>
<li>If you use a particular graphical web service where you do not have direct access to the HTML code which comprises your website documents, then the method that you use to insert the Your-Site-Name-Here button into your home page document may be a little different, and a bit more troublesome. This may possibly entail three steps:<br>
<br>
1) uploading one of our button images to your host's site<br>
<br>
2) adding the uploaded image to your home page document<br>
<br>
3) adding a link for the Your-Site-Name-Here home page to the uploaded image.<br>
<br>
If you encounter difficulty in doing this, we will be happy to assist you. However, please note that it will require that you exercise a bit of faith and trust, by providing us with your login name and password. In such a case, we can usually have the button properly installed on your home page in a matter of fifteen minutes.<br>
</li>
</ul>
<br>
<strong>Important:</strong> Please copy and paste the HTML code exactly as you see it in the text area below your chosen button. Do not alter it in any way, or else it may not work properly, if at all, and/or you may not receive credit for visitors who click on your button.<br>
<br>
<br>
<a href="{$list_url}/{$verbose_link}" title="Your-Site-Name-Here Topsites List"><img src="{$list_url}/images/Your-Button-Name-Default-Button.gif" width="240" height="60" border="0" alt="{$list_name}"></a><br>
<br>
<form name="button1">
<a href="javascript:selectAll('button1.select1')">Select All</a><br>
<br>
<textarea name="select1" rows="6" style="width: 100%;">
<a href="{$list_url}/{$verbose_link}" title="Your-Site-Name-Here Topsites List"><img src="{$list_url}/images/Your-Button-Name-Default-Button.gif" width="240" height="60" border="0" alt="{$list_name}"></a>
</textarea>
</form>
<br>
<br>
<br>
<a href="{$list_url}/{$verbose_link}" title="Your-Site-Name-Here Topsites List"><img src="{$list_url}/MyImages/Your-Button-Name-Style02.gif" width="240" height="60" border="0" alt="{$list_name}"></a><br>
<br>
<form name="button2">
<a href="javascript:selectAll('button2.select2')">Select All</a><br>
<br>
<textarea name="select2" rows="6" style="width: 100%;">
<a href="{$list_url}/{$verbose_link}" title="Your-Site-Name-Here Topsites List"><img src="{$list_url}/MyImages/Your-Button-Name-Style02.gif" width="240" height="60" border="0" alt="{$list_name}"></a>
</textarea>
</form>
<br>
<br>
<br>
<a href="{$list_url}/{$verbose_link}" title="Your-Site-Name-Here Topsites List"><img src="{$list_url}/MyImages/Your-Button-Name-Style03.gif" width="240" height="60" border="0" alt="{$list_name}"></a><br>
<br>
<form name="button3">
<a href="javascript:selectAll('button3.select3')">Select All</a><br>
<br>
<textarea name="select3" rows="6" style="width: 100%;">
<a href="{$list_url}/{$verbose_link}" title="Your-Site-Name-Here Topsites List"><img src="{$list_url}/MyImages/Your-Button-Name-Style03.gif" width="240" height="60" border="0" alt="{$list_name}"></a>
</textarea>
</form>
<br>
<br>
<br>
<a href="{$list_url}/{$verbose_link}" title="Your-Site-Name-Here Topsites List"><img src="{$list_url}/MyImages/Your-Button-Name-Style04.gif" width="240" height="60" border="0" alt="{$list_name}"></a><br>
<br>
<form name="button4" id="button4">
<a href="javascript:selectAll('button4.select4')">Select All</a><br>
<br>
<textarea name="select4" rows="6" style="width: 100%;">
<a href="{$list_url}/{$verbose_link}" title="Your-Site-Name-Here Topsites List"><img src="{$list_url}/MyImages/Your-Button-Name-Style04.gif" width="240" height="60" border="0" alt="{$list_name}"></a>
</textarea>
</form>
<br>
<br>
<br>
<a href="{$list_url}/{$verbose_link}" title="Your-Site-Name-Here Topsites List"><img src="{$list_url}/MyImages/Your-Button-Name-Style05.gif" width="240" height="60" border="0" alt="{$list_name}"></a><br>
<br>
<form name="button5">
<a href="javascript:selectAll('button5.select5')">Select All</a><br>
<br>
<textarea name="select5" rows="6" style="width: 100%;">
<a href="{$list_url}/{$verbose_link}" title="Your-Site-Name-Here Topsites List"><img src="{$list_url}/MyImages/Your-Button-Name-Style05.gif" width="240" height="60" border="0" alt="{$list_name}"></a>
</textarea>
</form>
<br>
<br>
<br>
<a href="{$list_url}/{$verbose_link}" title="Your-Site-Name-Here Topsites List"><img src="{$list_url}/MyImages/Your-Button-Name-Style06.gif" width="240" height="60" border="0" alt="{$list_name}"></a><br>
<br>
<form name="button6">
<a href="javascript:selectAll('button6.select6')">Select All</a><br>
<br>
<textarea name="select6" rows="6" style="width: 100%;">
<a href="{$list_url}/{$verbose_link}" title="Your-Site-Name-Here Topsites List"><img src="{$list_url}/MyImages/Your-Button-Name-Style06.gif" width="240" height="60" border="0" alt="{$list_name}"></a>
</textarea>
</form>
As you can see, the way the above code works is by using a javascript to select the actual code in the box/textarea that your member is going to use.
8. IMPORTANT: Please note that this code works in
pairs. Please also note that all of the parameter names and elements must match each other in each of the pairs. In other words, you will see name="button5", ('button5.select5'), name="select5" and Your-Button-Name-Style05.gif all in the same chunk of code. Follow this same example for each button that you make.
The above code is straightforward, and should be easy to implement, since it is mainly copying and pasting it into your link_code.html file, and then simply adjusting file paths and file names accordingly.
However, if you encounter any difficulties, I will try to help you, my time permitting. I keep extremely busy here doing the Lord's Work, so please be mindful of that fact. Thanks!
How To Offer Your Members Multiple Styled Vote Buttons
Linear Mode
