HTML Made Easy for Beginners

New Bloggers are all anxious to learn the basic HTML tricks as quickly as possible as this is a new language for us. You can and will be overwhelmed at times, however if you take it one step at a time you will gain some in-site on basic HTML.

For starters you don't need any HTML skills to start writing content on your blog if you use the WYSIWYG Editor.

Q. So what is WYSIWYG?

A. "What You See Is What You Get"

Now that's pretty simple for the beginner blogger and that may be all you want or need to do for right now. You will see tabs at the top of the Post Editor using the compose mode, the b = Bold Text, i = italic, world w/link = hypertext link, quotes = a separate block of text within your post.

All you need to do is highlight the text and click on whatever you want your text to be using any of these buttons. Experiment with this and if you don't like what you see, then highlight the text again and click on the same button and it will reverse your action.

Now that you have written some content in your post and used these built-in features you will beable to see all the HTML code you created within your post by clicking on the Edit Html at the top right of the Post Editor. Looks all very confusing to a newbie and it's nice to know this was all done with the ease of using these buttons.

This is already sounding pretty simple, right? We'll go into more detail in the next post for simple and easy tricks learning HTML coding skills for your future accomplishments.

Simple and Easy Tricks for Learning HTML

Upgrade New Blogger to Customized Design Template

After switching to the New Version of Blogger you are still using the same Classic Template as before. You have noticed there are no new features such as Layout and Page Elements after making the switch, this means you will need to upgrade your template to Customize Design and you will then have all the new blogger features available to you. It's real simple, follow these steps:

• Login to Blogger
• Click on Template in the dashboard
• Click on Customized Design (just below the Template Tab)
• Click on UPGRADE YOUR TEMPLATE
• Choose Template
• SAVE CHANGES
  

You now have all the new features of Layout instead of Template and will use Page Elements to add HTML JavaScript to your blog instead of adding it directly into the HTML template like you used to do. When you add labels at the bottom of your post, they will appear in your sidebar.WORD OF CAUTION ******* BEFORE UPGRADING YOUR TEMPLATE PLEASE READ THIS

Google's Web Search vs. Your Site Search

Do you ever notice that when you generate HTML/JavaScript code for the Google Search Box and for Your Site Search that the little black dot always stays on the Google Web Search instead of Your Site Search?

Well, if you would like that little black dot to stay on your site instead of on the Web for your Google Search Box, I will explain how simple it is to change. Go to your HTML/Java Script code for the Google Search Box, scroll down until you see 'Search the Web'. Delete the the word 'checked' (shown in red in image below) that is in front of 'value' for searching the Web, now add the word 'checked' in front of your 'value'(shown in blue).

Click on this image below to enlarge

This way your visitors will search from within your site for their information and will also have the option to click on the Web for further searching if need be.

I have often wondered how to do this and while I was visiting one of MyBlogLog community members, I noticed that her Google Search box had the dot stay on her site for search. I wanted it to work that way for me too, so I wrote her a private message through MyBlogLog and she answered me right away. I want to give credit where credit is due, so I thank you for all your help and quick response to my question. I would also like to invite others to give her a visit at WEB 2.0 DIRECTORY: EXAMPLES AND USEFUL SITES.

Copy and Paste HTML/JavaScript Code in Page Elements

Copy and paste your generated HTML JavaScript code in Page Elements for Google's AdSense or widgets. Go to the dashboard:

• Click on layout
• Click on Add a Page Element
• Choose HTML/JavaScript
• Click on Add to Blog
• Copy and paste the generated HTML/JavaScript code
• Save Changes
• Move the Page Elements to the specified area
• Save again at the top right
• View Blog

Resizing Widgets and Google's Search Box

Resizing widgets and Google's Search Box to fit better in your sidebar can be done at the time of preview before generating the code. All you need to do is change the pixel or character width. As an example for the:

MyBlogLog widget has a standard pixel width of 180. Change it to 150 or less so that it doesn't encroach on your written text.

Google's Search Box has the recommended 31 characters. Change the width to less than that, it will change right there in front of you as you change the number, so experiment with it. You can also change the logo to be be on either side, top or bottom of the Google Search Box . Generate your HTML/JavaScript code, copy and paste it into your Page Elements or Template.

See theis post for instructions to Copy and Paste Html/JavaScript Code
Copy and Paste HTML Java/Script Code

Add a Site Meter to Your Blog

The purpose for adding a Site Meter to your blog or website is so you can monitor your traffic. A Site Meter will display the number of page views and visitors that visit your site in the past hour, day, week and year. It also will show you the location from where they came from and many other interesting stats. There are many free Site Meters available, you can do a Google Search for free Site Meters or simply choose this Site Meter and open your free account.

They have a variety of web counter styles from which to choose. Once you have selected your style of Site Meter, you will be given a set of instructions. I prefer to skip the instructions and click on "tracking HTML". You will see "tracking HTML" in that same paragraph at the top of the page for instructions. This is also where you will see your HTML code you will need to copy and paste into your Add Page Elements. I chose the JavaScript HTML for reasons they state.

• Open a new browser window
• Sign in to your blogger account, which takes you to the dashboard
  
• Click on Layout
  
• Add Page Elements
  
• Click on HTML JavaScript
• Add To Blog
• Copy and paste the Site Meter code provided
  
• Save Changes
  
• Preview, place it in the proper location for your blog
• Click Save again at top right
  

Checklist for New Bloggers

Copy and Paste Google AdSense

Go to your Google AdSense Account and click on the AdSense Setup tab. From there select AdSense for content, search and/or referrals. Make your selection and it will walk you through the steps to generate the Google AdSense code.

Open another browser window and login to your blogger account.

• Click on layout
  
• Choose Add Page Element
• Choose HTML JavaScript
  
• Copy and paste the generated code here
  
• Save Changes
• Click on Preview
  
• Move the Page Elements to the specified area
  
• Save
  
• View Blog