Optimizing Youtube videos online

Many people doesn’t aware that Youtube is the second largest search engine and the 3th top site on the web. Therefore those of you who do business online should consider taking advantage of this huge opportunities which can be a great marketing tool for starting your own business. The website is completely free and you can upload as many videos as you like. Some simple things that can improve your Youtube rankings include:

Youtube Sharing Tips and Tricks

YouTube is one of the hottest sites on the Web. It lets users to upload and view all sorts of video clips online. Here is little tricks and tips to help you better view and share Youtube videos.

• To share Youtube video to your friends via email, you can click the “Share” link underneath the video player on that video’s page. The Share menu will appear, click “Email this video” and fill in the email addresses that you want to send in the “To” box, separating multiple addresses with commas. You can add some message too if you like (optional). You also can share your Youtube Favorites list, just press the Share button and then proceed the steps as usual.

• If you want to share a Youtube video to a friend, sometimes you want the video to jump to where the most important part and start from there without having to watch the unnecessary part from the beginning. All you have to do is adding this below code to the end of the URL.
  
  #t=04m72s
  
  m stands for minute and s stands for second.

• Or if it is an embed code, put &start=80 to the end of the embed url. The value number of the code represent seconds. So if &start=80 means it will skip the first 80 seconds of the video.

• There is a search box appears when you embed Youtube video to your site. In order to hide the search box, you can simply add &showsearch=0 to the embed url.

• After watching Youtube video, you need to press ‘play’ button again if you want to replay it. If you want the video to replay automatically you can add &loop=1 to the url part of the embed code.

• To make Youtube video play automatically when it is loaded in a browser, you can add &autoplay=1

How to create Playlist in Youtube

In Youtube, a playlist is a list of videos you add in an organized order. In other words, it is simply a collection of videos, it is used just like a folder - organized by whatever criteria you deem appropriate. You can create as many playlist as you want. Videos in the playlist can be played randomly or in order you want. Playlist is quite similar with quicklist except that a quicklist is temporary (not saved when the browser is closed). All playlists can be set for two levels of privacy: “Private”, where only you can view it and “Public”, available for all users to view.

• First, you need to sign up to create Youtube account, otherwise you would not be able to create playlist in Youtube.

• When you are watching the video you want to add in the playlist, click the blue link “Playlist” below the vid.

• Inside the “Select Playlist” box, select Create New Playlist. Write the name of your playlist and you can add short notes about the playlist.

• Click “Add to Playlist” button and you will come to the page where you can enter additional information about the playlist such as Tags and Description, decide whether you want to make it private or public. Fill in the data you need to and save it.

• After you successfully creating a playlist, you can add some other videos into that playlist or creating another different playlist. The title of every playlist you created will appear in the “Select Playlist” box.

• To organize the order of your playlist you can click the dropdown menu on your username (top-right of the screen) and choose “Playlist”. Select which one of your playlist that you want to reorganize the order (at the left column of the screen). Then below of the page you will find list of videos from the playlist you select, click on the number next to the vid and change the order number.

How to make money with Youtube

Youtube, the most popular internet video networking community can be an excellent way to promote your website, affiliates, business or even making money with it. Since it can be used absolutely free, it is a great way to save on advertising costs.

The first thing you should do is of course register for Youtube account and follow the easy instruction provided. After that you can sign up for Google Adsense to earn extra income. Through Adsense, Youtube will pay your share from the revenues.

To do that, you need to sign up first for the Youtube partnership, a revenue sharing program. Create your original videos and try not to copy others, pick your niche and decide what type of video you are going to upload (comedy, casual video logging, news, how-to, drama series, product reviews etc). Adding a watermark on your videos to direct users to your website is a great idea (of course you need to have a website). You are also allowed to insert link in the description box beside your videos to your site and you can put affiliate links and adsense on the site.

Once you have enough videos in your account, promote them by sending it to your friends, social networking sites and forums. You can leave video responses to other videos that match your interests. Find the latest videos posted by the most popular youtubers, make responses that are interesting or funny. If the youtuber likes it, he might favorite it and even mention you in one of his videos then it is a good news for you. Favourites help because they post to the youtubers channel, it’s just like free advertisement. Respond to any emails or messages you receive on Youtube to build a relationship with your viewers. Make more videos and upload them to Youtube, the more subscribers and views you get the better. Make sure the video file format is acceptable for Youtube.

How to change language in Firefox

To change your Firefox language to English (or any other language) you can simply download and reinstall Firefox with your preference language version from this link http://www.mozilla.com/en-US/firefox/all.html after that choose which language you prefer and start downloading. For English language you can use this link http://www.mozilla.com/en-US/products/download.html?product=firefox-3.6&os=win&lang=en-US

How to backup bookmarks in Firefox

There is always a chance that Firefox browser may crash due to various reasons such as new theme installation, add-on installation or any other reason. To have a backup data for bookmark in Firefox is always a good idea as you may never know you will need it someday. It only takes seconds to backup your bookmark, and you can choose two methods to do it (to do bookmarks backup for Internet Explorer browser you can click here):

Browser and Browsing Tips and Tricks

Have you seen a browser who surfs in the internet with remarkable speed. Do you know that there's so many interesting ways to make your browsing much faster and easier. Here i discovered some of many cool tips and tricks that might amaze you. Once you memorized and master all of these tricks you would be able to browse like pro:
Note: Some of these shortcuts may only work for Firefox.

Firefox Tricks and Tips

Quick search. If you discover a word or phrase during your reading on a website and you want to put it into a search engine? Most probably all of you might open in a new tab, go to Google or any other search engine provider and type the words or phrase in there.

