Friday, February 13, 2009

Creating Wordpress Badges

Today, I created a way for visitors at Geneabloggers to access code and post their own Geneaglogger badge with instructions for both Blogger and Wordpress users.

While creating the page with the HTML code, I realized that here at Facebook Bootcamp for Genea-Bloggers we've covered how to add images with links to the sidebar of your blog, but only for Blogger users.

Here is how it is done for Wordpress users, with the process and syntax a bit different.  The main difference: Blogger lets you upload the image as part of the process whereas Wordpress assumes you've already uploaded the image somewhere and have the URL link to the image.

To upload an image in Wordpress:

1. In Wordpress, go to the Admin panel and select Media.



2. The Media Library will appear. Select Add New.



3. In the Upload New Media dialog, click Select Files.



4. Locate the image file and then click Open.



5. The image details will appear. Click Save All Changes.



6. Now the image appears in the Media Library. Right-click over the image link and copy the URL. Paste the URL where you can access it to create your badge below.



To create the badge using a Wordpress widget:

1. In the Admin panel, select Widgets.



2. Locate the Text widget and select Add.



3. The widget will appear at the bottom of the list of widgets on the right. Select Edit.



4. Enter a title for the widget if desired. Then enter the HTML code below with LINK being the underlying URL link for the image and IMAGE URL being the link to the image (see above). IMPORTANT: you must include the quotation marks around all links.



5. Click Done. The widget appears with the title. Click Save Changes.



6. The image will appear with its underlying link in the sidebar.

1 comment:

dustbunny8 said...

Help!I have tried and tried this.One when you say paste the url somewhere you can find it where do I paste it?And the widgets are drag and drop,when you click on them a window opens with save or delete.Nothing about editing.