GUIDE TO GOOGLE ANALYTICS

This concept goes to the Internet and websites and also a tool that gives information about finding your site. Engine testing is one of these easy to use and free tool that provides a web statistics. Here is a brief tutorial that helps you use the true potential of Google Analytics

Step 1: Create a new google analytics account

The Google Analytics System is a free software tool provided by Google. Creating an account is easy and simple. All you need to make your Gmail account from Google Analytics email engine identification. Once a Gmail e-mail ID is installed, you can go to Google Analytics engine site and register your site for Google Analytics.

Step 2: Installing the google analytics tracking code

Once you have entered the engine Google Analytics, you will be redirected to a page that contains links to the analytical reports on its website. If you do not have tracking code on Web sites, click on “Add Website Profile link.

If this is the first time the engine Google Analytics, and you do not have tracking code on your website or any of its pages, choose the “Add a profile for a new domain option. Once done, scroll and write down the address of the page you want to install the tracker.

Select a time zone, click “Continue.” Once done, the engine Google Analytics can automatically detect if the tracking code installed on the Web site or page that you gave them. Choose any of the codes below (better and press Ctrl + A Ctrl + C) to copy and paste the code into a Web site and Web pages you’d like Analytics engine for analysis.

Be sure to install the code in any place before the end of the body (body) of labels. Click “Continue.” Annual
GE will have a Web page, Web site or Web sites you’ve installed the tracking code. Click on View Reports to go to the toolbar.

Step 3: The google analytics Toolbar

The Google Toolbar is your home page. Through this page, you can access almost any information you need on your site, or even one page. Once you have signed the website, you are redirected to a website a list of profiles, which is recorded on the web, and everything you’ve installed the Google Analytics code Tracker.

When you are in the toolbar, you can see the following analysis of your site:

Using the site: The site of the use of the column gives you the necessary information about the traffic on your site. Visits column indicates the number of visits and unique visits in a timely manner. You can also find more information on the number of pages per visit on the toolbar.

You can also get information on the percentage of dropouts from your website or webpage. Bounce rate is the number of visitors to its website, which is reviewed on its website directly to the page or start page. Engine Google Analytics tells you the exact time a user spent on your site. You can also calculate the percentage of new and unique visits to your site.

Traffic Sources Section: The Traffic Sources section tells more about the traffic on your site, and explain further. You can get information on all sources of traffic to your site. In addition, you can separate traffic directing traffic, search and site traffic. Google Google Analytics can also give you information about traffic to your AdSense account, if any.

COMPRESS THE CSS

Most free 3rd party Blogger templates that you download are a mess. You open up the xml file and it’s a long and ugly-looking beast of code spaghetti. If you’re like me, you prefer a nice and neat template (even though you’ll be the only one seeing it) and you’ll want to tidy it up.

Most of the code you don’t want to tinker with but the .css code (the part that styles your entire blog with images and colors) is where some people like to change font colors, sizes, or even just space it out properly so it’s important that it’s not only neatly organized, but also properly aligned.

More importantly, did you know the more lines of code your template has, the longer it takes to load in a browser? So your 1,500 lines of code in your newest Blogger template could really be much shorter in size, thus speeding up page load times for your visitors. The slower your site, the more likely a visitor will be deterred and not wait for it to load up.

So here’s a neat trick to optimize your template. I’ve started doing it with some of the newer templates now being hosted on eBlog Templates. You’ll want to do what’s called “commpress your css” into a much smaller format. There’s a site I use called CSSDrive that offers a free web-based CSS Compressor. All you do is select a few basic options like compression mode and comments handling and then paste in your css. The css is the code between the and tags.

Make sure you backup your template code before doing this! Some people might not like how the css looks after it’s compressed so it’s best to have a backup. You also might make a mistake and copy the wrong sections which could screw up your template code. Bottom-line, backup your template before doing this.

