I Don't Fear The Chaos!

Questioning Everything and Everyone!

  • Wankers Of The Week Archive
  • For readers outside of Wordpress: Enter your email address to Subscribe to this blog and receive notifications of new posts by email.

    Join 48 other followers

Archive for the ‘Tutorials’ Category

How To Create A Friends List On WordPress

Posted by DeadAnarchistPhil on February 19, 2011

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.

Once you’ve done the above you can press “Save” on the HTML Widget and go and see how it looks. You should have something that looks like this: 

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! 

 

SAM'S BLOGSAM'S BLOGSAM'S BLOGSAM'S BLOGSAM'S BLOGSAM'S BLOGSAM'S BLOGSAM'S BLOGSAM'S BLOGSAM'S BLOGSAM'S BLOGSAM'S BLOGSAM'S BLOGSAM'S BLOGSAM'S BLOGSAM'S BLOGSAM'S BLOGSAM'S BLOGSAM'S BLOGSAM'S BLOGSAM'S BLOGSAM'S BLOGSAM'S BLOGSAM'S BLOGSAM'S BLOGSAM'S BLOGSAM'S BLOGSAM'S BLOGSAM'S BLOGSAM'S BLOG

HTML scrollbox

Posted in Computers and Internet, Tutorials | Tagged: , , , , , , , , , | 8 Comments »

How To Get A Media Player On Your WordPress Page/Blog

Posted by DeadAnarchistPhil on December 2, 2010

My Friend Daf was asking if there was a widget on WordPress that allows for the use of a media player. The answer is a resounding yes! However, it can be a bit fiddily if you don’t know your way around WordPress yet. So I thought I’d do a tutorial for her and anyone else who is new to WP and wants some tunes on their Blog/Site.

First of all, you need a music site that will allow you to choose songs and then give you a code for your ‘Arbitary Text or HTML‘ Widget, officially known as the ‘Text‘ Widget. Lucky for you I know of a good site. Try this: Mixpod. You could choose others but I find this is a good one.

PLEASE NOTE: A lot of the songs on this site [Mixpod] are hosted on Youtube, so sometimes the songs you pick will be removed as some People and Youtube delete their content when they wish. To get around this you could add your own songs to your YouTube page (To do that you have to make your videos Public when you post them) and add them to your Mixpod Playlist.

After you made an account on Mixpod and chosen your songs, you’ll want to get the code for your HTML Widget. Follow the pictures and text:

(1)
Photobucket

(1)-> Click the ‘Saved Playlists’ option on the drop down tab. It takes you to your playlists page.

(2)
Photobucket

(2)-> Now click the ‘Save Playlist’ to move on to the next step. Also on this page you can change your Player’s colour or skin if you wish to.

(3)
Photobucket

(3)-> Press the big Green button saying: “SAVE (Get code)”. On this page you HAVE to give your Playlist a name, a ‘Catagory’ and ‘Genre’ are optional.

(4)
Photobucket

(4)-> One this page you just need to press “Click Here”.

(5)
Photobucket

(5)-> On this page you will see a code in the center of the page, DO NOT CLICK IT, it is not the code you want. Instead click the button on the bottom of the screen (ringed in red) that says: “? Other SItes”.

(6)
Photobucket

(6)-> Keep going untill you find the WordPress Icon, then click it.

(7)
Photobucket

(7)-> On this page enter your details and press Post. Don’t worry, your sign-in details are safe!

(8)
Photobucket

(8)-> After you pressed the Post button on the last page Mixpod created a new blog on your WordPress site and posted the player there. What you should do now is edit that post and then copy the code within the red line ONLY. Once you’ve copied the code you can delete the blog and go to your Widgets page. (Appearance > Widgets)

(9)
Photobucket

(9)-> Now you should select the Text Widget in your ‘Widgets’ area, then drag and drop it in to which sidebar you wish to. PLEASE NOTE: There are Left, Right and Bottom Sidebars (Footer). On the left and Right sidebars – unless you only have a single or wide two coloum layout – your player will not fully display, depending on which skin you’ve chosen. However, people will still be able to hear your music and you will still be able to browse your music. If you have a Footerbar it is the perfect place for your HTML box and the Playlist code. (Not all Themes come with Footer/Sidebars, so select one that does. The ‘Twenty Ten’ Theme has four Footers)

(10)
Photobucket

(10)-> Now your HTML Widget is in place you may paste your Mixpod Playlist code in to it and press ‘Save’.

(11)
Photobucket

(11)-> This is the finished result, your player should look something like this in your sidebar/Footerbar, depending on which colours and skins you use and which side/bottombar you’re placing it in.

NOTE: If you want any help with this then leave a comment and I’ll get back to you soon.

My Player:

(Press the Play button)

Posted in Computers and Internet, Tutorials | Tagged: , , , , , , | 10 Comments »