Firefox Tips and Tricks

Address bar. Delete items from address bar history. Your browser has the ability to show previous visited URLs automatically. When you type the name of a website in location bar (address bar), the list of visited URLs will appear. If you do not want it to

How to backup Favorites in Internet Explorer

Follow these simple and easy steps to backup your Favorites in Internet Explorer:

How to redirect using meta refresh tag

Meta refresh redirect is a way to redirect pages, it sends your visitors from a page to another page using a meta http-equiv tag that you inserted into the header of an html document.

Here’s how to use it:

• First, create a folder and name it whatever you like. The name of the folder will be used as part of the url link that you are going to use to redirect. So if your folder’s name is “mysite” then the redirect link will be “www.yoururl.com/mysite”

• Create an html file (you can use a notepad), and place the following script and save it as index.html. Replace “your URL” with the URL which you want to redirect and store the file in the folder which you just created.
  

• Upload the folder to your hosting account and you are done.

To test it out, simply type your domain name with the name of the folder, like this:
www.yourdomainname.com/nameofyourfolder and it will automatically redirect the page.

The main disadvantage of this method is that you need a separate file for every redirect.
Note that this method will not cloak your affiliate url in the address box. This basically just do a simple redirection.

By using meta refresh method to redirect, the tag is actually telling the browser to automatically request another page of a site after a certain number of seconds. The content=”” command tells your browser how many second to wait before executing the refresh and the redirection. Becareful of using this method because many SEO experts said that search engines may not like this and they may lower your page rank or even ban you because you are sending visitors to a page other than the one they requested.

How to do a PHP redirect

PHP redirect is a way to redirect pages, it sends your visitors from a page to another page using a PHP script. This kind of redirect is said to be more search engine friendly than using Meta Refresh redirect. There’s several reason webmasters need to redirect pages includes making their long url shorter or because the changes they made to their site’s directories. You can easily redirect your readers to a different page using a small snippet of PHP code (or also known as php redirect). Using this method, your visitors can be transfered to the new page witthout having to click a link to continue. Fortunately redirecting pages using PHP is an easy task.

Here’s how to do it:

• Create and name your new folder. Your folder’s name will be used as part of the url link which you are going to use for redirecting. Let’s say the name of your folder is “mypage” then the redirect link will be www.yoururl.com/mypage

• Create a php file (you can use a notepad), copy paste the following php code below into the notepad and remember to save it as index.php. Replace “your URL” with the URL where you want the redirection to take place and store the file in the folder that you just created.

• Upload the folder to your hosting account and it’s done. Test the new file in all major browsers, like this: www.domainname.com/nameofyourfolder. The redirect should be instantaneous.

Note that this method will not cloak your affiliate url in the address box. This basically just do a simple redirection.

How to use PHP include

If you have a website with plenty of pages to update, to edit each page and change it one by one will be very tedious and boring things to do. The more page you have, the more possibility that you make mistakes. Using PHP include is certainly something you need and it is very helpful because not only it enables you to uniform certain parts of your content pages, but also update them all by only editing a single file.

Before you start using PHP includes, make sure that your web host or server can handle PHP files. Secondly, when you are using PHP includes on any pages, make sure the extension of those page is “.php” instead of “.html”. By using this PHP include script, once uploaded to the web, all of your files will merge appropriately to form one page.

Here’s how the PHP code looks like:

<?php include("filename.php"); ?>

The code can be pasted into sidebars, header, tables and anywhere you like.

Change the "filename" to anything you like, to make things easier to remember, it is suggested that you give it a name which correlates to the content you will be putting in it. For example if it is “header.php” then the file should be made especially for header. If the file contains advertisements for your site, then you can name it “ads.php”.

Next, you will want to create a page where the content of this page will appear in the page that contains the PHP include code. Make sure you save it with the exact same name you assigned to the code above, otherwise the script wont work.

Sometimes the path names doesn’t work and therefore you need to use alternative way, that is using the URL in the include instead, like this:

<?php include("http://www.domainname.com/directory/filename.php"); ?>

Using this method is less efficient in terms of server resources because (just like a browser) it has to create an HTTP session, get the file and then pull it in (even both of them located at the same server). This method of course is slower than using a pathname.

You can include files with .html, .php, .txt, .asp and other extensions.

How to do a PHP redirect How to use PHP include How to redirect using meta refresh tag

What is Reseller Hosting

Many web hosting firms offer reseller hosting service. With this type of hosting, the account owners of reseller service rent out portion of their disk space and bandwidth they receive to other end users. In this case, the account owners are just like a hosting service provider to those end users.

Difference Between Shared Hosting, VPS and Dedicated Hosting

There are basically 3 types of hosting available – shared hosting, VPS hosting and dedicated hosting. Of course there are differences between these three and knowing which type of service is best for your website is very important.

Set up CO.CC domain on 000webhost account

What is CO.CC? If you've never heard of CO.CC, the following sentence I took directly from the source may explain it to you briefly.

“CO.CC is the world's best free domain name registrar and the leading provider of Internet services including - Free dns service, online marketing, url forwarding, e-mail and more.”

CO.CC will provide us with a domain name free of charge (yourdomainname.co.cc). Since the domain name is free and it’s easy to make, this can be absolutely useful for those who want to make a website and are not ready yet to pay for a domain name. Installing the domain on your web host takes about 5 minutes. I found many people use the CO.CC domain name to replace their Blogspot URL for their custom domain (for example, you will see myblog.co.cc instead of myblog.blogspot.com), you can do it to your Wordpress too or any other blog that support the feature.

