How to Translate Webpage Content

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.

How to Build an E-Commerce Website

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.

CSS DIV Code Instead of Tables

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
}