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/” title=”Nick Corcodilos: The insider’s edge on job search & hiring™” target=”_blank”>Ask The Headhunter®</a></li>
<li><a href=”http://www.hannahmorgan.typepad.com/” title=”Career Sherpa: Guide for lifetime career navigation” target=”_blank”>Hannah Morgan</a></li>
<li><a href=”http://personalbrandingblog.com/” title=”Navigating YOU to future success!” target=”_blank”>Personal Branding Blog</a></li>
<li><a href=”http://sirlinkedalot.com/” 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/” 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:
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).
Last week a friend of mine (we’ll call him David) asked me how I did the social media buttons on my VisualCV (click the VisualCV button to the right and look in the top, right corner), so I thought I’d put together a little tutorial. I’m assuming you already have a VisualCV. If not, go to http://www.visualcv.com, sign up for a free account, and follow the prompts to import your LinkedIn profile. This is the fastest way to get up and running with all of your basic data. From here you can tweak to your hearts content. Don’t have a LinkedIn profile yet? Shame on you. My recommendation would be to create that first.
Once you have a VisualCV go into edit mode. Your VisualCV consists of a “Main Column” and a “Sidebar”. The edit menu area is split into two parts – one for each of these areas. There are various sections you can add to the main column and sidebar. We’re interested in adding a section to the sidebar called a “Portfolio”. I put mine at the top of the sidebar where it is visible and convenient for folks to click through, but it can be located anywhere in either area (main or side). Once you’ve added this section and positioned it (drag and drop to rearrange) we can start adding buttons.
Let me give a brief background note here: the portfolio section is intended to showcase things in your portfolio (duh!). If you’re a graphic artist this makes sense. But the area can be put to other uses. I know a guy who has a photo of one of his patents shown in the portfolio area of his VisualCV. The key feature of the images you place in your portfolio is that they are clickable hot links. Typically, they link to a larger copy of the image so that folks can see it in more detail. But they can just as easily link to external web sites, which is how the social media buttons work.
So now you have an empty portfolio section. First things first: you need images to use for your buttons. The easy way would be to right-click and “save image as” on mine. The “My Website” button was created by my son, the Photoshop wizard, and then edited by me. Buried deep in the LinkedIn site is a place to get buttons; you can find it at https://www.linkedin.com/profile?promoteProfile=. My Twitter button came from http://www.twitbuttons.com/ where they have quite a collection so, if you don’t like mine, pick another. I created my Google button by typing my name in the Google search box and then doing a rectangular screen grab in a roughly button shape (I may have had to do a little cropping afterwards to get it the way I wanted it). I found the Facebook button by searching around via Google.
Once you have your buttons you need to upload them to VisualCV. It may be easiest to do this one by one as you add each portfolio item to your new section. Click the “Add a Portfolio Item” button at the bottom of the section. I did not title each button as I think it looks cleaner, but that’s a personal taste thing (all I have is a single title for the section, and this you add by clicking on the title area of the overall portfolio section). Add an individual item title or not as you see fit.
Next, click on the “Choose Portfolio Item” box with the “X” through it. This will open a window with two tabs: “Upload” and “Portfolio”. Your portfolio will most likely be empty save for the photo headshot you may have uploaded for the main column. Click on the “Upload” tab, browse to your button image location and select it, add a descriptive title in the box, and hit the “Upload” button. Only certain image formats, such as JPG, are supported – if you get an error your image is either too large or in an incompatible format.
Now that you’ve uploaded your button image you must select it in the “Portfolio” tab. When you do, you are presented with some choices for the image’s “Click-Through Behavior.” Click on “Link Image to a Website”, enter the URL address of your matching social media page, and click the “Add to Section” button. If everything looks okay, click the “Save” button below your new portfolio item.
That’s it. Repeat for any other buttons that you wish to add.
My name is Chris Bigelow and I am a Senior Industrial / Manufacturing Engineer with an MSIE and a BS in Engineering & Management.
I don't design products - - I develop & implement methods to manufacture them quickly, inexpensively, and with high quality.
I strongly impact the bottom line by successfully identifying opportunities to reduce manufacturing cost, cycle time and defects and implementing changes to realize those savings.
Last week a friend of mine (we’ll call him David) asked me how I did the social media buttons on my VisualCV (click the VisualCV button to the right and look in the top, right corner), so I thought I’d put together a little tutorial. I’m assuming you already have a VisualCV. If not, go to http://www.visualcv.com, sign up for a free account, and follow the prompts to import your LinkedIn profile. This is the fastest way to get up and running with all of your basic data. From here you can tweak to your hearts content. Don’t have a LinkedIn profile yet? Shame on you. My recommendation would be to create that first.
This will open a window with two tabs: “Upload” and “Portfolio”. Your portfolio will most likely be empty save for the photo headshot you may have uploaded for the main column. Click on the “Upload” tab, browse to your button image location and select it, add a descriptive title in the box, and hit the “Upload” button. Only certain image formats, such as JPG, are supported – if you get an error your image is either too large or in an incompatible format.
Chris Bigelow 