If you are interested to get the free domain, start registering, which is easy and fast (each account can only have 2 free domain ending with co.cc). Here are the steps:

• Click Here to go to CO.CC (will open in a new tab), fill in your domain name of choice in the box provided and press “check”. A page will come up telling you whether that domain name is available. If not, select a new domain name to try. Sometimes it will charge you $3 or $7 for a good domain name you choose, dont be dissapointed, you can ‘slightly’ change your domain name or add extra letter, or number, or insert a hyphen somewhere in it until it’s totally free.

• If your domain name is available, then you can start to press “Continue to registration”.

• A “Create an account” page will come up somewhere around this step (if i’m not wrong) and if it does, fill up all your details needed.

• After that you will reach to a page where it states “Your new domain has been successfully registered”.

• Click “Set up” and you will get 3 option: Name Server, Zone Record, and URL Forwarding.

• Select “Name Server” and you are given a form where you can enterr a couple of name servers. Let's take 000webhost for our tutorial (since it is also free), the 000webhost DNS server addresses are normally ns01.000webhost.com and ns02.000webhost.com (ok, if you want to convince yourself that we will not entering the wrong name server, lets skip this and move on to the next step).

• Open a new tab and go to your 000webhost account (i assume that you’ve already got your free 000webhost account). From the main page, click “Create New” at the top and fill in your new CO.CC domain and your password in the box provided. After you’re done then click “Setup New Account”

• On the new page click "Back to Account List".
• After that on the Account List page, you will see the nameservers on top. Those nameservers are the one you have to enter into the Manage DNS box column in the previous step which you had skip.

• Go back to the previous tab where you are on the CO.CC Manage DNS form page. Enter those nameservers and when you finish entering the nameservers, click “Set up” button and the job is done.

Keep in mind that it could take uup 72 hours for the name servers to transfer.

Important: Always backup your files after you do an update when you host your site on 000webhost as many users account are closed without any warning or notifications. I had an account in 000webhost and it has suddenly been closed "due to Inactivity" without informing me beforehand. The 000webhost affiliate program is also reported by many people as a scam, you can find this on Google.

How to Create Domain Email at Your Hosting Cpanel

Creating our own email address at our own domain is very easy. Most paid website hosting servers have an opstion for creating your email address with your own domain name. This domain email is included with your cost and setting it up is not only free but it can also add a professional touch to your business. This is why many popular websites choose to have their own domain emails under their contact page. You can create a number of different email addresses on your web server but this number varies from one service provider to another.

Difference between HTML and XHTML

XHTML stands for Extensible HyperText Markup Language. It is a cleaner and stricter version of HTML, also more stable, sharpened and sophisticated version. XHTML, is a combination of XML (Extensible Markup Language) and HTML. XML is designed to describe data, while HTML is designed to display data.

HTML (the original language of World Wide Web) is rapidly being replaced by XHTML. XHTML is similar in most features to HTML due to the fact that XHTML was derived from HTML just to conform with XML standards. There are only a few minor differences between these two markup language, its only that XHTML is designed for being a HTML successor or some call it a better HTML.

• One of the XHTML benefit is that it is more accepted in non “computer” devices such as cell phones, palm devices and other scaled down browsers.

• All elements and attributes in XHTML documents have to be written in lower case (while it is not necessarily in HTML).

• All opening tags must be closed with closing tags, in HTML many of these tags were left open and you still can view them in a browser without errors. Items like line breaks or images which are without HTML closing tags should have XHTML self-closing.

• In XHTML, all the tags also have to be properly nested, it means that if you start tag “a” and open another tag within tag “a”, you have to close the latest tag first and then close tag “a” at the last. Although nesting is also followed in HTML but it is not as strict as in XHTML.

• All values for attributes must be encased in double or single quotes and the attributes themselves should not be abbreviated.

• The image tags should be provided with alt attributes which contain the image description in order to allow them have some requirements for accessibility along with different web standard.

• Another XHTML only requirement is the declaration of the DOCTYPE which determines what rules your document will follow, which it inherited from XML. The first line you will see when you switch your XHTML page to the source code is a document type declaration (also called DTD or DOCTYPE) at the top of your XHTML documents. Most web pages being created today will include a doctype declaration. There are 3 DTDs for XHTML: Strict (only will validate if it is without deprecated tags), Transitional (will still validate with deprecated tags), and Frameset (for a page that “sets” up “frames”). All XHTML documents have to conform to the XML syntax rules.

XHTML is a more forward language that has been created to be compatible with both new and upcoming technology, and it is far more versatile than standard HTML is.

Part 1: HTML Part 2: HTML Attributes Part 3: HTML Table Part 4: Colspan and Rowspan

What's the difference between HTML and XHTML What is CSS?

Learn CSS basic codes

CSS stands for Cascading Style Sheets, is a tool to add layout to your websites. It controls the presentation of web pages. CSS provides information to the browser about how the content on the page should be displayed. CSS covers fonts, lines, margins, width, height, advanced positions and background images. It controls layout of many documents from a single style sheet, apply different layout to different media-types (print, screen, etc) and many more. Compared to HTML, CSS offers more options and is supported by all browsers today.

To structure content html is used, but to format structured content, CSS is used. CSS command consists of three parts: selector – property – value.

Selector {property: value; }

Selector comes first, followed by property and then value. Each property and its value is separated by a colon and ended with a semi-colon. They are also have to be surrounded by curly brackets. Example:

