Ads 468x60px

Three Nifty Ways to Enhance Your Hyperlinks - DailyBlogTips

Three Nifty Ways to Enhance Your Hyperlinks - DailyBlogTips

Three Nifty Ways to Enhance Your Hyperlinks

Posted: 12 Mar 2014 05:50 AM PDT

As soon as your blog is up and running, you'll want to use links.

Some of those will point to other places on your blog – e.g. you might include a link from your "About" page to one of your best posts.

Others will link to posts on other people's blogs or pages on their websites.

What you may not know is that WordPress has a couple of handy features that most bloggers never use … and there's a third nifty trick you can do using a little bit of HTML. In this post, we'll cover all three, to help you create more useful links for your readers.

Before we go too far, though…

Hyperlinks 101

… let's do a very quick recap on some key terms.

(You may want to skim this section, if you're already a fairly experienced blogger.)

A hyperlink or link is a clickable piece of text that leads to a web page, PDF, or other resource.

Anchor text is the text that the link is attached to. (In some cases, the text might be the link itself.) e.g.you can find lots of great posts on our site DailyBlogTips.

Here, the anchor text is "our site DailyBlogTips".

If you're using WordPress, it's very easy to create a link:

  1. Highlight the anchor text you want to use.
  2. Click on the "link" icon in the visual editor.
  3. Enter the URL for the link.

But even if you've been doing this for years, you may not know about these:

Tip #1: Open Links in a New Tab

Why: Although users can choose to open a link in a new window/tab, you can force the link to do so. This can be useful if you're linking to external resources (e.g. further reading) but you want to make sure readers don't lose their place on your page.

How: When you create the link, check the box "Open link in a new window/tab". Simple! If you prefer to use HTML code, then add target= “_blank” like this:

<a href="http://www.dailyblogtips.com " target="_blank ">

Whether it opens a new window or tab depends on their browser. The vast majority of readers use tabbed browsing, so they'll get a new tab.

Tip #2: Create Hover-Over Text for a Link

Why: Sometimes, you may want to provide extra information in a little "pop up" box when the reader moves their mouse to click on a link. (This is more commonly done with images – place your cursor over any comic on xkcd for an example.)

How: When you create the link, enter the hover-over text you want in the Title box provided. It's as simple as that! You could use this in conjunction with #1 to alert readers that "This link opens in a new window/tab." Depending on the tone of your blog, you could also use it for humorous effect.

Tip #3: Link to a Location on the Same Page

Note: in the past, this was done using the "name" attribute, which is not supported in HTML 5.

Why: On long pages, it's often useful to provide links between sections, or to have a table of contents as the start. This helps readers to navigate without lots of scrolling up and down.

Here's an example: click this link to jump back up to tip #1.

How: This is trickier than #1 and #2 as you need to use HTML to (a) give the section you want to link to a unique id and (b) create a link to that section, not the page as a whole.

Here's the code I used for that link:

<a id="newtab">#1: Open Links in a New Tab</a>
<a href="#newtab">click this link to jump back up to tip #1</a>

If I was linking from a different page, I'd use this for the second part of the code:

<a href="http://www.dailyblogtips.com/three-link-tips#newtab">  click this link to jump back up to tip #1</a>

(For more on using the id attribute, see this page on the w3schools site.)

 

How will you use one (or more!) of these tips on your blog? Let us know in the comments … and share your favourite linking tips too.

Wanna learn how to make more money with your website? Check the Online Profits training program!

How to View Source Code on Mobile Devices

Posted: 12 Mar 2014 05:04 AM PDT

As you probably know, the source code of a web page is the raw HTML code that gets interpreted by the browser so that you can view things in a user-friendly way (e.g., with images, formatting, spacing and so on).

Sometimes, however, you want to view the source code directly. For instance, you might be performing a security check and you want to view the source code to make sure there are no hidden links or malicious code there. Or you might be testing a new plugin or script on your website (e.g., Google Analytics) and you want to see if the code is being loaded on the page or not.

So how do you view the source code?

The standard way, that works on most browsers, is to right click with the mouse and then select the “View source” option.

This method won’t work on all scenarios, though. For instance, you might be using a terminal without a mouse, or, even more likely, you might using a mobile browser.

In those situations there’s a trick you can use. I am sure it works on Chrome and Firefox, though it could work on other browsers too. You simply need to put “view-source:” on the URL before the domain name. For instance: “view-source:dailyblogtips.com”. Type that into your browser and it will display the source code directly.

It works on the mobile version of those browsers too, so it’s a neat trick for mobile users.

Wanna learn how to make more money with your website? Check the Online Profits training program!

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)