Blogging Tutorial

Kang Rohman once posted about Increasing Your Visitors With Meta Tag and Customizing Blogger Meta Tag Title. Now I have the other tip in optimizing meta tag for blogger so that your blog visitors will come from search engine. Installation of the meta tags is the ancient way in SEO, but it is still effective to attract visitors. That’s why I discuss this thing today and I think it is no wrong.
The following tip has been applied on Kang Rohman’s blog and has been proven to increase the visitors from search engine especially Google. This tip is better compared with normal meta tag. Remember, this tip applies only on Blogger, not on others such as Wordpress, etc.

The basic trick of this technique is adding the Blog Title into meta tag keyword and meta tag description. Formerly, Kan Rohman wrote, that usually installation of meta tag description and keyword is as follow:

<meta content='your blog description here' name='description'/>

<meta content='your keywords here' name='keywords'/>

Example like this:

<meta content='Tips and trick to easy blogging at blogspot also free download e-book and template' name='description'/>

<meta content='blog, blogspot, blogger, blogspot tutorial, tutorial blog, tutorial blogspot, tutorial, CSS, menu, navigation, JavaScript, template, blogspot template' name='keywords'/>

To optimize it, we paste the code of blog title into the meta tag, so that the code will be like this:

<meta expr:content='data:blog.pageTitle + " - your blog description here"' name='description'/> 

<meta expr:content='data:blog.pageTitle + ", your keywords here"' name='keywords'/>

Example like this:

<meta expr:content='data:blog.pageTitle + " - Tips and trick to easy blogging at blogspot also free download e-book and template"' name='description'/>

<meta expr:content='data:blog.pageTitle + ", blog, blogspot, blogger, blogspot tutorial, tutorial blog, tutorial blogspot, tutorial, CSS, menu, navigation, JavaScript, template, blogspot template"' name='keywords'/> 

The following is the screenshot of the search result of Kang Rohman’s blog in Google with the keyword Blogspot Tutorial before optimized:





And the screenshot after optimized:





For installation of Meta tag, please read the previous post about Meta tag.


I hope this tip will increase the traffic of your blog.

Shortcut to open Link in new tab/window – This is light information but it may be so useful for you. By default, a link that is clicked will open a new page as directed but the previous page will be lost and that new page will appear instead. Some webmasters do not want that so they will set the link to be open in a new tab or window.
When we read an article or tutorial, we often find some links installed on the article or tutorial. We are often curious to open the links but we do not want to lose the previous page where the article or tutorial is on. The usual way to do is by right clicking the links, and then selecting Open Link In New Tab.

Besides the way above, there is a shortcut to do. You can click the links while you are holding the Ctrl on your keyboard (Ctrl + click link). This second way may be easier than the first way, but you still use your two hands (right and left hand) altogether to do that, right.
If you think the two ways are not convenient for you, there is another way. This way can be more practical than the two ways above. You only need to click the links by using the middle button of your mouse (middle click).  With the middle button of your mouse, each and every link you click will open in new tab or window.

Which ways do you prefer?

Yahoo meme is the new service from Yahoo! that when it’s compared will be similar to twitter microblogging service. But of course, there will be the difference. Yahoo! meme is not limited to text posting, but you can upload photo, embed video, and music. In a glance, this service is more valuable.

At this present, Yahoo meme is still in Beta version, but Yahoo meme has been available for public. If you want to know the features of Yahoo meme, you can try now.
 
Posting Text

As you know, if you post in twitter, you will have a limitation to the length of the post. You are only allowed to post up to 140 characters per post so it will be the short message. Yahoo meme is different. There’s no character limitation. Kang Rohman has tried to post up to 1000 characters and more, and I did it.


Posting Photo
To post photo or image in Yahoo meme, you can directly upload it from your computer or you also can type the URL of the image if it has been upload to a server.

Posting Video
To post video, Yahoo Meme only allows you to take the video from Youtube and Vimeo. You only need to type the URL of the video.

Posting Music
To post music, you only type the link address of it that you have uploaded to a server or the link address available on the internet.

If you want to try this Yahoo Meme, you must only have your Yahoo Account. It means you have to have the email address in Yahoo. If you don’t have, please sign up first for free.

http://meme.yahoo.com

One thing that you can do to make your blog indexed fast by search engines such as Google, Yahoo, or Bing is by sending the sitemap address of your blog. Previously, Maybe you have known that sitemap address for blogger only added the code "atom.xml" at the end of your blog address, e.g. Kang Rohman's blog has the address as follow:

http://www.blogspottutorial.com/

so the sitemap address to be registered would be:

http://www.blogspottutorial.com/atom.xml

If you use the feedburner service and then you redirect the feed address to sitemap address given by feedburner, there will be a notice that the sitemap you have submitted experiences error. The solution to this error is by adding one code ?redirect=false. For example, the sitemap address below runs error:

http://www.blogspottutorial.com/atom.xml

So to remove this error notice from Google webmaster tool, the submitted feed address would be added the code ?redirect=false at the end of fee address, e.g.:

http://www.blogspottutorial.com/atom.xml?redirect=false

The error message usually will be lost or it has been overcome, but it still leaves a peace of problem especially that in blogger or blogspot. It is about the pages indexed although there are a lot of posts in it. For example, Kang Rohman’s blog http://blogtemplate4u.com has 121 posts, but Google webmaster tool records only 20 indexed URLs.

This question is often asked by many bloggers using BlogSpot machine. Are you one of them? If yes, please try the best way that I am about to give you below.

The best way to overcome the error message in Google Webmaster Tool is by using Blogger Sitemap Generator. With the Blogger Sitemap Generator, we can create a sitemap for our blogs and proven to be able to overcome the no-indexed posts.

