Tutorial: WordPress.com Text Widgets

July 25, 2009 at 7:41 pm · Filed under Social Media, Tutorial, Web 2.0 and tagged: blog, blogging, blogroll, HTML, Tutorial, widgets, WordPress, WordPress.com

My last post was about how to add social media buttons to your VisualCV.  I got positive feedback on it so I thought I would follow it up with a tutorial on the “text” widget in WordPress.com.  This widget may be the least understood and underrated widget available to WordPress.com bloggers.  I’m no expert but am happy to share what I have learned.

I’m going to assume you know something about widgets.  If not, go to “Appearance”, “Widgets” and poke around.  There are lots of useful widgets and my dashboard reports that, as of this moment, I am using 20 on this blog.  But today we will talk specifically about the text widget.  Eleven of the 20 widgets I am using are text widgets.

What some people may not realize is that, in addition to plain vanilla text, this widget also supports a limited amount of HTML code which makes it extremely useful.  To illustrate, when I was first setting up my blog I added a blogroll with links to various blogs I feel are worth reading.  I categorized them too.  Imagine my dismay when I realized that both the categories and blog names were automatically alphabetized and there seemd to be nothing I could do about it (short of playing games with the names themselves).

Enter the text widget.  First, I looked at the source code for my blog to see what the HTML code was for the blogroll.  Mind you, I knew no HTML prior to this.  I then copied and pasted this code into a new text widget.  By keeping the format calls intact the rendered widget looked just like a normal blogroll.  Except that now I could manually rearrange the code to list the blogs in any order I wished.  A small triumph, perhaps, but it made my day.  As an example, the HTML code for my “Career Blogs” widget is as follows:

[sourcecode language=’html’]
<ul class=’snap_preview xoxo blogroll’>
<li><a href=”http://corcodilos.com/blog/&#8221; title=”Nick Corcodilos: The insider’s edge on job search &amp; hiring™” target=”_blank”>Ask The Headhunter®</a></li>
<li><a href=”http://www.hannahmorgan.typepad.com/&#8221; title=”Career Sherpa: Guide for lifetime career navigation” target=”_blank”>Hannah Morgan</a></li>
<li><a href=”http://personalbrandingblog.com/&#8221; title=”Navigating YOU to future success!” target=”_blank”>Personal Branding Blog</a></li>
<li><a href=”http://sirlinkedalot.com/&#8221; title=”Insights on job search, hiring, networking and all things LinkedIn” target=”_blank”>Sir LinkedAlot – a recruiter’s insights</a></li>
<li><a href=”http://blog.spinstrategy.com/&#8221; title=”Tools for Intelligent Job Search” target=”_blank”>Spin Strategy™</a></li></ul>
[/sourcecode]

So far so good.  Each section of my blogroll is a separate text widget so I can order the sections any way I wish.  I then used the text widget to create my social media links, complete with custom buttons.  The code for that widget is as follows:

[sourcecode language=’html’]
<br><a href=”http://www.linkedin.com/in/chrisbigelow&#8221; title=”Click here for LinkedIn profile”><img src=”http://www.linkedin.com/img/webpromo/btn_viewmy_160x25.gif&#8221; width=”170″ height=”27″ border=”0″ alt=”View Chris Bigelow’s profile on LinkedIn”></a>
<a href=”http://twitter.com/cbbigelow&#8221; title=”Click here for Twitter profile”><img src=”http://twitbuttons.com/buttons/siahdesign/twit1.gif&#8221; alt=”Twitter Button from twitbuttons.com” width=”170″></a>
<a href=”http://www.visualcv.com/chrisbigelow&#8221; title=”Christopher Bigelow’s VisualCV”>
<img src=”http://buttons.visualcv.com/visualcv_buttons/visualcv_button_without_head.jpg&#8221; width=”170″ border=”0″ alt=”Christopher Bigelow’s VisualCV”>
</a>
<a href=”http://www.google.com/profiles/C.B.Bigelow&#8221; title=”Click here for Google profile”><img src=”https://cbbigelow.files.wordpress.com/2009/05/google-chris-bigelow.gif&#8221; alt=”My Google Profile” width=”170″></a>
<a href=”http://www.facebook.com/people/Chris-Bigelow/734471596&#8243; title=”Click here for Facebook public profile”><img src=”https://cbbigelow.files.wordpress.com/2009/05/facebookwithlogo.jpg&#8221; alt=”My Facebook Profile” width=”170″></a>
<br><br>
[/sourcecode]

Everything in the fourth column of my blog and 60% of the third column is done with text widgets.  Poke around.  Play.  Discover.  And have some fun.

Clarification: To use my code you must remove the first and last lines of each example (the lines with the “sourcecode” tag in them).  These are required by WordPress.com for me to show you the code in my blog post – they have nothing to do with running it (actually, they are there specifically so it does not try to “run” in the body of the blog post).

Comments (7)