Build Your Own Business Website header image

Customize Your Social Networking Links – Part 2 – Create the Unordered List

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects - ,

Applies to -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

In this session, we show how to create the unordered list of the social networking links. We first create the list order and add the corresponding links to the list. Then we put the code in the text widget and test the list to make sure it’s working.

Video Transcript

Rick: So we’re going to start off this process by creating our unordered list. And so this is straight HTML so UL and then LI. Oh actually, sorry. I’m doing this in the php page so I need to quit php first. Okay and so then the LI, our first list item is going to be… is going to say ‘Subscribe’ and I’m just going to copy this then. 1, 2, 3, 4, 5… subscribe. The 2nd one will say Facebook. The 3rd one will say Twitter and then Pinterest.

Lesli: No, then it’s email, I think.

Rick: Okay.

Lesli: Or is it… oh no, you’re right. It’s Pinterest. You’re right.

Rick: Is it –ist or Pinterest? It’s –est. And then email and then the last one is really going to be contact. And what this will do is just link off to a contact form or something like that. And so this is our… this is sort of the basic elements on our list and if we copy that and stick it in our text widget, the list is actually going to show up there. Hit save. There’s our list. Now of course, it’s just a list. It’s not a list of links and it doesn’t have that background image in it.

So the next thing to do is add links to this list. And so the way we do that is by sticking an a… a link tag in there, href equals. And so the subscribe link is there and then the closing a. So now we’ve got a typical link text here. So subscribe now links off to And if we want to put a title here… not capital…title equals and then ‘Subscribe to our feed’. And then the second one is… this is going to be Facebook. And so again, we start off with the opening href equals and we’re going to copy that link address and paste it here. And then close the a tag on the other side of Facebook and then if we want a title to this, we’re going to say title equals and then ‘Visit our Facebook page.’

Okay and so the next thing is Twitter, href equals and then close off the a tag. And then we probably want to get a title to this. What do you want the title for this to be? Connect with me on Twitter or…

Lesli: Sure. That sounds good.

Rick: Okay and then the next thing is Pinterest, href equals. Stick that in there. Let’s go ahead and do our title equals now. What would you say about Pinterest?

Lesli: How about, “Check out my pins on Pinterest.”

Rick: Is it…

Lesli: My pins. It’s my pins on Pinterest. Check out my pins…

Rick: Check out my pins on Pinterest.

Lesli: Yeah.

Rick: Okay and then we’ll close out this a tag. And then our email…

Lesli: And that’s for the email feed.

Rick: Right. Tonight, I’m going to be caught talking about how to do link tags with telephone numbers in them which is sort of analogous to link tags with mail to links in them. Okay so a href equals and then title equals. Let’s see, “Subscribe to this site by email.” And then we want to close out that a tag.

And then finally, contact. We’ll leave contact alone for a moment since we don’t have anything specifically for it to link to. But if we take this and copy it now and we replace this with that and we refresh it, now each of these are links. “Subscribe to our feed.” “Visit our Facebook page.” “Connect with me on Twitter.” “Check out my pins on Pinterest.” And “Subscribe to my site by email.” So if we click on one of them, there we go… takes us right over to that.

Lesli: Perfect.

Rick: Now you know, these are all taking us to off site when we click on this. So maybe what we want to do is keep them on site by forcing this to open up in a new window. There are different schools of thought on this but this is how I would do it. And I would say target = _blank. I’m just going to copy that and paste it in each one of these things. Because what this does is it forces the browser to open the link up in a separate page or separate tab. It doesn’t matter what order these things are in. Your href could be at the end and title could be at the beginning and target = blank at the beginning. It doesn’t matter. It’ll work exactly the same way. But… what’s that?

Lesli: How important is it, since it’s really off site, to do the no follow thing?

Rick: Well, I wouldn’t do no follow to your sites at all.

Lesli: Okay.

Rick: I don’t… the only reason… from my standpoint, the only ethical reason for doing no follow on links on your site is if you are linking to somebody who is really big and doesn’t need the help. But if you’ve found somebody whose content has value and you want to link to that content then I think you have the ethical obligation to not to put a no follow link in there.

Lesli: Oh that’s good to know. Thank you.

Rick: But there’s… because if you like their content, somebody else might like their content. And the fact that you link to their content tells Google that somebody else thinks their content is good. And if you add no follow to that, you eliminate that benefit to those people. So if you feel like you are losing something by having a follow link then I think you should just not link at all. But I don’t use any no follow links on my site. All my site, all of my links on my site are follow.

Lesli: Okay.

Rick: Okay so, that’s part of… I mean, the thing is that you’ll want people, if they’re linking to your content, you’ll want them to have follow on those links. So at that point it’s you know, the good book. So subscribe, now it opens up in a brand new page. Perfect, okay. Pinterest, opens up in a brand new page.

0 Comments… add one
0 comments… add one

Leave a Comment