After you click on the “Compress-it!” button it will go through your .css code and shrinks it down. Essentially it removes unnecessary white spaces and better organizes each css element into one line. Here are the results for one of the Blogger templates I compressed.

My xml Blogger template was originally 1,286 lines of code and after the css compression was done, it dropped it down to 914. Now that’s not a huge difference (14%) and you probably won’t notice a difference when you load up your blog with the new code, but every little bit helps. Also, some template code might be messier than others so the size decrease could potentially be a lot more.

I also just ran the normal compression mode and wanted to keep my comments so if you go with the super compact mode and strip out all comments, you can compress it even further.

This tool can be used for WordPress blogs or any other websites actually. Most of the Blogger templates I come across are the ones in need of a code clean up, however. So if you’re ready to give CSS Compression a shot, check out CSS Drive’s free tool and compress away!

BASIC FUNCTION OF BUTTON AND MENUS

Title

Type our article’s title here. Remember, title is not file’s name. If we want to make a link between pages, we will use file’s name, not title.

Link

Fill address from other articles which related to our article (from our blog or others). If not, we not need to fill it.

Recover Post

It’s functioned to change back the article that already edited. Use this function if we doing mistake in editing.

Font

Blogspot featuring some font that we can choose, although it’s not have a lot of. How to using this function is same as if we want to change font on MS Word or the other Text Editor’s application. Just mark on the sentences, paragraphs. Or whole page (with CTRL+A), then choose font that we will use

Font Size

To adjust the font size, we can use the key that available to resizing font.

Bold and Italic Writing

To write thick words, use the B button (Bold), and to write in italic, use the I button (Italic).

Color

Blogspot Text Editor also make have font color changing features. We can use it by click on the color button

Link

This is the way to make a link: 1).Mark/highlight the text which will we take as a link, 2). Click on “Link” button, 3).Type link address on dialogue box, 4)Click “OK”

Align

If we often using MS Word, alignment is not an odd thing. So it’s not necessary to explained there.

Bullet and Number List

The function of these keys are to make a list. It’s also not an odd thing, same as Align.

Check Spelling

This facility is to check article’s spelling, if we write in English.

Add Image

Read “How to Adding an Image on Blogspot” to get more information.

Remove Formating from Selection

The function of this key is to remove all formats on definite words.

Edit HTML

This button function is to show the HTML code from edited article.

Compose

This button functionk is to show the design mode from edited article.

Preview

This link is to shown to us the article that we have finished to edit.

Print Options

Reader Comments is to enable us to allow comments from Blog’s visitors, or not. Backlink is to allow others to make link with our article or not.

Label for This Post

This is to categorized our articles or postings.

Post Time and Date

This is to manage time and date, when we post our article. The articles are organized by time and date.

Save as Draft

By clicking this button, it means our articles has been saved as draft. This article isn’t shown on our blog site and our blog’s visitor can’t read it.

Publish

Just click the “Publish” button if we finished to edit our article and want to show it on our blog site.

ADD AN IMAGE

Add an Image from Your Computer

Use this options if we will upload and image from PC to our blog. Click on “Browse”, then mark the image that we want to upload . We can upload 5 images at the same time by click on “Add Another Image”.

Add an Image from the Web

Use this options to upload image from another website. Type the image URL that we will upload to Blogspot post. Click on “Add Another Image” if we want to upload more images.

Choose a Layout

Use This options to rearrange the image position on article. We will see different position that we can choose to place our image on the article. Remember, we could not change the image arrangement if we already uploaded it. If we want to rearrange the image position, we have to delete it and then upload the image once again.

Image Size

Use this options to resize the image if we think its too big. if it so, we should choose small or medium size, it means the image will not appear as a full size image. It helps to make a faster image loading.

Click check box “I Accept the Terms of Service”, if it’s not already checked, then click on “Upload Image”. Wait for a while, Blogspot will show us the process of uploading our images. Click “Done” if the process has been finished.