body {background-color: red;}

Selector: what html element applied in this area
Property: what will be changed to the selector.
Value: the value of what you are going to change.
Note: Don't leave spaces between property value and the units. It only works in IE but not in Opera or Firefox.

CSS can be applied in 3 ways to an html document:

• by using the html attribute style (inline) – example:
  
  <body style="background-color: yellow;">

• By inserting the CSS codes between style tag (<style>) – example:
  
  <html>
  <head>
  <title>Example</title>
  <style type="text/css">
  body {background-color: yellow;}
  </style>
  </head>

• By inserting the CSS codes in an external style sheet (a text file with the extension “.css”) and linked to the html document. The link can be created with a line of html code that is inserted in the header section of your html file (between <head> and </head> tag):
  
  <link rel="stylesheet" type="text/css" href="name-of-the-folder/name-of-the-file.css" />

We will look at the one which is the most preferred and widely used: external (the last option above). To understand how it works, you can simply copy and paste each of two of the following codes into a separate notepad and save one as “.htm” and the other as “.css” file but keep both files in the same directory or folder:

Save this to "mypage.htm":	Save this to "style.css":
<html> <head> <title>My Page</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>Hello, I’m Edy Bright</h1> </body> </html>	body { background-color: red; }

Open the .htm file by double-click it and you will see that the css file will effect the other file in terms of layout or design. You can change the CSS file to update the style of all HTML documents that linking to it.

Some other common CSS coding:

Properties and Values:

Colors and background
color:green; - (choose the color)
background-color:#ff0000; - (choose background color)
background-image:url("mypic.gif"); - (background image)
background-repeat:no-repeat;/repeat;/repeat-x;/repeat-y; - (image background pattern)
Background-attachment:scroll/ fixed - (whether still image or movable)
background-position:2cm 2cm/ 50% 25%/ top right - (image background position)

Font
font-family:"Times New Roman", serif; - (what types of font will be used, a comma appears between alternate values, it means if the browser can’t find Times New Roman, it loads Serif). A comma can also separate multiple selectors.
font-style:italic;/ oblique; - (font style)
font-variant:small-caps;/ normal; - (font variant)
font-weight:bold;/ normal; - (font weight)
font-size:30px;/ 12pt;/ 120%;/1em; - (font size)

