Showing posts with label Blogger. Show all posts
Showing posts with label Blogger. Show all posts

Wednesday, January 13, 2010

How to add Google Translate Gadget to your blog

Though majority of peoples' main language in the Internet world are English (which is about 30%), there are good number of users who wants to see the website in other languages that they known better than english. If you look for number of Internet users by language you will see English users are around 27.6 %, Chinese 22.1 %, Spanish 7.9 %, Japanese 5.5 %, French 4.6 %, Portuguese 4.2 %, German 3.7 %, Arabic 2.9 %, Russian 2.6%, Korean 2.2 %, Italian 2.1 %.

So there is significant number of Internet users who wants to see the language of the website in their own language. If you have a website in english and your site is familiar you will see many ones of them using google translator tool to translate your website into their more familiar language and reading the content. In order to give more flexibility to your users you can add a translator gadget to your site by which users have the option to translate the language of your site into users preferred language automatically.

Step by steps of adding google translator gadget is described below.

Step 01: Sign in to your blogger account Blogger Dashboard. Check the image from the post How to add Recent Comments and Posts

Step 02: Click on Layout on the blog that you want to add Google Translator Gadget. After you click Layout then choose Page Elements. In the Add and Arrange Page Elements click Add a Gadget.
Check the example image from the step 2 and step 3 from the post How to add Recent Comments and Posts

Step 03: From the pop up window click HTML/JavaScript. See example image below.
javascript widget

Step 04: In the content box paste the following script if you want to convert language from english to other languages.
<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en'
}, 'google_translate_element');
}
</script><script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>


Step 05: Save it and you are done.

However if your language is not English and you want to convert your non english site language into other languages or into specific languages please have a look at Google Translate Tools. From step 01 you can Select the language of your webpage and from step 02 Choose optional settings. You have option to choose All languages or Specific languages. In section 3 you will get your generated code.
Related Documents
http://arjudba.blogspot.com/2009/06/different-types-of-web-hosting-services.html
http://arjudba.blogspot.com/2009/07/how-to-add-site-to-yahoo-directory.html
http://arjudba.blogspot.com/2009/07/how-to-add-site-to-google-directory.html
http://arjudba.blogspot.com/2009/12/how-to-know-when-googlebot-last-crawled.html
http://arjudba.blogspot.com/2009/12/how-to-add-different-meta-tags-to.html
http://arjudba.blogspot.com/2009/12/how-to-disable-or-remove-blogger.html

http://arjudba.blogspot.com/2009/12/scrolling-text-effect-html-code-with.html

http://arjudba.blogspot.com/2009/12/how-to-post-larger-images-in-blogger.html

http://arjudba.blogspot.com/2009/12/how-to-transfer-or-sell-blogger.html

http://arjudba.blogspot.com/2009/12/how-to-add-email-subscription-form-to.html
http://arjudba.blogspot.com/2009/12/how-to-add-favicon-to-blogger-blogspot.html

http://arjudba.blogspot.com/2009/12/how-to-add-tag-cloud-category-to.html
http://arjudba.blogspot.com/2009/12/how-to-add-auto-read-more-feature-with.html

http://arjudba.blogspot.com/2010/01/how-to-stop-comment-spam-on-your-blog.html

http://arjudba.blogspot.com/2010/01/url-not-allowed-this-url-is-not-allowed.html

Friday, January 8, 2010

How to add Recent Posts and Recent Comments in a blog

In many blog sites you might have seen Recent Posts and Recent Comments widgets. You have looked at various custom template in order to add them. But in many custom templates loading those two might take much time to load. Also there is some widgets that use google friend connect and they take much time to load posts and comments. In this post I will show how easily we can add two widgets of recent posts and recent comments into a blog.

Following is the step by step procedure about how we can add Recent Posts and Recent Comments in a blog.

Step 01: Sign in to blogger dashboard Blogger Dashboard.


Step 02: Click on Layout on the blog that you want to add recent posts and recent comments. After you click Layout then choose Page Elements. In the Add and Arrange Page Elements You will see a window like below.



Click on Add a Gadget.

Step 03: You will see a new window. Scroll down and find out Feed. You will see new window like below.


Step 04: Click on Feeds. You will see a Configure Feed window. In the Feed URL box type your blog feed url. For example my blog feed URL is http://arjudba.blogspot.com/feeds/posts/default You will see a window look like,


Step 05: Click on Continue button. You will see new window. Change Title to Recent Posts like below.


And then click Save button. You are done!

If you want to add Recent Comments then in the box type URL http://arjudba.blogspot.com/feeds/comments/default and you are done.
Related Documents
http://arjudba.blogspot.com/2009/06/different-types-of-web-hosting-services.html
http://arjudba.blogspot.com/2009/07/how-to-add-site-to-yahoo-directory.html
http://arjudba.blogspot.com/2009/07/how-to-add-site-to-google-directory.html
http://arjudba.blogspot.com/2009/12/how-to-know-when-googlebot-last-crawled.html
http://arjudba.blogspot.com/2009/12/how-to-add-different-meta-tags-to.html
http://arjudba.blogspot.com/2009/12/how-to-disable-or-remove-blogger.html

http://arjudba.blogspot.com/2009/12/scrolling-text-effect-html-code-with.html

http://arjudba.blogspot.com/2009/12/how-to-post-larger-images-in-blogger.html

http://arjudba.blogspot.com/2009/12/how-to-transfer-or-sell-blogger.html

http://arjudba.blogspot.com/2009/12/how-to-add-email-subscription-form-to.html
http://arjudba.blogspot.com/2009/12/how-to-add-favicon-to-blogger-blogspot.html

