Showing Code on Your Webpage

Showing Code on Your Webpage

I am not a computer geek. I just learn by experience and trial and error and find stuff that works. Sometimes we want to show code on the page. If we just write this in the usual way it won't show because it is active. I have found two ways of presenting code on the page. The first is to change the symbols such as "<" or ">" (the beginning and end of the tags) with a replacement symbol. They are set out below.

What you want to show	What you replace it with
"	"
'	' (except IE)
&	&
<	&lt;
>	&gt;

For example, for the title tag <title> you type in &lt;title&gt;

The second way is easier - use Google Docs. Just prepare the Blogger post in Google Docs and ignore any problems with code. Type it as if it was ordinary text. Then publish the document to Blogger per these instructions. This page was prepared in Google Docs.

Here is some code that makes a simple table that I just dumped into this page:

<table style="text-align: left; width: 50%;"
border="1" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>

What happens is this. When the document is published from Google Docs to Google Blogger the active code is deactivated. In the compose window you will see all the symbols changed automatically for you! Man, this is cool as it saves so much time and is far more accurate. It is very fiddly substituting bits of code with odd meaningless letters and symbols.



P.S. Thanks to www.tutorialtastic.co.uk for the list of code subsitutions in the table on this page.

Google Docs to Create Blogger Post

Google Docs to Create Blogger Post

I have not seen this on the how to do it Blogger websites. But you can use Google docs to create Blogger posts. This is a very relaxing way to write a Blogger post. One major reason why it is what I call "relaxing" is because the window input area is the width of the computer rather than a smallish Blogger compose screen. One important thing we forget is this. Google can under their terms and conditions discontinue Blogger at no liability to them. If we prepare pages in Google Docs they are there to be used elsewhere if we choose. Your work is saved. There are other benefits:

1. You can use all the powerful and easy tools that come with Google docs. There are more tools than for Blogger. And lets not forget it is all free! Google docs is what is called, "cloud computing". The program and the file that is saved is on Google's servers. There is no saving to your hard drive. It works like all things Google, bl**dy well.


2. Google docs have improved over the years and are now full of very nice and very useful tools. And dare I say it they are all easy to use. Perfect for the fearful internet user. I don't want heavy, over bloated MS Word and the like. I like simple, easy, functional and useful. And I think most people think the same way.
   


3. Another great benefit. You can upload your Google doc direct to your Blogger site. It is easy peazy lemon squeazy. And, as I said, Google docs is now full of great tools. Great tables are a breeze and they format perfectly once uploaded into your blog on Blogger. Another fantastically useful tool is the form builder. This is very easy. I created two quizes using this tool (a) Lion Quiz and (b) Tiger Quiz. You are not, incidentally, restricted to uploading to Blogger blogs. This is a very flexible system. You can upload to other hosting services.
   


4. And I love the next tool in Google docs. Never seen it until today. You can create a drawing in Google docs and it transfer to Blogger with the document in the same easy way. Note: at the time of writing this the images produced by this great tool only work in Firefox browser. Both Windows IE and Google Chrome surprisingly do not render the image. I am looking in to this and will get back asap.

I love the way you can use Google Docs to create Blogger blogs. You can also write blogs with Windows Live Writer. Is this better?

Add third column to Minima template

Add third column to Minima template

These instructions relate to adding a left hand side bar to the two column Minima template with a right hand side bar. I used the procedure to build this site. I have found this method more sound that finding a template on the internet and changing the whole lot. Sometimes these customised templates have glitches and this is a hands on mod that works perfectly with no glitches. One glitch that can be encountered is line spacing which can become compressed after tables or bullets. That can be annoying. If you want to see the result of all the instructions carried out - the finished product - and are starting from scratch with a new blog, you can copy the template from this page: http://docs.google.com/Doc?id=dcwcsr3b_588gbwdrddx

• These instructions also relate to the layout version of Blogger. You can check by going to the dashboard screen and find this section:
  
• Update 17-11-09: Note: if you have an existing blogger site with widgets you will find that when a new third party template (non-Google Blogger template) is uploaded there will be a warning that says widgets will be lost. This is normal and applies to the upload of all templates like these. You should accept that and rebuild the widgets once the template is uploaded if they are standard templates or save the code and reinsert in a new widget if they are specialized widgets (html code that you have added yourself). I think one or two of the comments refer to this problem and that is why I have written this update.
  