Text
text-indent:30px; - (text indent)
text-align:right;/ center;/ justify; - (text align)
text-decoration:underline;/ overline;/ line-through; - (add a line in the text)
letter-spacing:6px; - (space between letters)
text-transform:uppercase;/ lowercase;/ none;
list-style-type:circle;/ square;/ upper-roman; - (list item markers)
p:first-letter{color:#ff0000;font-size:xx-large;} – (to change the first letter of a paragraph)
p:first-line {color:#0000ff;font-variant:small-caps;} –(to change the first line of a paragraph).


Margin, Padding, Border
margin-top/ right/ bottom/ left: 100px; - (position of the margin)
or margin:100px 40px 10px 70px; - (clock-wise= top, right, bottom, left)
padding:20px 20px 20px 80px; - (padding= space between the border and content)
border-width:thick;/ thin;/medium;
border-style:dotted;/ dashed;/ solid;/ double;/ groove;/ ridge;/ inset;/ outset;
border-style:dotted solid double dashed; - (adding different border style from top-right-bottom-left/ clock-wise direction)
border-top/ left/ bottom-color:red; -(apply a color to only one side of a border)
border-bottom/ top/ right-style:solid; -(add style to only one side of a border)
border-top/ left/ bottom-width:thick; -(set the size of a border)
outline:green dotted thick; - (a line drawn around elements (outside the borders).
outline-color:#00ff00;/ style:dotted;/ width:5px;


position:absolute;/ relative; top:150px; left:500px; - (locating an element whether in absolute or relative position)
z-index:1;/2;/3; etc. - (To make an element become layers and the value of its property can be used as an order of which elements overlap one another)

visibility:hidden – (to hide an element, but it still take up the same space as before)
display:none – (to hide an element and it will not take up any space)
max-height:/min-height:/max-width:/min-width:100px; - (set the maximum/ minimum height and width of an element)
display:inline – (to change block element become inline)
display:block – (to change an inline element to a block element)



Selectors:

Link
a:visited - (a visited link)
a:active - (a link the moment it is clicked.)
a:hover - (when you place a cursor over a link)

Class, Id and Div
class="....." - (to specify a style to a particular element or group of elements)
id="....." - (to specify a style for a single, unique element)
span class="....." - (for adding visual features to selected parts of text)
div id="....." - (to group one or more block-level elements)

Comment
/*put your comment here*/ - (you can add comment on top of css coding to explain your code, comments are ignored by browsers)

Part 1: HTML Part 2: HTML Attributes Part 3: HTML Table Part 4: Colspan and Rowspan
What's the difference between HTML and XHTML What is CSS?

Colspan and Rowspan in HTML Table

Part 1: HTML
Part 2: HTML Attributes
Part 3: HTML Table
Part 4: Colspan and Rowspan

Colspan and rowspan are html attributes used to span table cells across more than a column or row. Colspan is short for “column span” or indicates “how many across” while a rowspan indicates “how many down”.

Colspan is used within a <td> tag to specify how many columns it should span.
Here, i give you the example:

<table border="1">
<tr>
<td colspan="5">Cell 1-5 combined</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
</tr>
</table>

and here is the outcome:

Cell 1-5 combined
Cell 1	Cell 2	Cell 3	Cell 4	Cell 5

By setting colspan to "5", the cell in the first row spans five columns. Here below is another example for better understanding:

<table border="1">
<tr>
<td colspan="3">Cell 1-3</td>
<td>Cell A</td>
<td>Cell B</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
</tr>
</table>

Here when you see in a browser:

Cell 1-3			Cell A	Cell B
Cell 1	Cell 2	Cell 3	Cell 4	Cell 5

Rowspan sets how many rows a cell spans.
Example:

<table border="1">
<tr>
<td rowspan="5">Cell 1-5</td>
<td>Cell 1</td>
</tr>
<tr>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 5</td>
</tr>
</table>

and here the result when you see in the browser:

Cell 1-5	Cell 1
	Cell 2
	Cell 3
	Cell 4
	Cell 5

Not as hard as you think right?, and with a number of practices, it should get easier and you might get used to it :)

What's the difference between HTML and XHTML What is CSS?

Using HTML codes to create Tables

Part 1: HTML
Part 2: HTML Attributes
Part 3: HTML Table
Part 4: Colspan and Rowspan

Tables are defined with <table> tag and it is made of rows (<tr>) and columns (<td>). Tr means table row and td means table data.

• To start creating table, you need an opening table tag, which is <table> and to end it, is to use table closing tag which is </table>.
• To start creating horizontal table rows you need the opening tag <tr> and after entering number of column/s you need to end it with a closing tag </tr>.
• To start making column in the table, as usual you need the opening tag <td> and after entering all the data, close it with a closing tag which is <td>.

What is attributes in HTML

Part 1: HTML
Part 2: HTML Attributes
Part 3: HTML Table
Part 4: Colspan and Rowspan

What is an attributes in HTML?
Attribute is an additional command towards the element which are written after a start tag and come in name/value pairs like: name=”value”. The values are always enclosed in quotes.
Here are the examples of attribute:

What is HTML and how to use it

Part 1: HTML
Part 2: HTML Attributes
Part 3: HTML Table
Part 4: Colspan and Rowspan

HTML stands for Hyper Text Markup Language, it is a language (computer language) to tell your browser how a page should be displayed, which makes it possible to present information, showing pictures, graphics and etc. The language consists of codes, and there are plenty different codes for all sorts of formatting. When you view a page from a browser, what you see is the browser’s interpretation of HTML.

You can see the HTML codes of a page on the internet by simply clicking “View” and then select “Source” or if you are using Firefox browser you can press Ctrl + U on your keyboard to view the codes. For people who do not know what is or how to use the codes, HTML code can be very complicated and scary to them. The good news is that HTML is very easy to learn and understand, if you want to build your own website you need to learn what is HTML and how to use it.

The HTML codes consists of tags (markup tags or usually called as HTML tags), and the tag itself consists of keyword inside angle brackets. Most HTML tags start with an opening tag and end with a closing tag. A HTML document has 2 parts: a head (information about the page, anything you put here will not be displayed on the page) and a body (information that constitutes the page, anything you put here will be displayed on the page).

Still get confused? Well, i think it’s better if we put it into practice. Practice can explain and make you understand much better rather than just theory.

Open a Notepad, copy and paste he following HTML codes:

<html>

<head>

<title>This is my first website</title>

</head>

<body>

<p><b>This is the first sentence</b></p>

<p><i>This is the second sentence</i></p>

<p><U>This is the third sentence</u></p>

</body>

</html>

Save your notepad and name it “mypage.htm”, don’t forget to choose “All Files” otherwise you save it as a text document and not HTML document.
The ending “.htm” means that it is an HTML document, you also can name it with the ending of “.html”, it gives the same result. After that go and open the document by double-clicking the file. See and notice what happen to each of the sentence, different tag you apply to each of the line produce different effect to the text.

Here another common basic HTML commands:

<HTML> </HTML>	To create a Web page. All Web pages must have this command.
<HEAD> </HEAD>	All the head elements are written here, anything you put inside a head tag will not be displayed on the page. Elements inside head tag include scripts, meta information, instruct the browser where to find style sheets and more.
<TITLE> </TITLE>	Displays the Title in the title bar area.
<BODY> </BODY>	Anything you put inside the body tag will be displayed on the page and will be shown in the browsers to users.
<B> </B> or <strong> </strong>	The text will be shown in Bold
<I> </I> or <em> </em>	The text will be shown in Italics
<u> </u>	To underline a text or words.
<strike> </strike>	To insert a horizontal line in the middle of the text.
<CENTER> </CENTER>	To adjust anything you put in the center of the page.
<H1> </H1>	Heading 1
<H2> </H2>	Heading 2
<H3> </H3>	Heading 3
<H4> </H4>	Heading 4
<H5> </H5>	Heading 5
<H6> </H6>	Heading 6
<BR>	New Line. Creates single space bettween lines.
<P> </p>	New paragraph. Creates double space between lines, paragraphs.
&nbsp;	To add a space.
<HR>	Produces a horizontal rule across document.
<ul> <li>A list</li> <li>Another list</li> </ul>	A list information Another list information
<ol> <li>First list</li> <li>Second list</li> </ol>	First list information Second list information

<b> means "bold"
<i> means "italics"
<em> means "emphasis"
<u> means "underline"
<h1> means "heading 1"
<br> means "break"
<p> means "paragraph"
<hr> means "horizontal"
<ul> means "unordered list"
<ol> means "ordered list"

It doesn’t matter whether you type the tags in uppercase or lowercase, it will give the same result.

In the HTML code, there is attribute. Attribute also plays one of the most important role, but what is it? Let us discuss it in the next page.

What's the difference between HTML and XHTML What is CSS?

How to Add Amazon Associates to Blogger

Not very long ago Blogger.com introduced a new and cool feature which enable us to add Amazon product listings easily to our posts.

It is easy to do, you can follow the steps below if you are interested to add Amazon products to your posts fast and easy without having to bother opening Amazon site in a new tab and searching the product you want, copy the link and paste it on your post.

1. First thing to do is you need to register or signup as an amazon affiliate.
2. Go to your Blogger dashboard and then click Monetize.

3. Under the Monetize menu, click on the Amazon Associates tab.
4. Fill in the Amazon affiliate ID in the text field provided. 
5. After that follow the instruction on that page if you want to add product previews to your posts.
6. After that click Save Settings.

Now when you go to make a new post, you can see there is an Amazon box at the right side of the page (see the screenshot below).

How to add amazon products to your blogger post

You can search and choose the Amazon product from there. You can also choose whether you only want the link to appear on your post, the image or both the link and image. Point the cursor on your post where you want the product to appear and then click one of the three option (link, image or link+image) and the product will automatically appear on that chosen spot. You can see the example i did on the right side.

See how easy it is to use this new feature to add Amazon product to our post.

Swap blog title with page title in Blogger blog

By default, Blogger will place the title of your blog before the title of the article in the title bar. According to Search Engine Optimization, it is much better if our keywords in the title bar should comes first followed by the title of the blog. This to ensure that search engine robot or spider will read the keywords before anything else, so that our site is lkely to be placed higher in search engine result.

Fortunately, there is a good hack to rectify this problem. By simply swapping the position of the page title with the blog title, we can obtain significant improvement in the search engine result.



To swap the position of the blog title with the page title:

• Login to your blog and navigate to Layout – Edit HTML.

• Always backup your template before changing anything to avoid any undesired outcome. Click ‘download full template’ and save it into your harddisk.

• Replace this following line of code:
  
  <title><data:blog.pageTitle/></title>
  
  With this one:
  
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
  <title><data:blog.pageName/> - <data:blog.title/></title>
  <b:else/>
  <title><data:blog.pageTitle/></title>
  </b:if>

• After that click on ‘Save template’ and you’re done.

Try to view your blog, your page title should now appear before the blog title and is separated by the ‘hyphen icon’. This should works even if you view your entire pages of your blog.

Add meta tags to each Blogger posts

Meta tag is an HTML tag which resides in the <head> section of a web page. Meta tags is not visible when seen in a browser, so visitors never see them. Meta tag is very valuable because of the fact that search engines are going to use it to describe our site in the search result. Meta tags are also used as an information for the search engine as whether your site is the one that users are looking for. Ignoring on-site search engine ranking factors can be costly because things like keyword-rich titles and solid internal linking can produce a very significant impact. Since Meta keywords and Meta description are not automatically generated for Blogger templates, we have to add them to the HTML markup of our Blogger templates.


How to add meta tags to each of your Blogger page:

• Login and open the dashboard of your Blogger blog
• Click Layout and Edit HTML
• Before making any changes to your template, always backup your current template.
• Find the following code:
  
  <title><data:blog.pageTitle/></title>
  
• Copy the following code snippet below, and after that paste it below the 'grey' code:
  
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
  <meta content='DESCRIPTION' name='description'/>
  <meta content='KEYWORDS' name='keywords'/>
  </b:if>
  
• So finally it will look like this:
  
  <title><data:blog.pageTitle/></title>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
  <meta content='DESCRIPTION' name='description'/>
  <meta content='KEYWORDS' name='keywords'/>
  </b:if>
  
  That will add the meta tags for your homepage of your blog.
  
• Replace the DESCRIPTION with a description about your homepage (keep it less than 150 character).
• Replace the word KEYWORDS with your keywords, each keyword separated by commas and make it relevant for your homepage (keep word repetition less than 3 in order to avoid keyword spamming).
  
• To create and add another meta tags to each of your Blogger posts, copy this following code:
  
  <b:if cond='data:blog.url == &quot;URL-OF-YOUR-PAGE&quot;'>
  <meta content='DESCRIPTION' name='description'/>
  <meta content='KEYWORDS' name='keywords'/>
  </b:if>
  
  place the code just below the homepage code that you just entered. You need to repeat the step above in order to create another meta tags for your next individual post.
  
• You can check whether you've add the meta tags correctly without any mistake with any meta tag analizer provided on the web like submit express or seo centro.

How to Stop or Turn Off Commenting Feature on Blogger

Most bloggers love comments, especially useful ones. But when people flood your posts with spams, it would be tiring for you to manually delete all those unwanted comments that could hurt your blog.

In Blogger, by default, comments enabled for all our posts. Have you ever wanted to turn off or disable commenting on your specific post on your Blogger post? In fact, you are allowed to do so, here’s how:

How to remove date, time and author on Blogger posts

There are many reason for blogger to hide their post date, post time and post author. It might appear less cluttered to them or simply they want to make their blog looks cleaner and tidier. Now Blogger provides an easy and fast way for you to hide those options without having to edit your HTML template and involve in HTML codes. You can choose to hide only post time, post date, or post author, or all of them, and even to hide some other options like label, comments, Show Quick Editing and etc . Ok lets we begin the tutorial:

• First thing to do is of course sign to your blogger account and go to your Layout from your dashboard, then at the bottom of the Blog Posts box, click an edit button and a pop up box will appear.

• Now all you have to do is uncheck the radio button next to each Post Page options to hide the menu and check it again to re-show it on your blog.

• When you’re finished with your settings, click save and the task is done.

You can also check the date of an article or web page and find out when it was first published.

Remove Subscribe to: Posts (Atom) link

You will see there is “Subscribe to: Posts (Atom)” link in every new Blogger blog that enable visitors to subscribe to your Atom feeds. On the main page, this will link to your main site feed, whereas on post pages, this wiill link to the comments feed for a partricular post. However many bloggers choose to remove it because it occupies space at the bottom of the template so it does not look nice. Moreover, blog owners who try to make their blog looks more like a website will definitely choose to eliminate those links. To remove the “Subscribe to: Posts (Atom)” links:

• Sign in to Blogger and go to dashboard > Layout > Edit HTML > tick Expand Widgets Templates box.

• Save a copy of your current template, just in case if you do something wrong.

• Find and choose one of the following codes below and delete it:
  
  <b:include data='feedLinks' name='feedLinksBody'/>
  
  Or
  
  <b:include name='feedLinks'/>

• To be sure this has worked, preview the blog template and save the settings, the “Subscribe to: Posts (Atom)” link wont be there anymore on your blog.

Remove Newer or Older Post Links

If you want to make your Blogger blog looks like a website, one of the things you need to remove is the “Newer Post”, "Home", and “Older Post” links from Blogspot post footer. Besides removing them you actually can change them or add images instead of “Newer Post” and “Older Post” links. There are two ways to do it and these hack are easy to perform and will take only few seconds.
How do i get rid of "Older Posts" - "Home" - "Newer Post" links?

• From your Blogger dashboard click on Layout > Edit HTML > tick Expand Full Templates box.

• Don’t forget to backup your template, many bloggers made mistakes in this hack.

• Search for the following code:
  
  <data:newerPageTitle/>
  and
  <data:olderPageTitle/>

• Now simply delete above codes or replace with anything you want to write, to add picture just place the image URL before the Previous Page and Next Page. Remember to preview changes before saving it.

The second method is:

• Go to Layout > Edit HTML > tick Expand Full Templates box.

• Again, backup your template.

• Find these codes below:
  
  #blog-pager-newer-link {
  float: $startSide;
  }
  
  #blog-pager-older-link {
  float: $endSide;
  }
  
  #blog-pager {
  text-align: center;
  }
  

