Remove Canonical Links

Posted on August 17, 2010 by admin

Below are instructions on how to remove a cononical link element from multiple files or any line of code from multiple files with one script. I have seen in more than one occasion where someone has a site with multiple files all containing the wrong code for the canonical link.

If you don’t know what a canonical lin tag is read about it here What is a canonical link tag?

Removing them from 100′s of files can be a tedious job. But not on a Mac. On mac you can run one script that will remove a line from multiple files.

The script will search for a line of code that has a common word in it. In this case we search for a line of code that has the word canonical in it. You have to be careful if you use this script for something else. Make sure the line you want to remove has something unique that isn’t anywhere else in your file.

It’s rare in the case for canonical to be anywhere else. Unless you are writing an article about canonical tags as I have here.

One you have the script you can run it and remove the line in just a few seconds from multiple HTML files.

First thing you want to do is create a file in your text editor called deletecanonical.csh with the following code.

#!/bin/bash
for file in *.html; do
mv $file $file.old
sed ‘d/canonical/d’ $file.old > $file
rm -f $file.old
done

Save the file and place in the HTML directory.

Open a terminal window on your Mac and run the command to change directories to where your HTML files are. Learn how to use change directory command here.
If HTML files are in a /documents/websites then run the command “cd /documents/websites”
The file you created for the script file should be in this directory along with all the HTML files in which you want to remove the canonical tag.

Next you need to run the following command to make your file executable.

chmod a+x deletecanonical.csh

Then just run the file in the terminal like this.

./deletecanonical.csh

Voila ….
All .html files that had a line of code with the word canonical have been removed. You can apply this to any line of code you want to delete. Just be very careful. You may want to back up your files just in case you make a mistake.

Posted in Tips and Tricks | Tagged , | 1 Comment

How to Highlight Text on a Website

Posted on August 1, 2010 by admin

If you want to know how to highlight text on your website using CSS like this for example. This is a highlighted text area.

The HTML code can be any type of tag. But the example above I’m using span tag like this. The tag provides no visual change by itself. The tag is just a way to add a style to a part of a text or a part of a document’s content with no other styling. If I use div in the above example then the highlighted text would also have a line break which I don’t want in this case.

This text is highlighted in orange. This text is highlighted in light green. This text is highlighted in bright yellow.

You can do this by adding inline styling, which means the style is in the HTML Document. See the code below.

<span id=”orange-highlight” style=”background-color: #ff9f2f;”>This text is highlighted in orange.  </span><span id=”green-highlight” style=”background-color: #67ff5f;”>This text is highlighted in light green. </span> <span id=”yellow-highlight” style=”background-color: #fff15f;”>This text is highlighted in bright yellow.</span>

Or strip out all the style elements and put them in a stylesheet. So you’re stylesheet would look like below. And in the HTML then you will have only the <span id=”green-highlight”> and so on.

#green-highlight {
background-color: #67ff5f;
}
#yellow-highlight {
background-color: #fff15f;
}
#orange-highlight {
background-color: #ff9f2f;
}

Posted in Tips and Tricks | Tagged | Leave a comment

How to Translate Webpage Content

Posted on July 28, 2010 by admin

Do you want to translate webpage content on your website to different languages? It’s a great idea to offer translation if your site caters to international visitors.

There is one very easy and simple way to do this using Google translate on your website. Visit the google translate site and follow the instructions.

You can choose all languages or specific languages if you like. For example if I want to translate webpage to only Russian then in the Google translate tool I choose specific languages and then just select Russian and English. Always add English as well. This way your user’s can go back to English as well.

It gives me the following code to copy and past on to translate this webpage to Russian.

<div id=”google_translate_element”></div><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: ‘en’,
includedLanguages: ‘en,ru’
}, ‘google_translate_element’);
}
</script><script src=”http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit”></script>

And this is how it looks on your website. You can place it anywhere of course. Try it out and see how it works.

On this Strength Training site for example, you’ll see it on the top right column for every language. So user’s can translate all pages to any language.

