How to copy template from this site

Techniques you learn here is only applicable to this site. I am giving you full permission to copy any template on this site for exercise or for use on your website.

DO NOT APPLY THIS METHOD TO ANY OTHER SITE! I can only give you permission to steal from this site...

If you liked a layout there are 2 ways to get it:

Write in for permission
Buy one that is similar and customize it

Learn how to view page source

Whether you decide to use any template on this site or not, this is one skill you'll have to learn. Make it a habit. Whenever you're looking at a webpage, view the source code after reading each page.

That gives you an idea of how each page is coded.

I cannot over emphasize this. Especially when you'll going to be a site owner and be your own webmater. Develop this habit: After reading/scanning a page, take a peek at the source code.

The step-by-step guide to copying a template from this site:

The steps in short:

View page source
Control A to select all
Copy - Control C
Open notepad
Paste to notepad
Save file as .html
Come back to the view source page
Click stylesheet - .css
Control A
Copy
Paste
Save as css file

Steps in Detail

1 View Page Source

You do this with the browser while viewing a webpage. In this case, you are browsing this page.

If you are using Chrome, right click, and click view page source.
If you are using Firefox, right click, and click view page source.
If you are using Internet Explorer, right click, and click view source.

2 Control-A

Press Ctrl-A. Press the button CTRL, hold and press A. That will highlight all the text on the page.

3 Copy All

Press Ctrl-C to copy all the highlighted text.

4 Open notepad

If this is the first time you open up Notepad, you have to locate it at Start -> All programs -> Accessories -> Notepad

If you had previously opened up Notepad, you should be able to locate it once you hit Start. I suggest you right-click on the Note and choose "pin to start menu." That will make life easier.

5 Paste all

After you have opened Notepad, press Ctrl-V. That is to paste all the copied text onto the blank Notepad you'd just opened.

6 Save file As

Once the source is copied onto a notepad, hit CTRL-S. The dialog box will ask for the type of file to be saved. You'll want to save it as .html, but before you do that, ensure that it the folder you want to save your template. Else direct it to a new location or create a folder for this purpose.

For this exercise, let's save it at:

c:/mytemplate/2columntemplate.html

d:/mytemplate/2columntemplate.html

7 View page source again

Go back to the view page source again. The page should still be highlighted. Just click any blank space and it should go away. You may also choose to ignore it.

8 Stylesheet

This time look look for the line :

<link rel="stylesheet" href="../_css/webscom141.css" type="text/css" media="screen" />

In Chrome and Firefox, it is a clickable link. Click it and you will be brought to the css file.

9 Control A again

You are now familiar with this step - Press Ctrl-A

10 Copy

Ctrl-c to copy all the CSS codes.

11 Paste

Open another notepad and press Ctrl-V.

12 Save file as

Save the file with extention .css

Do this step carefully.

You won't want to save this file as websidy.css as it means nothing to you. Suppose you saved it as style.css, go to the html file you previously saved and change it to style.css

<link rel="stylesheet" href="css/style.css" />

Now, we are not finished yet. Look at the line carefully. It says that style.css is saved in a folder css, which is the subfolder of /mytemplate/.

It means if your html file is saved at:

c:/mytemplate/2columntemplate.html

you css file will be at:

c:/mytemplate/css/style.css

If you had saved the css file in the same folder as your html file, then the path would be:

<link rel="stylesheet" href="style.css" />

Is downloading a template easier?

I could make it easier if I prepared all the templates in a zip file for you to download. Once you unzip the template file, all the files will go neatly into its respective folders. By that's too easy for you.

Do remember that I am providing you with this step-by-step instruction so that you could learn how to do it yourself and not depending on someone else. Sure, you will make mistakes and will have to work through all the steps again should you gotten it wrong. So what if you've messed up. You will acquired the skill eventually.

Enjoy: Super Blogger

Buzz of Day