Learn More About How to Make a Badge for a Web Page

Web Development, Internet
Learn More About How to Make a Badge for a Web Page
Page content

Step One: Make the Badge Graphic

Using your preferred graphics program, create the badge graphic you want to use. Common choices are: Adobe Photoshop, Adobe Fireworks, Adobe Illustrator, and GIMP. This tutorial assumes you have the necessary knowledge to create the graphic of your choice. If you need inspiration, consider starting off with your website logo. If you do not have the skills to develop your own badge graphic, consider outsourcing it to a freelancer, or using one of these tutorials here on Bright Hub to help you:

Step Two: Optimizing the Graphic for Web Use

Once you’ve created the graphic, you will want to save it for web use. Common formats that are safe for web use include: JPG, GIF, and PNG. For more information on how to optimize your graphics for web use, check out: Learn More About the Best Image Formats for Web Use. Generally, regardless of the actual program you use to create the graphic, saving for web use will be as simple as: File > Save As.

Step Three: Uploading the Graphic to Photo Sharing

To save bandwidth on your own website, upload the graphic to a photo sharing website such as Photobucket. Create the Photobucket account and follow the steps to upload the image to the account there. Click Upload and Share Images. Browse to where the image is located on your hard drive. Click upload. The file is now on your photobucket account.

Image Credit: https://crave.cnet.co.uk/software/0,39029471,49294273,00.htm

Step Four: Getting the Code for the Site

For those who are not HTML code savvy, you can get the necessary code to put the image on your website. Once the photo is in your account, select it and click “Edit.” A box will pop up with tab options. Select the “Get Link Code” tab. There will be a list of codes to Share for Email and IM, Direct Link for Layouts (Myspace, Facebook, etc.), HTML for Websites and Blogs, IMG for bulletin boards and forums, and Flash for websites & blogs. Select the code under HTML for Websites and Blogs. There are two options: Full Size, and Clickable Thumbnail. We suggest using the code for the Full Size.

Copy the code from Photobucket, and paste it accordingly in your website code, where you want the graphic to appear.

Step Five: Making the Code Visible for Others to Copy

textarea

Now that you’ve got your graphic in your website where you want it, you will want to make a box for the code to display so that people can copy it and paste it in their own websites, blogs, and social networking profiles. To do this, you will want to use the textarea tag. Give the code size attributes like this: textarea rows=“2” cols=“20” to make room for the image code. Now, inside the text area code, paste the same HTML image code from photobucket. Close the textarea tag.

This will display the actual HTML image code inside a text area box, so that people will be able to see the code to copy and paste. Without the textarea code, the website will display another copy of the image. Add text to instruct the visitors to copy and paste the code on their websites to get the badge. The final result will look something like the image on the left, but will have a full HTML link code inside it.

Image Credit: https://www.roseindia.net