The following are the way to use Blogger Sitemap Generator :

1. Please visit http://digitalinspiration.com/tools/blogger/sitemap/index.php
2. Enter your blog address into the empty field available, do not forget to write your complete blog address including the http:// and ends with / (slash) (e.g. http://www.blogspottutorial.com/ ), and then click the Create Blogger Sitemap button.

   

3. Records the sitemap address, copy and paste in notepad or other programs, e.g.:

   
   
   • atom.xml?redirect=false&start-index=1&max-results=500
   • atom.xml?redirect=false&start-index=501&max-results=500
   

4. Also click the links to submit to Bing and Yahoo.

For those who have more than 500 posts, the sitemap address would be more than one,

For the next step, please login to Google webmaster tool to submit the sitemap you have created. If you don’t have Google account, please register here. Below are the detailed steps:

1. When you are in the dashboard of Google webmaster tool, please find the blog that you want to submit its sitemap.
2. Click Site Configuration

   

3. Click Sitemaps

   

4. Click Submit a Sitemap button. Copy and paste the sitemap address you have created at blogger sitemap generator ( atom.xml?redirect=false&start-index=1&max-results=500 ), and then click Submit Sitemap. For blog with more than one sitemap ( more than 500 posts ), please repeat this step until all is done.

   

5. The submission process of sitemap is done. Usually, it needs time until one day to get this submission sitemap worked and indexed by Google. Please login again the next day to check out whether your sitemap has worked and been indexed or not.

I hope that with this way, your blogs’ sitemaps will be indexed fast by Google, and I hope the search engines will drive more visitors to your blogs.

Happy trying!

Responding a request from one of my readers in order to make an article about how to compress the CSS code, then today’s post would be about that and I try to discuss how to compress the CSS code.

One of factors to make our blog or website easy to load is by optimizing the CSS file. One way to make the CSS file smaller is by compressing it manually or automatically using the CSS Compressor tool.

What is actually compressed to CSS file? Take a look at one example as below:

a {
color: #0d5ef3;
text-decoration:none;
}

a:visited {
color: #0d5ef3;
text-decoration:none; 
}

a:hover {
color: #0d5ef3;
text-decoration:underline;
}

From the example above, we can see that there are two same CSS properties, those are Function a and Function a:visited. For this case, actually we can simplify by combining them with comma ( , ), and because a:hover has the same color code, then the code must not be re-written, e.g. the result of simplification:

a, a:visited{

color: #0d5ef3;
text-decoration:none;

}

a:hover {
text-decoration:underline;
}

The first CSS syntax is less different from the second one, but still has the same function.

In fact, the writing style also affects to the loading time, the usage of many spaces can cause the loading time longer. So, if you want the best result, the CSS syntax above should be like this:

a, a:visited{color: #0d5ef3; text-decoration:none;}

a:hover { text-decoration:underline; }

More extreme would be like this:

a, a:visited{color: #0d5ef3; text-decoration:none}a:hover { text-decoration:underline}

With the last code above, the loading time will be faster, but you will get difficulty in editing the CSS.

Above is the example of manual compression, of course, that way is only for those who have been so familiar with CSS code. The more practical way to compress and without having to have the basic programming is by using the CSS compressor tool, such a tool is easy to find on the internet and you can use it for free.

There are many CSS compressor tools on the internet, and one of them is http://www.csscompressor.com. However, before you compress your CSS, Kang Rohman suggests you to make a backup because sometimes the compression result is not perfect as you expect.

The following is how to compress the CSS with CSS Compressor:

1. Please go to http://www.csscompressor.com
2. Select the compression mode you want, whether it is Highest, High, Standard, or Low.

3. Copy and then paste your CSS code into the text area below CSS input, and then click Compress button.

   

4. Click Select All button. Copy and then paste to your CSS template code.

   

5. Done

Besides from csscompressor, you also can use the css compressor tools from:

• http://www.cssdrive.com/index.php/main/csscompressor/
• http://mabblog.com/cssoptimizer/compress.html
• http://cssoptimiser.com
• http://iceyboard.no-ip.org/projects/css_compressor

And many more.

Happy trying!

At some previous posts, Kang Rohman discussed the tool or website to shorten the very long URL or link address such as tinyURL, bit.ly, etc. Such a tool is of course very useful when we have the very long URLs that are hard to remember, or perhaps we want to hide those URLs. But sometimes, that good facility is abused by certain parties.

Sometimes, the shortened URL is used to direct to a website with malicious code that will harm our computer when it’s clicked. So, be careful with Shortened link or URL!

The first thing should be remembered is that you mustn’t click randomly on any link or URL provided at shortened one. Besides, there is also an effective way to cope with the shortened URL or link. If you use Firefox browser, you can install the add-ons that can show the original URL of the shorten URL. Some of the Firefox add-ons are Long URL Please, LongURL Mobile Expander, Interclue, DeTiny URL Expander, Long URL Editor, etc.

If you use Internet Explorer, you can install the Preview and Launch URL add-on.

From the original URL of the shortened URL, we can be more careful with the website with malicious code that can harm our computer.

Hopefully useful!

About one month ago, paypal officially replaced their machine. At a glance, it looks like the old one in some functions, but appeared something different and if you are not careful, you will get loss.

As we know before that when we have the personal account, there will be no charge when transferring funds to another paypal account. To be in fact, in the new machine that is used now, there is a design, which we can say it traps us.

When transferring process, we will be given the menu tab as follow:

Update : Please read my post about Blogger.com automatically add rel="canonical" on your template