It’s not like the other editor, the image that we already upload will shown on the top of our article. You have to drag and drop the image to position that we want to place it.

Now don’t forget to save your work, then see what happen in your blogspot post, an image should appears in your blogspot post.

BLOGSPOT SETTING

Blogspot Basic Settings

• Title – It’s the Main Tittle or heading of your blog. You can write anything as our blog’s heading. Make sure the title can describe the content of your blog, because this title will shown on search engine pages.
• Description – This setting function is explaining our blog’s content, your purpose to build this blog. Give little clue to the your blog’s visitor what is your blog all about.
• Add Your Blog to Our Listing? – It will confirm to us if we want our blog to be listed on Google’s Index. If we choose “YES”, our blog will sets on Google’s Index.
• Show Quick Editing on Your Blog? – This option will asking to us if we want to show quick editing’s page.
• Show Email Posts Links? – This option is asking wheter you want to show your email’s link or not. If your blog’s visitor like your article and want to sent it to their friend, they can click on this link.
• Show Compose Mode for All Your Blog? – This setting is used if we have to edit our article by using Blogspot Text Editor. If we choose “YES” the editor will shown in Compose menu.
• Show Transliteration Button for Your Posts? – This setting shown the button to translate our article (if it in English) not India’s.
• Delete Your Blog? – Don’t click on it if we didn’t want to delete our blog.

Blogspot Publishing Settings

• Blogspot Address – It will be the part of our URL address. For example, if we choose our address is “bloggersource”, the URL address will be “bloggersource.blogspot.com”. it’s the different between blog and usual website (ie. www.bloggersource.net).
• Send Pings – Just choose “YES” on it.

Blogspot Formatting Settings

• Show – This is to organize how many article that we shown in front page. Fewer article in front page will make more quickly when the page is opened by the visitor’s browser.
• Date Header Formats – To organize the publishing date.
• Archive Index Date Format – To organize the archives date.
• Timestamp Format – To organize the time.
• Time Zone – This is to choose which zone of time that we will follow.
• Language – This is to choose our blog’s language.
• Convert Line Breaks – If we choose “YES”, it means every we push the Enter button when editing or write comments, it will be converted to BR (Break Return).
• Show Title Field – To show or hide your article’s title.
• Show Link Field – To show link to your articles.
• Enable Float Alignment – It’s to organize the layout.
• Post Template – It’s to add a word or phrase automatically if you wrote new article.

Blogspot Comments Settings

• Comments – It’s to show or hide the comments.
• Who Can Comment? – This is to set up who can leave comment to your blog.
• Comments Default for Posts – If you choose “New Post Have Comments”, it means you allows comments for every article.
• Backlinks – To show or hide the information who linked to your blog.
• Backlinks Default for Posts – To allow or not, backlinks given on every post
• Comments Timestamp Format – It’s to set the time on comments.
• Show Comments in a Popup Window? – If you choose “YES”, it means when we want to write comment, Blogspot will show the popup window.
• Enable Comments Moderation? – To set up which comments which will be shown up.
• Show Word Verification for Comments? – It’s to prevent spam comments.
• Show Profile Images on Comments? – To show the commentator’s image, if he/she is a blogger.
• Comment Notification Address – When you have a new comment, Blogspot will notify to you by your email.

Blogspot Archiving Settings

• Archive Frequency – To set up the archiving frequency. This setting is related to Post Archive widget.
• Enable Post Pages? – If we click on “YES”, every article will have its own URL address.

Blogspot Site Feed Settings

• Allow Blog Feed – This setting is to allow reader to read your articles from RSS Feed.
• Feed Item Footer – This is to enclose (ex: banner) on RSS Feed’s footer.

Blogspot Email Settings

• BlogSend Address – If you want to sent your article to our friend every we post a new article automatically, we can type our friend’s email address here.
• Mail-to-Blogger Address – This is the setting if you want to sent or post an article to our blog by email.