• Add "display: none;" inside every curly braces, it will then looks like this:
  
  #blog-pager-newer-link {
  float: $startSide;
  display: none;
  }
  
  #blog-pager-older-link {
  float: $endSide;
  display: none;
  }
  
  #blog-pager {
  text-align: center;
  display: none;
  }

• Preview the changes and click save template.

How to change Blogger URL address

Simple steps on how to rename your Blog’s URL:

• Sign in to your blogger.

• On your dashboard, click on “Settings”

• On your Basic Settings page, switch to “Publishing” tab

• On Publishing Setings page, you have 2 options to change the URL of your blog. The first one is to enter a purchased domain name which will omit the “blogspot” in your URL. The second option is to type in the input box provided with your new URL ending still with “blogspot.com”. You will need to checkfor availability just as you did when you first created your URL. If the new address is available, your blog will be republished on the spot, under that address.

• Complete the word verification and save your settings.

Important:
There are many disadvantages of changing your blog URL especially if you have a well-established blog and has been on the Web for a long time. If you changed your blogger’s URL, any existing incoming links will become dead, therefore you will lose your loyal visitors who frequently visit your blog, except they are informed beforehand. These dead links include those bookmark links that you received from your social bookmarking websites and the links from Favorites and Bookmarks of your visitor's browser. Secondly, you can say bye- bye to your Alexa ranking and your Google pagerank which solely depends on your blog’s URL. You will have to wait for your new URL to be indexed by the search engines all over again.

