| 
  • If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

  • Files spread between Dropbox, Google Drive, Gmail, Slack, and more? Dokkio, a new product from the PBworks team, integrates and organizes them for you. Try it for free today.

View
 

Modified Group Join Button

Page history last edited by Shal 10 years, 7 months ago

You can make a custom "Join" button for your Yahoo Group.

 

Copy the HTML from the Promote page. It will look like this:

 

<center>
<a href="http://groups.yahoo.com/group/sobfarleytest/join">
<img src="http://us.i1.yimg.com/us.yimg.com/i/yg/img/i/us/ui/join.gif" border="0"
  alt="Click here to join sobfarleytest"><br>Click to join sobfarleytest</a>
</center>
 

Look for the section that reads 'img src="..." '.  In the above eample the ... is the URL to Yahoo's purple join button:

 

 Click here to join sobfarleytest 

Click to join sobfarleytest

 

 Then replace the ... with the URL to your own image:

 

Click here to join sobfarleytest

Click to join sobfarleytest

Photo by Shalf

 

The paragraphs below give some details on the HTML elements used to create the button.

 

 

Image

 

The appearance of your custom button is specified by the HTML <img> element.

 

<img src="..." border="0" alt="...">

 

src attribute

 

The value of the source attribute is a URL. Note that the image must be hosted somewhere on the web, not on your PC and not in your group's Files section (because that section can only be accessed by members of your group). For this example I'm using Flickr because it is a Yahoo company — you can use the Yahoo account you already have to create and sign in to a free or paid Flickr account.

 

Note that Flickr's terms of service require that the photo be accompanied by a link back to the photo's page on Flickr. They don't prescribe exactly the form that must take, so I used the "Photo by Shalf" link for that purpose.

 

alt attribute

 

The value of the alternate text attribute is a description of the image. This text will be displayed if the image can't be loaded for some reason and is also used by screen-reading software for vision impaired users, so it should be descriptive, not a title.

 

Anchor

  

<a href="/..." title="...">...</a>

 

Unlike image, the anchor element has both a starting tag, <a>, and an ending tag, </a>, and both are required. In between the two tags is the page content which becomes the visual link. In our button, it is the img element in the middle, making the whole image a clickable link.

 

href attribute

 

The value of the href attribute is a URL. When the user clicks on the visual link, their browser goes to this address. You can send the browser anywhere on the web, including to your own web site address.

 

title attribute

 

The value of the title attribute is a title for the link. This text may be presented as a pop up "tool-tip" and may also used by screen-reading software for vision impaired users. 

 

 

References:

HTML allowed by Yahoo: help.yahoo.com/l/us/yahoo/groups/original/members/email/email-19.html

Overview of HTML elements: en.wikipedia.org/wiki/HTML_element

Specification of <img>: www.w3.org/TR/html401/struct/objects.html#edef-IMG

Specification of <a>: www.w3.org/TR/html401/struct/links.html#edef-A

  

Comments (0)

You don't have permission to comment on this page.