Permission Settings

• Blog Authors – This is blogger’s name. You can add more account if the blog’s author is more than 1 person.
• Blog Readers – This is to set up who can read your blog.

There are the settings function on Blogspot.

PAGE ELEMENT

Functions

On Dashboard page, find for “Layout” link.

Then, a Template Page which have some tabs will be opened.

Contains Page Elements, Fonts and Colors, Edit HTML, and Pick New Template.

Every tab have different function. The preview of page elements like on the image below, but it’s maybe not the same on each other, depend on our template.

To see what kind of page element that can be added to our blog, just click on “Add a Page Element”, then we will get new window that shown menus to choose element that we will add to our blog. Before adding it, let’s try to understand the function for every element.

Newsreel (New!) – This is to show the headlines news from Google on our blog. It’s good to broaden our knowledge.

List – This element is to make a list on our blog. Website list, book list, absence list, etc, that have benefits to us.

Picture – If we want to adding image to our blog, we can use this element, but it’s not the same as if we adding image to our articles. Images which we added by this element will always appear, not like the images for articles that just appear when we open those article.

HTML/JavaScript – This element has a lot of functions, because of it’s flexibility. We can use it to show our banner, organize utilities and tools (ex: Google’s search engine). It’s important to learn more about this element.

Feed – If we were feed’s subscriber of a website or another blog, we can show it on our blog by using this element.

Logo – We can choose a blogger logo for our blog by using this element.

Blog Archive – This element is to show all the articles that we write. It’s to make easy our visitors to read all articles on our blog. If we have post a lot of articles, we need to use this element

Video Bar (New!) – This element is used to show up video clips from YouTube.

Link List – We can show links from other blogs or wesites.

Text – We can use this element to adding some texts (ex: wise word).

Adsense – This element is to show advertisements from adsense, if we have an google adsense account. We can earn some money if we use this element.

Labels – It’s important element, to categorized our articles. If our articles has been categorized, it will make us more easy to choose an article that we need.

Profile – This element is used to show blogger’s profile.

Page Header – We can use this element to show the title an our blog’s description. It’s default element, so we must doing nothing on it.

CHANGE COLOR

Here is the way to change our blog’s color.

On Dashboard page, click on “Layout” link, then we will see the Tempalte page.

Choose on “Fonts and Colors” tab.

We can change the color of your blog from this page to meet your preference. This panel (see picture below) is the place for you to choose which element that you want to change the color.

• Page Background Color - the blog’s background color.
• Text Color - The color of text (articles) on blog.
• Link Color - The color of the link
• Page Header Background - Color of the title’s background.
• Page Header Text Color - Our blog’s title color.
• Page Header Corners Color - The corner’s color of our blog’s title.
• Main Background Color - The main blog’s color.
• Border Color - The borderline color.
• Data Header Color - The header’s color (it usually the archive’s date).
• SideBar Title Background Color - The background color of the sidebar title
• SideBar Title Text Color - The color of the sidebar title text.
• Text Font - The kind of font that we use on articles.
• Page Header Font - The kind of font that we use on title.

The color can be changed by choosing the element on the left panel, and then you choose the color on the right the panel.

The font can be changed by the same way as you choose the color. The output can be seen on the preview panel below.

Then click on “Save Changes” to save our blog’s changes, or “Clear Edit” to change back into default blog’s color.

CLOCK ON YOUR BLOG

You can add some blog accessories, one of them is by add a Clock.
If you interesting to add a clock to your blog, you can get it for free at http://www.clocklink.com site.

ADD FAVICON

The icon beside URL address named with Favicon ( favourite icon )

Follow the steps :

1. First you must have an image

2. After that, you must change your image to be icon. For do that, you can use favicon Generator, please check out http://www.favicongenerator.com



3. Click at the "Browse..." button.



4. Insert your image which will change into favicon.



