Creating a Following with HTML

Spice Up Your Blog with a Dash of Code

From time to time, I get the urge to do something new with my blog. The same thing manifests itself at home with an irresistable desire to rearrange the furniture. Fortunately for the blog (unlike moving furniture), the only heavy lifting involved is learning something new.

Now you code masters are probably laughing your closing tags off at me but I, unlike Al Yankovic, am fluent in neither Klingon nor JavaScript. However, I have picked up a few bits and pieces of HTML which you might find useful too.

How’d I Get Those Follow Buttons at the Top of the Page?

Some time ago, a friend asked me how I put my follow buttons at the top of the blog.

Come to think of it…I’m not sure if I actually sent the directions or totally forgot…sorry Selena! *hangs head in shame*

If you want to add follow buttons to your blog, you can drop them into image widgets and stack them in the sidebar and some WordPress themes have built-in follow buttons at the top of the blog. Of course, if you have a self-hosted site, you can install a social media plugin.

But, with a little code know-how and a lot of copy/paste, you can line up your follow buttons in neat row all by yourself.

Note: instructions for uploading images and using widgets are specific to WordPress. Other blogging platforms may function differently.

You can view the video version of these instructions here.

First, you need to do is find and download the follow buttons that fit your blog and turn them into hyperlinks to your social media sites. I found mine on Webtreats. They have tons of free buttons and icons. This is especially great if you want all your follow buttons to have the same style. Alternatively, you can download the free buttons provided by your social media sites.

Then, you need to upload the images to your Media Library and grab the image URL.

Don’t worry too much about image size as you can resize in the code. You can also edit the image to size (in Paint or some such…can you tell I’m a PC user?) before loading it to Media Library, edit and save the image in an online editor such as Pixlr or edit the image within your Library. If you opt to edit the image in your Media Library, just make sure you grab the updated image URL.

Note: If you edit the image in Paint, the transparent background will be lost. If your blog background is white, this isn’t a big deal but, if you have a dark background, you might want to work in Pixlr.

Next, you want to fire up an online HTML editor. You could use a Word (Open Office, etc) document to work with your code but I like the online editor because you can see each of your changes as it will look on your blog. I like the Real-Time HTML Editor.

One thing to note about the Real-Time editor is that it seems to work great in Chrome but not Firefox (for me anyway). If you try it in your browser and it doesn’t do anything, try Chrome.

You can use the following code to make any one of your follow buttons into a link to your social media.

<a href=”SOCIAL MEDIA LINK HERE” target=”_blank”><img src=”IMAGE URL HERE” width=”38″ height=”38″ border=”0″ />

The SOCIAL MEDIA LINK is the URL for your profile page. If you’re not sure how to grab it, go to your profile page on your social media site and copy the address from the address bar. Facebook is usually http://facebook.com/YourName, Twitter is http://twitter.com/YourID, etc.

The IMAGE URL comes from your Media Library.

You can change the size of the image by changing the number associated with “width” and “height.” You’ll want to keep proportions in mind when you’re working with icons that aren’t square. My Webtreat icons are all square transparent images with the social media symbol in the middle.

You can place several of these codes side by side (one after the other with no spaces) to create a follow button line up.

Here’s how it looks on the “front side” with Facebook, Twitter and StumbleUpon buttons:

Drop the completed code into a Text Widget on your Widgets Dashboard and you’ve got the makings of an epic following.

In the not too distant future, I’m planning to make the follow buttons light up or change on mouseover. When I do, I’ll be sure to share the secret with you.

What do you think? Is this something useful and fun for your blog? Any code wizards out there have suggestions?