NOTE: On this particular webpage the code above gets translated as well. Which I don’t want. But I don’t know how to avoid that. So if you are translating this and want to copy the code from here make sure you go back to English first then copy the code.

Posted in Tips and Tricks | Tagged | Leave a comment

How to Build an E-Commerce Website

Posted on July 27, 2010 by admin

So you want to sell online but you’re not sure where to begin or what you need to get started. E-Commerce sounds like a scary word but it’s not.

With some careful planning and research anyone can setup an E-Commerce site.
You can end up paying anywhere from zero dollars to thousands of dollars to get started. It all depends on your needs and requirements.

Don’t worry though, even If you’re on a low budget, you have some great options. Before you build your e-commerce website do a little research to decide on a few things first.

So what all do you need to get started?

There are 5 main things you must have to get an online shop up and running.

  1. Domain Name: This is the first thing you need. Make sure you choose a domain name that reflects your business name well or something catchy and easy to remember. Most hosting plans come include a domain name.
  2. Hosting Account: You’ll also need a place where you can store all the information, files, images, customer information etc that are used for your website.

    A hosting account is a server or computer that stores your files and serves them on the internet to your users.

    The things to look for in a hosting account are how much space and bandwidth do they provide. Most hosts offer unlimited space these days. Some hosting accounts also offer free shopping cart systems that can be setup with a click of a button.

    Another thing to look for is if they offer SSL certificates. See below to learn what this is. Some hosts offer free shared SSL and also the option to buy your own.

    Bluehost offers unlimited space and bandwidth, free shopping carts and shared SSL.

  3. Merchant Account: A merchant account is used to receive payments from the customers online.   Some merchant accounts also allow you to process payments by phone as well.   Paypal, Authorize.net, Google Checkout, Amazon are all good merchant account options.
  4. Shopping Cart: A shopping cart is the framework or the interface by which customers can place their orders. These are the pages you see online when you purchase things. The pages include the products, your buy buttons, checkout and all that is needed to process and integrate your shopping cart.

    There are many shopping carts out there, which makes it difficult to choose one. Read the article on How to Choose a Free Shopping Cart.

  5. Shared or Private SSL: Finally you need a way to make your payment pages and personal information pages secure (HTTPS). Notice when you buy online you are taken to a secure page to enter you payment information.

    The address displayed in your browser’s url is proceeded by https instead of http. An SSL certificate allows you to serve secure pages (payment pages) over HTTPS instead of HTTP. This encrypts the data as it’s sent through the internet for processing and secures the entered information.

    Without the SSL your customers won’t trust you and will not buy from you. Make sure your payment system is secure.

    Learning how to build an E-Commerce site can be very complicated or very simple depending on what you need. If you’re not sure and are stuck you can always hire a pro to setup your store for you from start to finish. Make sure you setup a system that you can easily maintain yourself once it’s all setup.

    Visit our Web Design page to see our rates for an E-Commerce site. If you are in need of something more unique don’t hesitate to contact us and ask for a quote.

Posted in E-Commerce | Tagged | Leave a comment

CSS DIV Code Instead of Tables

Posted on July 26, 2010 by admin



It’s always better to use CSS div code instead of tables for layout items in HTML. Use tables only if you have tabular data and lots of it. But if for example you just want to display a 1 row, two column item on your pages use div’s.

Here’s a n example.

This is the first column. I can put anything in here.
This is the second column and again I can insert anything in place of this text.

The rest of your content goes here below the two columns. This part needs to be styled to clear: both. See the code below for this.

Here’s the HTML Code for the above example:

<div id=”col1″>This is the first column.  I can put anything in here.</div>
<div id=”col2″>This is the second column and again I can insert anything in place of this text.</div>
<div id=”content-below”>

This is the rest of the content below the columns.

</div>

Here is the CSS code for the above;

#col1 {
width: 48%;
float: left;
font-weight: bold;
padding: 10px 0 10px 0;
}
#col2 {
width: 48%;
float: right;
font-weight: bold;
clear: right;
padding: 10px 0 10px 0;
}
#content-below {
clear: both
}

Posted in Tips and Tricks | Tagged , | 1 Comment