5. Click at "Generate Favicon!" button.



6. After the process is complete, click at "Click Here to Download your favicon".



7. Save into your computer.



8. Next step is you must upload your Favicon to image hosting. For this step, you can read at this post!.



9. Now I assume you have had the URL address of your favicon. For example, I have a favicon URL address like this :


http://www.geocities.com/amn_tea/favicon.ico


10. You must change the favicon URL address to be like this :


http://www.geocities.com/amn_tea/favicon.ico"/>


11. Next step is login to blogger with your ID.



12. Click at "Layout".



13. Click at "Edit HTML" tab.



14. Click at "Download full template" link. Save your template into computer (importan !):



15. Find the code :



16. Place your "Favicon code" below of . For example :


http://www.geocities.com/amn_tea/favicon.ico"/>


17. Click "Save Template" button.



18. Done. Now you have favicon at your blog URL addres.

To see the result, please use Fire fox or Opera browser.

MAKE LOGO AND IMAGE BUTTON

One of the sites which provide this service is http://www.cooltext.com.

If you use service from cooltext.com, you'd be very easy to make a logo or image button, this is the steps :

• Please visit http://www.cooltext.com.

• For create a Logo, click at Logos tab.

• Click at the example logo style which you love.

• Write the text wishing in making the logo beside Logo Text. For example : Blog Tutorial.

• Write the measure of text in wishing beside Text Size. For example : 50.

• Click at the colourful icon beside Text Color to choose the color of text. Please choose the colour whict you want.

• Choose the format of image beside File Format. Better .JPG or .GIF

• Click at Render Logo button.

• Wait for a moment, your logo is processed.

• See the logo result, if you want to change the logo, click at Edit this Logo. If you want to download the logo, click at Download Image. Save into your computer.

• Done. Now you have had a Logo.

If you want to make a Image Button, please following the above step, but don't choose logos, please choose buttons


Allright, so that the logo can display at your blog, you must upload your logo to the Image Hosting.

YOUR TRACKER AND STATISTIC

How many people is online at your blog? you know that or don't? If you don't know how many people is online at your blog, you can use a free tracker to know it.

That is much site provide this service.

1. www.histats.com.

2. www.amazingcounters.com


If you use them tool, you can know how many people online at your blog, how many people was visited to your blog, and any function.

ADD YAHOO MESSENGER EMOTICONS TO BLOG

You just add the codes to your post, what you want to put. However when you post an article, you must choose tab, don't at tab.

This is the codes :

:)happy


:(sad


;)winking


:Dbig grin


;;)batting eyelashes


>:D


:-/confused


:xlove struck


:">blushing


:Ptongue


:-*kiss


=((broken heart


:-Osurprise


X(angry


:>smug


B-)cool


:-Sworried


#:-Swhew!


>:)devil


:((crying


:))laughing


:straight face


/:)raised eyebrow


=))rolling on the floor


O:-)angel


:-Bnerd


=;talk to the hand

Yahoo hidden emoticons

:o3puppy dog eyes - New!



:-??I don't know


%-(not listening


:@)pig


3:-Ocow


:()monkey


~:>chicken


@};-rose


%%-good luck


**==flag


(~~)pumpkin


~O)coffee


*-:)idea


8-Xskull


=:)bug


>-)alien


:-Lfrustrated


[-O


$-)money eyes


:-"whistling


b-(feeling beat up


:)>-peace sign


[-Xshame on you


\:D/dancing


>:/bring it on


;))hee hee


:-@chatterbox


^:)^not worthy


:-joh go on


(*)star


o->hiro


o=>billy


o-+april


(%)yin yang

This is the steps to add YM emoticons

When you post your article, choose tab.
Write your article, and add some emoticons where you want at your post.
For example :
Hi everybody, today i feel because i'm to someone Publish your post, and the result will be like this :
Hi everybody, today i feel because i'm to someone