http://arjudba.blogspot.com/2009/12/how-to-add-tag-cloud-category-to.html
http://arjudba.blogspot.com/2009/12/how-to-add-auto-read-more-feature-with.html

http://arjudba.blogspot.com/2010/01/how-to-stop-comment-spam-on-your-blog.html

http://arjudba.blogspot.com/2010/01/url-not-allowed-this-url-is-not-allowed.html

Sunday, January 3, 2010

Measure website performance using google webmaster tools

You might think about your website performance. Website performance indicates web page loading time for your site. In other words it is speed of your site, how fast is your web site. In fact the goal of any website is minimize the loading time for every page because lower loading time leads to increased user retention and activity, higher revenue and lower costs.

In this post I will discuss how we can measure the speed of individual webpage of our website and page speed tool using google webmaster tools.

Step 01: The first thing you need is to setup google webmaster tools for your site and verify your site. In the post Setup Google Webmaster Tools it is discussed about how we can setup webmaster tools for a blog or for a site.

Step 02:
- Log in to your webmaster tools.
- List of verified site you have will appeared. If you have many sites click on the sites that you want to measure page speed.

Step 03: You will enter into the Dashboard. Click on Labs from left menu and select Site Performance. Left menu will look like below.


Step 04: In the right side, you will see various suggestions like average load time, page speed suggestion along with performance overview.
Following is an example for my blog.

Performance overview

On average, pages in your site take 6.4 seconds to load (updated on Dec 31, 2009). This is slower than 82% of sites. The chart below shows how your site's average page load time has changed over the last few months. For your reference, it also shows the 20th percentile value across all sites, separating slow and fast load times.


Example pages
These are some example pages from your site and the time that they take to load in a browser (in seconds).

Page Speed suggestions

These are some example pages from your site and some suggestions on how to optimize them, based on the Page Speed tool.
URL
Go to URL/2009/01/ora-12557-tnsprotocol-adapter-not.htmlDetails: Save up to 79.4 KB, 5 requests, 6 DNS lookups
Enable gzip compression
Combine external JavaScript
There are 2 JavaScript files served from www.blogger.com. They should be combined into as few files as possible:
Minimize DNS lookups
unzipped triangleServe resources from a consistent URL
The following resources have identical contents, but are served from different URLs. Serve these resources from a consistent URL to save 1 bytes and 1 requests:
Combine external CSS

Step 05: The next step is to install page speed tool. You can install page speed tool from the window Page Speed Tool. To make page speed tool work you also need to install firebug. You can install firebug from the link https://addons.mozilla.org/en-US/firefox/addons/versions/1843. After you install page speed tool and firebug open the site/link in browser for which you want to measure page speed.

Step 06: Click on the firefox Tools Menu, select Firebug from the dropdown menu and then select "Open Firebug in New Window". Following image is a snapshot from my windows.
firebug in firefox

Step 07: You will see firebug is loaded in a new window. Select "Page Speed" from the tabs and click "Analyze Performance".
page speed tool

You will see Overall performance summary for your webpage. Following is the performance for my site that is suggested by page speed tool.
1) [Score: 48%] Minimize DNS lookups

2) [Score: 53.8%] Leverage browser caching

3) [Score: 76.9%] Leverage proxy caching

4) [Score: 70.2%] Minify CSS

5) [Score: 79%] Optimize the order of styles and scripts

6) [Score: 67%] Avoid CSS expressions

7) [Score: 75.9%] Remove unused CSS

8) [Score: 78.4%] Serve static content from a cookieless domain

9) [Score: 71%] Use efficient CSS selectors

10) [Score: 99.8%] Enable gzip compression

11) [Score: 89%] Combine external JavaScript

12) [Score: 87.7%] Minify JavaScript

13) [Score: 95.5%] Optimize images

14) [Score: 100%] Combine external CSS

15) [Score: 90%] Specify image dimensions

16) [Score: 100%] Minimize cookie size

17) [Score: 100%] Serve resources from a consistent URL

18) [Score: 100%] Minimize redirects

19) [Score: 100%] Put CSS in the document head

20) [disabled] Defer loading of JavaScript

21) [n/a] Parallelize downloads across hostnames

Based on the score and the details recommendation you will take further decision to speed up your site. The target is to make the score 100%.
Related Documents
http://arjudba.blogspot.com/2009/06/different-types-of-web-hosting-services.html
http://arjudba.blogspot.com/2009/07/how-to-add-site-to-yahoo-directory.html
http://arjudba.blogspot.com/2009/07/how-to-add-site-to-google-directory.html
http://arjudba.blogspot.com/2009/12/how-to-know-when-googlebot-last-crawled.html
http://arjudba.blogspot.com/2009/12/how-to-add-different-meta-tags-to.html
http://arjudba.blogspot.com/2009/12/how-to-disable-or-remove-blogger.html

http://arjudba.blogspot.com/2009/12/scrolling-text-effect-html-code-with.html

http://arjudba.blogspot.com/2009/12/how-to-post-larger-images-in-blogger.html

http://arjudba.blogspot.com/2009/12/how-to-transfer-or-sell-blogger.html

http://arjudba.blogspot.com/2009/12/how-to-add-email-subscription-form-to.html
http://arjudba.blogspot.com/2009/12/how-to-add-favicon-to-blogger-blogspot.html

http://arjudba.blogspot.com/2009/12/how-to-add-tag-cloud-category-to.html
http://arjudba.blogspot.com/2009/12/how-to-add-auto-read-more-feature-with.html

http://arjudba.blogspot.com/2010/01/how-to-stop-comment-spam-on-your-blog.html

http://arjudba.blogspot.com/2010/01/url-not-allowed-this-url-is-not-allowed.html