I’ve noticed and heard a lot of people on WordPress, especially those who came over from the old Microsoft Social Network ‘Windows Live Spaces’, say that there is no Friends list on WordPress.
Well today, I’m going to show you how to make your own if you want one!
First of all, you’ll need to following:
(1) You need a ‘Text’ widget, otherwise known as ‘Arbitrary text or HTML’ to display the friends list in. You can get this by clicking Appearance > Widgets on your Dashboard (Home Page) and then dragging and dropping the Text Widget in to a sidebar. ( See below for picture instructions)
(2) The following code is what we’re going to be putting in to the Text widget.
<a href=”blogaddressgoeshere“><img src=”directlinkcodeforpicturesgoeshere” border=”0″ alt=”blogsnamegoeshere” /></a>
Please note: One Friend per line of code. You will put the blog address, image link and blog name in to corresponding areas I’ve highlighted in red. Obviously you delete the red text and paste in your links and name of the blog in-between the quotation marks. ” ” <–these are Quotation marks.
(3) If you don’t have Photoshop and you can’t use Windows Paint, you will need a programme to resize your images to make them the size you want for your friend’s list.
Lucky for you I already found one that is easy to use and not large. It’s called: Free Picture Resizer Starter. (You can click the link you wont navigate away from this page, a new window will open). Alternatively you could also use Photobuckt as it has a good photo resizer.
Let’s get started…
Step one: Drag and Drop your Text Widget in to the sidebar (which ever one you choose). Once you’ve done that give it a name like ‘Friends’, ‘Friends List’ or whatever you want to call it. Then press save.
Step Two: Next, copy the code above and paste it in to your Text Widget box. You can post as many codes as you like inside the box, one for each friend. Please note: Because my blog displays quotation marks incorrectly, you will have to delete them and replace them in the Text Widget box after you’ve pasted the code in.
Here’s the difference between them:
Step Three: Now you have the code and widget, you need to put you web address, picture codes and name of that blog.
First of all, the web address! You can find this at the top left-hand side of the page you want to list as a friend: Here’s an example using mine:
Now you need a picture to represent the friend, make sure it’s something they will like or one they’ve given you. To make all your friends fit in the one sidebar, you will have to use the Free Picture Resizer Starter Programme to shrink your pictures down to:Width: 53px. Height: 75px (px =pixels). Which I think is the perfect size. Of course you could add the pics at any size you want, but, if they’re all odd sizes you’re friends list wont look uniform.
I’ll show you how to use Free Picture Resizer Start.
After installing and updating, the programme will run, just press ‘Open Image’ on the opening screen.
If the box doesn’t open automatically then just press file and ‘Open Picture’ to select an image that way (See below).
Once you have your image you need to go to the resizer on the left hand side of your screen and put in pixel Width and Height (W: 53/H: 75 [make sure you turn off ‘aspect ratio’ before you enter them]). And then press Resize Image to confirm the size change, then click save. You can carry on doing the rest of your pictures this way by pressing ‘Previous’ or ‘Next’ button at the bottom of the programme window.
Once you have all you photos, up load them to Photobucket. Once you have them Uploaded copy the ‘Direct Link code’ and paste it to the part of the code where I wrote “directlinkforpicturesgoeshere”, obviously after deleting what I wrote.
Next, you just write in what you want to be the name of the site where I wrote: “blogsnamegoeshere”. This will show the name of the blog when anyone hovers their mouse over the photo. Like this:
Once you have all the address, direct codes and names for all your friends in the right place, make sure that all the codes are touching, otherwise the pictures wont display properly. Here’s what I mean:
Pic 1 is by itself. Pic 2 are ‘touching’, there should be no gaps. And no, it doesn’t matter if “Automatically add paragraphs” is ticked up or not.
Obviously I used the same code for all my friends to show you an example, just to save on time, as I’m not creating a friends list of this type yet. Yours will look different as it will have different pictures, but should still display the same way with no white gaps showing.
If you have any trouble with anything here then tell me, I’ll be happy to help!