So before changing your blog URL think it carefully, do it if it is absolutely necessary for you.

How to add Favicon to Blogger blog

Favicon stands for “favourite icon”, (also known as a bookmark icon, shortcut icon or website icon). It is a 16 X 16 pixels icon which appears next to a website’s URL in the address bar, it also appears next to the page’s title in a tabbed document interface and in bookmarks. Adding a favicon to your own blog is a good way to distinguish your blog from millions of other blogs.


There are many free online tools which can help you generate a favicon. As for me, i use http://www.html-kit.com/favicon/ for my favicons. When you upload your favicon image to HTML kit’s they will automatically give you two 16 X 16 favicons to download, one is still image and the other one is animated version. You also can create your own image for your favicon from any image manipulation softwares like Gimp or Photoshop, just by selecting the dimension to be 16 X 16. I know there are still many sites that many people recommend to generate a favicon, but i dont have time yet to explore them.

To add favicon to your Blogger:

• You can upload your favicon image to an external web host, such as Photobucket or your Google Picasa album. Login to your Picasa photo album and Click upload button to upload your image. Once your image is sent, copy the URL by clicking “Link to this photo” on the right side of the screen. To copy your image URL, you also can do it by right-click on the image and select “Copy Image Location”.

• Login to your Blogger, from the dasboard click Layout and then Edit Html.

• Perform your back-up.

• Find the following code:
  
  </head>

• Just above the code (or in between <head> and </head> tags), add the following HTML code:
  
  <link rel="shortcut icon" href="Your-Favicon-Image-URL" >
  
  or
  
  <link href='Your-Favicon-Image-Url' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
  
  Replace the red text above with your favicon image URL. Once you're done, the code should finally appear like this (i take mine for an example):
  
  <link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAK7V9Xnb759Kcso_g_BRPRljqrEBkIqzf3rBY2tGc5QxXihzecnkc4zOx77F9b4iHLb_hRyrBe4f51yuAXAroL7pIuq0NvoZBPQgzRho4L8kz_OO_fWTMXVS37g4J3t36FPRlkS5yvI9n/' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
  </head>