• OK...onwards.....when in dashboard click on "layout" and then "edit HTML". This takes you to the template code. You now have to find pieces of code to change slightly. The changes are easy. But before you do I would download the template. You can do that using the "download full template" link under the heading "Backup/Restore template". The downloaded template will go to downloads in Windows. I usually drag it out to desktop and put it into a folder to find it more easily when needed. It can be uploaded using the buttons just below the "download full template link referred to.
• Staying on the edit HTML page, we need to find some code. This is best done using a search facility. A search box can be brought up bottom left of the computer window by using "Ctrl F". That is hold down the Ctrl key and then the F key.
• Drop this text into the search box: #header-wrapper {
• That takes you to the code immediately and it is highlighted in green.
• We need to change the width of the blogger template to accommodate the third column like this at the point where you are at in the template:

Instructions for changing code

Stage 1 - change width where and as indicated

Before #header-wrapper { width:660px; margin:0 auto 10px; >border:1px solid $bordercolor; }

After #header-wrapper { width:960px; margin:0 auto 10px; >border:1px solid $bordercolor; }

Stage 2 - either scroll down about 10 inches of text or search using Ctrl F for this: #header .description { then change the code as shown below, marked in red:

Before #description { margin:0 5px 5px; padding:0 20px 20px; border:1px solid #eee; border-width:0 1px 1px; max-width:660px; font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif; text-transform:uppercase; letter-spacing:.2em; color:#999;

After #description { margin:0 5px 5px; padding:0 20px 20px; border:1px solid #eee; border-width:0 1px 1px; max-width:940px; font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif; text-transform:uppercase; letter-spacing:.2em; color:#999;

Stage 3 - Next using the search box mentioned above search for this code: #outer-wrapper { - this stage means adding some code where indicated and changing widths

Before #outer-wrapper { width: 700px; margin:0 auto; padding:10px; text-align:$startSide; font: $bodyfont; } #main-wrapper { width: 410px; float: $startSide; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }

After #outer-wrapper { width: 960px; margin:0 auto; padding:10px; text-align:$startSide; font: $bodyfont; } #left-sidebar-wrapper { width: 220px; float: $startSide; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } #main-wrapper { width: 500px; float: $startSide; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }

Stage 4 - search for this code: #footer { - change width where and as indicated

Before #footer { width:660px; clear:both; margin:0 auto; 10px padding-top:15px; line-height: 1.6em; text-transform:uppercase; letter-spacing:.1em; text-align: center; }

After #footer { width:960px; clear:both; margin:0 auto; 10px padding-top:15px; line-height: 1.6em; text-transform:uppercase; letter-spacing:.1em; text-align: center; }

Stage 5 - search for this code: <div id='main-wrapper'> - this stage means pasting the code in red into the place indicated

Before <div id='content-wrapper'> <div id='crosscol-wrapper' style='text-align:center'> <b:section class='crosscol' id='crosscol' showaddelement='no'/> </div> <div id='main-wrapper'>

After <div id='content-wrapper'> <div id='crosscol-wrapper' style='text-align:center'> <b:section class='crosscol' id='crosscol' showaddelement='no'/> </div> <div id='left-sidebar-wrapper'> <b:section class='sidebar' id='left-sidebar' preferred='yes'> <b:widget id='Gadget1' locked='false' title='Geo IP Tool' type='Gadget'/> </b:section> </div> <div id='main-wrapper'>

Then check with preview. All should be well. Save template and go.......!

Creating Tables in Blogger Blogs

Tables are useful but I find that they are rarely used or seen on Blogger sites. Tables allow a lot of information to be presented in a very readable form and are therefore suitable for a blog as people tend to want to find information quickly and move on.

On this page are some tables that I made up using Google Docs. That is the best way to create them. You can then upload them direct to the Blogger site from Google Docs. These are the steps to take when incorporating a Google Docs document that includes tables into a Blogger website:

1. Prepare table of choice using the menu in Google Docs. It is extremely user friendly. One tip: keep the table tight to the text, don't space it as it seems that the spacing is added in the transfer to the blog (although this may be a glitch particular to my blog). Also note: as you are using Blogger you have a Google account so it is easy to start using Google Docs and when you do you won't go back to MS Word! If you haven't got a Google account get someone who has to invite you. You can ask me if you like, by leaving a comment.
   
2. Once the table and document has been prepared, go to the top right of Google Docs page and click on "Share"
3. Select "Publish as web page"
4. Select "Post to blog" if you have one blog, If you have more than one blog you can select which one to upload to:
   
5. Select "change your blog site settings"
6. Complete the form that comes up. It is self explanatory
7. Click on "OK"
8. Click on "Post to blog"
9. Go to your blog and you will see it
   
10. Edit the post on the blog or on Google docs and republish as before
    

This post was made that way. I have produced three full width tables. These automatically fill the post section of the blog. Incidentally the tables below can be copied into the text entry box of Blogger. Follow these instructions:

1. Place cursor over the top of the table
2. Hold down the left button on mouse
3. Drag mouse over table - there will be no highlighting
4. Don't move the mouse but right click
5. Select copy
6. Go to the new post input window (the Compose window) of your Blogger blog and right click. note: do not drop html into the "Edit Html" window. Blogger compose window is very capable. It accepts almost anything you paste into it.
7. Select paste
8. The table will appear perfectly formed in the window
9. Add text in compose mode
   
10. Change width of table in edit html mode. You can see the width tag clearly, just change the figure to a smaller one as this is at max.
    

Note: In preview mode the tables look different. Don't worry about that. They look "as is" when published.

Update: 25th May 2009: Google Docs creates probably the best tables. Windows Live Writer also produces tables: Write Blogs With Windows Live Writer. Since writing this I have built another page on preparing tables that are more refined (not to detract from Google Docs tables which is an easier overall process). Tables like this one:

This That One Two

Go to this page to see a discussion about the above tabling: Html Table Codes.

How Useful Are Keywords?

How Useful Are Keywords? Keywords used to be the be-all-and-end-all of website building as it gave the webmaster a tool to target customers and find the best words or phrases around which a web page could be built that was search engine optimized. It meant being seen by the search engines rather than being invisible and God there is no joy in being invisible. There is no point in doing it if we are invisible.

If you are not sure what keywords are, you might like to read this post: What are Keywords?

Things are changing or have changed, though. For example, this Blogger site tells us what we want to know as to whether keywords are useful or not. In Blogger you can totally ignore them and still get found by Google provided you have a decent site with decent content and inbound links. The last is very important and is a consequence of the first (i.e. good content). I have built nearly all my pages on keywords but it is becoming increasingly irrelevant. Even the guys at Wordtracker said you can ignore them! (Wordtracker is the number one keyword search website).

So you don't have to knit keywords into articles with the same kind of earnestness as before. But they are still a great market research tool. Keywords tell us as surely as a market research company what people are interested in. That I guess is obvious. What people search for tells us what interests people. We should supply what is demanded. Currently one area that is demanded perhaps more than any other is information on internet marketing and by that, in this instance, I mean how to get your site to be effective and actually do something. Only a very tiny percentage of websites actually do something worthwhile.

If a site gets 30 visitors a day, what is the point except to have some fun building it? And as competition hardens day by day it get harder to be seen. So in response to "How Useful Are Keywords?", the answer is they are useful, indeed essential at least at the initial stages of building a site and particularly with a non Blogger site. Over time the old rules apply. If what you are selling is good, eventually people will buy it. In other words if your content is good in the end people will find it. It just takes longer if the pages are not SEOed well. And keywords form the backbone of SEO work.

I use keywords like this:

1. I have an idea for a topic.
2. I check the keywords for that topic. SBI provide that service or you can use Wordtracker for instance.
3. I pick a keyword that (a) has high demand and low supply (b) can be used in the article - some are simply unsuitable to be used in an article.
4. I use the keyword in the article (a) as a title (b) in the first line (c) a little more than average in the article (d) in a link (e) perhaps as an alt tag for a picture.

But as I said Google is more flexible particularly with Blogger sites so using keywords in a formulaic way is less important but still useful.



From to Home Page