It may sound complicated and time consuming but it’s actually very easy, and I thought I’d share some tips I gathered while studying graphic design at uni. I’m starting with the basics – creating your own blog widgets to give yourself better control over the look and performance of your blog… I’m starting with text widgets like those you can use to link straight to other profiles, but I’ll also be blogging about creating image based widgets soon. Enjoy!

Simply put, HTML coding involves giving the computer commands in the form of pairs of <> brackets. One <> will open the command, one <> MUST close it, and whatever content sits between the <> and <> brackets will be affected by that command. For example if your brackets involve a link command, then whatever text you put in-between those brackets will become a hyperlink.

i.e. the code to create a link is <a href=”http://www.examplelink.com”>My Link Text</a> and the words My Link Text will display as a hyperlink

The problem in this example is that the link will load on the page your reader is viewing, so it will effectively take them away from your blog. To ensure that the link instead opens in a new window, you add the instruction target=”blank” within the first <a> bracket.

So your new code looks like this <a href=”http://www.examplelink.com” target=”blank”>My Link Text</a>

Now here’s an example of a simple widget which displays all your social media hangouts in one. Here is the template…

Like this page? You can find me on these sites too!

<a href=”http://my twitter profile link.com” target=”blank”>Twitter</a>

<a href=”http://my Goodreads profile link.com” target=”blank”>Goodreads</a>

<a href=”http://my facebook profile link.com” target=”blank”>Facebook</a>

… and all you do is replace the example links with the EXACT address links as copied from your various profile pages.

Using a basic template like this you can create whatever link widget you like. Whether it’s to display your social media profiles, highlight your recent posts (useful if you’re using a WordPress theme where the archives don’t actually show your post titles), or even to link to something you’re running for a while, like a blog hop, this will allow you to do it. To create such a widget, here’s what you do:

In WordPress, go to Dashboard – Appearance – Widgets – add the Text widget – copy the template into the text box and replace the example links with your own, and save.

In Blogger, go to Dashboard – Layout – Add a Gadget – Select HTML/Javascript – copy the template into the text box and replace the links with your own, and save.

So now you’re done! But if you wish to give your widget a more spaced out feel there are a couple of extra customizations available too.

To put a link on a new line, simply add the code <br> You don’t even need to close that bracket, and you can use as many <br> ‘s as you like depending on how much space you want. For example:

Like this page? You can find me on these sites too!
<br>
<a href=”http://my twitter profile link.com” target=”blank”>Twitter</a>

You can also change the alignment of all or part of your widget by adding another pair of brackets – the <div align=”……”> and </div> brackets – placing one at the start of the text you want to align and one at the end. Your options are left, right and center – and if you’re not from the US, don’t forget to use their spelling of center.

For example:

<div align=”center”>
Like this page? You can find me on these sites too!
<br>
<a href=”http://my twitter profile link.com” target=”blank”>Twitter</a>
<br>
<a href=”http://my Goodreads profile link.com” target=”blank”>Goodreads</a>
<br>
<a href=”http://my facebook profile link.com” target=”blank”>Facebook</a>
</div>

Finally, you can also specify your link color by modifying your code to include this style command:

<a href=”http://my facebook profile link.com” style=”color:#000000″ target=”blank”>Facebook</a>

Here you replace the zeros with a special number (called a HEX code), which precisely represents the color you want. You can pick from predefined colors using a Hex code generator website, such as this one, or you can precisely match them to things like your blog header image. I’ve written a post all about that nifty little trick – you can check it out here!

And there you have it! I hope that helps, but if I’m over-explaining or under-explaining anything please let me know. I’m happy to edit the post so it makes sense to all.

Thanks!

Advertisements