View live Demo: http://workmansfruit.com/
Sample of a Google Doc prepared for download:
https://docs.google.com/document/d/1QuUFlNXNZqh0YtxVh8B0bI5flDZbygVcqW3ZpLlCWaY/edit?usp=sharing
Simple instructions on how to install one of these templates.
These are simple website templates that can be used to format the content from well-formed GoogleDocs.HTML documents. ********(Better Instruction)*******>See the Google Doc or "Live Demo" above for simple instructions on how to install one of these templates.
#######################################################################
######### Step 1. Create a Google Docs document. ############
#######################################################################
Create a Google Docs document that you would like to publish to the web or view on your local browser. In page setup remove all margins and double check to make sure that they are set to 0in. margins on all four sides of the document. Set the background-color, fonts and any other styles that you would like your document to appear with in the webpage. The very first item on the document should be labeled as an H1. The template will use the first h1 to create the title and also the top of the menu. As you create your document the headings that you set will become items in the website's menu and the first paragraph will be used to tell search engines what your website is about. When you are finished creating your Google Docs document. Insert a table of contents. Choose the option with Blue Links (without numbers). Then download your document as a WebPage.HTML.
#######################################################################
######### Step 2. Insert the HTML script tag. ###############
#######################################################################
Extract the contents of the zipped file downloaded from Google Docs. Then open the GoogleDocs. HTML In a plain text editor. Navigate to the very end of the HTML file and just before the final closing body tag. (Example... "< /body >") insert this script tag:
<script src="SimpleTemplate/allJS/template.js" id="Blue"></script>Place your chosen color in the id=” ” of the tag above.
The colors that are available are:
Blue
Gray
Green
Lipstick
Maroon
Orange
Tan
This will set the color for the website's theme.
After the script tag has been inserted, Save, and place a copy of your chosen template in the same folder with the HTML document that you just made. If your document had images in it you will have an images folder a template folder and a HTML document. You can now open and inspect your newly created website by either double-clicking on the HTML file or right-clicking and choosing a browser to open the HTML file in.
###################################################################################
########## Step 3. Replace the sample images with your own. ##############
###################################################################################
Three sample images have been provided to give you an idea of the size of and type of photos that will be needed to create your logo, the graphic at the top of the menu and the small icon in the title tab known as a favicon. All of the photos used must be the .png format and they must be the same size In pixels(px) as the original sample images. As long as you use the name of the .png that is currently in use by the template on your photo and you place it in the same folder as the sample images, your new replacement image will be displayed instead of the sample image.
If you're into social media. All you have to do in order for your social media page to be represented by an icon is create a link in Google Docs to your social media page and make sure that the text is one word with the first letter capitalized as shown below.
Note: that YouTube and WordPress are two words without any spaces in between. They need to be capitalized just as they are shown below.
Your social media links should look exactly like the ones shown at the bottom of the live Demo( http://workmansfruit.com/ ), they are sort of like programmatic commands. Doing this will trigger the relative social media icon at the bottom of the webpage.
Social Media Links that are supported with Icons...
YouTube
Google+
Blogger
WordPress
Tumblr
Skype
That's all there is to it!
If you upload it to a server be sure and name it index.html and place it in your public server folder.
By Jason Mayberry -- jasonwmayberry@yahoo.com