• Save your template and test.

If the favicon still doesn’t appear, clear your browser’s cache file and restart the browser. After that renavigate to your blog.

How to remove navigation bar in Blogger blog

You will see a navigation bar of every blogger blog, the colored stripe across the top that consists of Blogger search box used to search your posts, a link to your dashbord, a place to sign in, make a new post, and customize your blog option. Sometimes, the color of the Navbar does not fit for your Blogger design or template and Blogger does not provide any option for us to remove it. As many Blogger do not like to have it and choose to remove this bar in order to make their blog look more professional and does not look like the rest, and you need not try to match your blog’s colours to the limited colour palet which the Navbars come in. Secondly when your readers click on “Next Blog” on the navbar, they will be redirect to some other blog on the same window and your blog will disappear from the view.

How to remove navigation bar from your Blogger blog (actually it is just hidden), it’s easy to implement. Here are the steps:

• Sign to your Blogger, from the dashboard click Layout > Edit HTML.

• As usual, it is always recomended that you back up the template before changing anything. To perform the back up, just click “Download Full Template” and save it to your computer.

• Now look for the following code:
  
  /* Variable definitions
  

• Immediately above that line, insert this following code:
  
  #navbar-iframe {
  display:none;
  }
  

• Click “Save Template” orange button to save the changes.

• Done :)

How to Modify and Delete Borders in Blogger

For those using Blogger with Minima template, you can actually remove or change the borders from the header or sidebar. But if you just simply want to change the color of your borders, the easiest way is through Dashboard --> Design --> Template Designer --> Advanced.


From there you can choose the color you like, or make the color of the border the same as your blog background in order to ‘hide’ them. After that you can press “Apply to Blog”.

To alter other border such as header, you need to go to dashboard --> Design --> Edit HTML, then search for these lines:

/* Header
-----------------------------------------------
*/

#header-wrapper {
margin:0 2% 10px;
border:1px solid $bordercolor;
}

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center; color:$pagetitlecolor;
}

To change the size (height and witdh) of the border, you can insert the following line/s inside the curly brackets of the header-wrapper:

height:140px; (this is for the height)
width:780px; (this is for the width)

Just change the amount of pixel you want for your border.
If you want to remove the border around your image, you can just delete the whole line that i highlight in green (see below).

/* Header
-----------------------------------------------
*/

#header-wrapper {
height:140px;
width:780px;
margin:0 2% 10px;
border:1px solid $bordercolor;
}

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

In the Minima template, the below codes create the border at the bottom of your every widget including the bottom of your main post:

.sidebar .widget, .main .widget {
border-bottom:5px dotted $bordercolor;
margin:0 0 1.5em; padding:0 0 1.5em;
}

If you want your border at the bottom of your sidebar to be different from the border at the bottom of your main post, you can split the above codes like this:

.sidebar .widget {
border-bottom: 3px dashed $bordercolor;
margin:0 0 1.5em; padding:0 0 1.5em;
}

.main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

you can change the style of your border to Dots, Solid, Groove, Double, Dashed etc.
If you change the -bottom above to -top, -left, -right, that setting will apply to border only in those areas.

You can actually steal other template's border and add it to your template so that you can have similar border style from the template you taken from.

How to modify or change image border in Blogger

In previous post you probably have read my post about how to remove image border from your Blogger posts, in addition here i want to show you how to modify, change, add styles or effects to the border of your images as well.

There are number of methods to change the color of the image border in Blogger. Here is one of them:

• From your Blogger dashboard, go to Layout – Edit HTML (no need to check the Expand Widgets Template box).

• Find the following code, you can use Ctrl + F to find them via your browser finder:
  
  .post img {
  padding:4px;
  border:1px solid $bordercolor;
  }
  
  or
  
  img{
  padding: 4px;
  border:1px solid $bordercolor;
  }
  

• The code above is the tag for your images style. After you found it, change the following line:
  
  
  border:1px solid $bordercolor;
  
  to
  
  border:1px solid #FF00FF;
  

• Replace the red color text above with your own color HTML code. For example if you want it to be dark red: border:1px solid #B40404; or if you want it to be light green: border:1px solid #A9F5A9.

• After you’re done click Save Template button to save your changes.

To change the border line style around your image from solid line to dotted line you can simply change the word like this:

border:1px dotted $bordercolor;

To change the border line style around your image from solid line to dashed line you can simply change the word like this:

border:1px dashed $bordercolor;

Dashed style.

The word control the type of your image border, and other types of line style that you can use as a border are "groove", "inset", "outset", "double", "ridge" and "hidden". Try replace with those words and see how it looks like.

border 8px Groove, padding 2 px	border 8px Double, padding 2px
border 8px Inset	border 8px Outset
border 8px Ridge, padding 2px	border 8px Dotted

What is padding? Padding is a space between your border and your image. To increase or decrease the space between your border and image you can change the pixel number from this following line:

padding: 5px;

To add a background to your image as border:
To add a background effect you must have your padding on, after you add your padding then you can add this following line to your code:

background: url(Image Location);

Replace the Image Location text to your image URL. Your code should then look like this:

.post img {
border: 6px solid #FF0080;
padding: 12px;
background: url(Http://www.pichost.com/myimage.gif);
}