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.

Many of Kang Rohman’s friends ask about how to create the feature of Step carousel viewer in blogspot template like on magazine template R.1.2. To create the feature of Step carousel viewer on your template is not too hard, but because each template is different, whether it is the size of template, Widget placing technique, or anything else, you will need a little adjustment to the code or script given. To give a description about how to install the feature of Step carousel viewer, follow the description below:
If you want to know what the feature of Step carousel viewer is like, see the demo:

You can see that on the upper, there is the image moving right and left, and the controller button to manage the direction of the images. That’s what we call Step Carousel Viewer. The Script of Step Carousel Viewer can be found with free of charge at http://www.dynamicdrive.com, but you can customize it into another shape if you are familiar with CSS.
To save your time, I will describe a little about installing step carousel Viewer in blogspot.
#Step1
Prepare the images to be installed on step carousel viewer, I suggest, the images should not be in too large sizes, because the large images will need the faster internet connection for a maximum performance. Remember, not all of the visitors have the fast internet connection. Kang Rohman suggests you to create the images in sizes of 180 X 130 pixels. e.g.:

Please upload the images to a hosting provider at where you usually upload any image, e.g. the free image hosting are http://photobucket.com, http://tinypic.com, http://flicker.com, and many more. Record the URL of the images that you have uploaded, e.g.:

http://i43.tinypic.com/dmg1mv.jpg
http://i42.tinypic.com/2l8an8w.jpg
http://i44.tinypic.com/nda5xt.jpg
http://i44.tinypic.com/b98y8x.jpg
http://i41.tinypic.com/2hmq2c1.jpg
http://i42.tinypic.com/28rpoom.jpg
http://i43.tinypic.com/15ep9x.jpg

Determine the link addresses that you want to install on the images, e.g.:

http://blogtemplate4u.com/2008/09/magazine-template-2.html
http://blogtemplate4u.com/2009/03/free-template-magazine-template-3-dark.html
http://blogtemplate4u.com/2009/03/magazine-template-3-white-blue.html
http://blogtemplate4u.com/2009/03/magazine-template-r1.html
http://blogtemplate4u.com/2009/03/magazine-template-r12.html
http://blogtemplate4u.com/2009/04/magazine-template-r13.html
http://blogtemplate4u.com/2009/04/magazine-template-r14.html

#Step 2


Create a new column under header. To create a new column under header, please my previous posts at Save widget below of the header or How to make Element below of the header as well as at Make Column under Header in Magazine Template 2. Remember, this is only an example, of course, the script of carousel can be placed anywhere such as on sidebar, or footer.


#Step 3


Download script step carousel Viewer. Click at the button below:







( downloaded : )



The file you have downloaded is in file extension of .rar. Extract the file with win.rar or other extractor software, or you also can use the online extractor at http://wobzip.org.





After being extracted, there will be three files:

• CSScarausel.txt
• javacarausel.txt
• HTMLcarausel.txt

#Step 4

1. Login to blogger with your ID
2. Click Layout
3. Click on Edit HTML
4. Find the code ]]></b:skin> on your template
5. Open the file of CSScarousel.txt in notepad or WordPad, or others
6. Copy all of the code (tips to copy faster: press Ctrl + A then Ctrl + C)
7. Paste the code of CSScarausel.txt above the code ]]></b:skin>
8. Find the code </head> on your template
9. Open the file of javacarousel.txt in notepad or WordPad, or others
10. Copy all of the code (tips to copy faster: press Ctrl + A then Ctrl + C)
11. Paste the code of javacarausel.txt above the code </head>
12. Click SAVE TEMPLATE

#Step 5

1. Click on Page Elements
2. Click on Add gadget at the column under header that you have crated. Remember, this is only an example, you can place it anywhere
   
   
   
   
   
   
3. Click the sign plus ( + ) for HTML/JavaScript
4. Open the file of HTMLcarousel.txt in notepad or WordPad, or others
5. Change the link code with your own
6. Copy all of the code (tips to copy faster: press Ctrl + A then Ctrl + C)
7. Paste the code of HTMLcarausel.txt in the field that has been appeared
8. Click SAVE
9. Done

Remember! The above tutorial is general description, because the character of each template is different, you may need the adjustment, moreover at CSScarousel.txt file.

If you like menu in the shape of image or icon, I have good info for you; that is CSS image Moving Menu. With CSS Image Moving Menu, your Icon will move when visitors point their mouse over it. To see live demo, click the button below:

Installing ads under posts - As informed in the previous post that blogger now has supported read more system, Kang Rohman remind you that my old posts related to “read more” function and code are no longer useful to be implemented in your blogger blogs. Those posts have been out of date and needs updating. One of the old posts to be updated is how to install ads under posts. Why does Kang Rohman highlight this thing? Because on post about Blogger Read More System yesterday, many commentators are worried about their Under-Post ads will not work properly again.

One to be remembered that this technique is not for only installing the ads, but also for installing banners, messages, subscription information, and others that are placed under posts. You also should know that the ads would not appear in the homepage, but under posts when the posts are displayed full by clicking the “Read More” link.

The technique used is usually as below:

<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Or some are like this:

<div class='post-body entry-content'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Both are right because the additional code <p>…</p> is HTML code for paragraph or for making different lines. To install the ads, messages, or anything else, you have to add the additional code like this:

<div class='post-body entry-content'>
<data:post.body/>

<b:if cond='data:blog.pageType == "item"'>

<p> Your ads code, banners, alert or anything paste in here! </p>

</b:if>

<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

It’s very easy, right? So you do not need to worry about Blogger Read More system, because you can adapt.

Need to remember, some ads codes such as Adsense, Adbrite, and others cannot be installed directly there, but you need to parse it. For this trick, you can read my old post about Placing Google Adsense Under The Posting.

Still confused how to install ads under posts? Below is the trick to make you easy to practice:

1. Please log in to Blogger with your ID
2. Click Layout
3. Click Edit HTML tab. Then backup your template first
4. Check the small box next to “Expand Template Widget”

   

5. Find this code:
   <div class='post-body entry-content'>
   <data:post.body/>
   <div style='clear: both;'/> <!-- clear for photos floats -->
   </div>
   

6. Please add the code in red and green printed:

   <div class='post-body entry-content'>
   <data:post.body/>

   <b:if cond='data:blog.pageType == "item"'>

   <p> Your ads code, banners, alert or anything paste in here! </p>

   </b:if>

   <div style='clear: both;'/> <!-- clear for photos floats -->
   </div>

7. Click SAVE TEMPLATE button
8. Done

For techniques related to New “Read More”, Kang Rohman will try to write at the next posts.

When you post more than one articles in one day, you will have only one post with its date. It is your last post. That’s not a problem because by default, it will be like that. Blogger cannot display the date of post in the same day.

Anyway, if you are interested in displaying the date of post in all posts, there is a simple hack to display the date of post.

Below are the steps:

1. Please log in to blogger with your ID
2. Click Layout
3. Click Edit HTML tab
4. Check the small box next to the text “Expand Widget Template"

   

5. Find this code :

   <b:if cond='data:post.dateHeader'>
           <h2 class='date-header'><data:post.dateHeader/></h2>
         </b:if>

6. Remove the code and replace with this one:

       

   <b:if cond='data:post.dateHeader'>
   <script>var ultimaFecha = &#39;<data:post.dateHeader/>&#39;;</script>
   <h2 class='date-header'><data:post.dateHeader/></h2>
   <b:else/>
   <h2 class='date-header'>
   <script>document.write(ultimaFecha);</script>
   </h2>
   </b:if>

7. Click "SAVE TEMPLATE".
8. Done

Now, all of your posts in the same day will include the date. It’s easy, isn’t it?

Credit: template novo blogger

Maybe you once saw on your friends’ blogs or other’s blog installing the statistics widget of total posts and total comments. If you are interested in that widget, you can follow the instruction below because it’s easy. To install the total posts and comments widget, you can do manually or automatically.

Install Widget manually

1. Please login to blogger with your own ID.
2. Click Layout.
3. Click Page Element tab.
4. Click Add a Gadget.
5. Click the sign plus ( + ) for HTML/JavaScript.

6. Copy and paste the code below in the available column

    

   <script style="text/javascript">
   function totalPosts(json) {
   document.write('Total Posts: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
   }
   function totalComments(json) {
   document.write('Total Comments: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
   }
   </script>
   <script src=" /feeds/posts/default?alt=json-in-script&callback=totalPosts"></script>
   <script src=" /feeds/comments/default?alt=json-in-script&callback=totalComments"></script>

    

7. Click SAVE.
8. Done

Install Widget automatically

Please log in to blogger first, and then click the button below, and the total posts and comments widget will be installed automatically. It is very easy, isn’t it?

Enjoy your new widget!

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!

Comment Avatar on Custom Template – In the case of the new blogger feature, comment avatar which does not appear on some custom templates or the templates not from the dashboard of blogger, then in this post, Kang Rohman will discuss it although it is not too fresh after many bloggers do the same.

Excerpted from Kang Rohman’s post before:

If the comment avatar has not appeared yet in your blog, maybe your template has not supported this new feature. But don’t worry because you can add a modification to your template so you can solve this problem and Blogger Avatar will appear. The important thing is that Blogger has provided the facility to their machine.

Before we enter the installation section of template code modification, let’s notice some comparisons. Take one example, in this case, we will take the minima template code (the original blogger template) in old version with new version (avatar has worked), through the codes where Avatar code should be there:

Minima template code - Old Version (referring to old archive of Kang Rohman)

<dl id='comments-block'>

<b:loop values='data:post.comments' var='comment'>
          <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
            <a expr:name='data:comment.anchorName'/>
            <b:if cond='data:comment.authorUrl'>
              <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a> 
            <b:else/>
              <data:comment.author/>
            </b:if>
            <data:commentPostedByMsg/>
          </dt>
          <dd class='comment-body'>
            <b:if cond='data:comment.isDeleted'>
              <span class='deleted-comment'><data:comment.body/></span>
            <b:else/>
              <p><data:comment.body/></p>
            </b:if>
          </dd>

                               <dd class='comment-footer'>
            <span class='comment-timestamp'>
              <a expr:href='data:comment.url' title='comment permalink'>
                <data:comment.timestamp/>
              </a>
              <b:include data='comment' name='commentDeleteIcon'/>
            </span>
          </dd>
        </b:loop>
      </dl>

Minima template code – New Version (Avatar has worked here) ;

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
        <b:loop values='data:post.comments' var='comment'>
          <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
              <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
            </b:if>
<a expr:name='data:comment.anchorName'/>
           <b:if cond='data:blog.enabledCommentProfileImages'>
              <data:comment.authorAvatarImage/>
            </b:if>
            <b:if cond='data:comment.authorUrl'>
              <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
            <b:else/>
              <data:comment.author/>
            </b:if>
            <data:commentPostedByMsg/>
          </dt>
          <dd class='comment-body'>
            <b:if cond='data:comment.isDeleted'>
              <span class='deleted-comment'><data:comment.body/></span>
            <b:else/>
              <p><data:comment.body/></p>
            </b:if>
          </dd>
          <dd class='comment-footer'>
            <span class='comment-timestamp'>
              <a expr:href='data:comment.url' title='comment permalink'>
                <data:comment.timestamp/>
              </a>
              <b:include data='comment' name='commentDeleteIcon'/>
            </span>
          </dd>
        </b:loop>
      </dl>

So the first conclusion is that we should add the code as printed in red, right? Let’s go on!

That’s what makes a template design become so interesting. We can customize and arrange the layout whatever it would be like. Therefore, we have to know the basic code, either CSS or HTML. For this avatar modification, Kang Rohman tried to notice to source code of CSS widget bundle from blogger (this CSS will not visible on your template) and get some basic codes:

#comments-block .avatar-image-container img {
-ms-interpolation-mode:bicubic;
border:1px solid #ccc;
float:right
}
#comments-block .avatar-image-container.avatar-stock img {
border-width:0;
padding:1px
}
#comments-block .avatar-image-container {
height:37px;
left:-45px;
position:absolute;
width:37px
}
#comments-block.avatar-comment-indent{
margin-left:45px;
position:relative
}
#comments-block.avatar-comment-indent dd {
margin-left:0
}
iframe.avatar-hovercard-iframe{
border:0 none;
padding:0;
width:25em;
height:9.4em;
margin:.5em
}

Let’s find out further!

In order to have the avatar display as we desire, e.g. avatar with border, avatar placed on the right, etc, then you simply change the property in red-printed and add it to CSS of your blog template.

Kang Rohman browsed to view the avatar source code of a blog and look at the result:

Apparently, Blogger’s comment avatar still has a problem. The avatar will only appear if the commentators log in to blogger. It means the avatar will not appear if the commentators select the Name/URL or Anonymous, and the avatar will be viewed as a small favicon (16X16 pixel) if the commentators choose the option of OpenID,wordpress,Live jurnal, etc.

The following are the results of my observation to the source code in the trial above:

<dl class='avatar-comment-indent' id='comments-block'>
<dt class='comment-author ' id='c1621762094114889673'>
<a name='c1621762094114889673'></a>
<div class="avatar-image-container vcard"><span dir="ltr"><a href="http://www.blogger.com/profile/03400310447443641940" rel="nofollow" onclick="" class="avatar-hovercard" id="av-0-03400310447443641940"><img src="http://img1.blogblog.com/img/blank.gif" width="35" height="35" alt="" class="delayLoad" style="display: none;" longdesc="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDe2PwWAxcpM_I2W39lHvGS0NXzPVQmMY1fS6ohLXGIvbwL81XN9u2ZrAgquFyZCZYQ4cNtDvVNwrpKtFoNOEcKgTrVtQk7UJBsqlMzdg-rn5svbDJ0MtUL8CiajQnna7mhqZidIZuev8/s45/2553499759340m.jpg" title="Rohman">

<noscript><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDe2PwWAxcpM_I2W39lHvGS0NXzPVQmMY1fS6ohLXGIvbwL81XN9u2ZrAgquFyZCZYQ4cNtDvVNwrpKtFoNOEcKgTrVtQk7UJBsqlMzdg-rn5svbDJ0MtUL8CiajQnna7mhqZidIZuev8/s45/2553499759340m.jpg" width="35" height="35" class="photo" alt=""></noscript></a></span></div>
<a href='http://www.blogger.com/profile/03400310447443641940' rel='nofollow'>Rohman</a>
said...
</dt>
<dd class='comment-body'>
<p>Test Comment</p>
</dd>

<dt class='comment-author ' id='c8471412229723189972'>
<a name='c8471412229723189972'></a>
<div class="avatar-image-container avatar-stock"><span dir="ltr"><a href="http://amen24.wordpress.com/" rel="nofollow" onclick="" class="avatar-hovercard" id="av-2-00558225623929545157"><img src="http://img1.blogblog.com/img/openid16-rounded.gif" width="16" height="16" alt="" title="amen24">

</a></span></div>
<a href='http://amen24.wordpress.com/' rel='nofollow'>amen24</a>

said...
</dt>
<dd class='comment-body'>
<p>Third commen</p>
</dd>

At least, we get the trace of CSS class in use, it is:

#comments-block.avatar-comment-indent or .avatar-comment-indent

#comments-block .avatar-image-container or .avatar-image-container

#comments-block .avatar-image-container img or .avatar-image-container img

#comments-block .avatar-image-container.avatar-stock img or .avatar-image-container.avatar-stock img

So, of course, we can customize the avatar by adding any property on the CSS class above.

Case Studies

The temporary problem on blogger avatar is that it will not appear if the commentators choose the options of Name/URL or Anonymous

If we view the blogger source code, the avatar image is set up at CSS class as follow:

#comments-block .avatar-image-container {

height:37px;

left:-45px;


position:absolute;


width:37px


}

#comments-block .avatar-image-container img {

-ms-interpolation-mode:bicubic;

border:1px solid #ccc;


float:right


}

There are some bloggers having the ideas to make the plain avatar into more interesting one by adding the background, e.g.:

#comments-block .avatar-image-container {

background:transparent url(http://i34.tinypic.com/2a94rgk.png) no-repeat scroll left top;

height:45px;

left:-45px;


position:absolute;


width:45px

}

#comments-block .avatar-image-container img {

background:transparent url(http://i34.tinypic.com/2a94rgk.png) no-repeat scroll left top;

border:medium none;


float:left;


height:45px;


width:45px;


}

Or also like this:

.avatar-image-container img{

background:transparent url(http://i33.tinypic.com/24b9na8.jpg)no-repeat;

height:35px;

width:35px;

}

Avatar with this background seems better than plain one.

Maybe you see the css property like this: height:35px, width:35px, height:45px, width:45px. The value of 35px or 45px is the value of avatar in pixel. Of course, you can change the values into your desire, but make it not too large or too small.

The next problem is that the small favicon when commentators choose the options of OpenID,wordpress,Live jurnal, etc.

For this problem, you simply change the code as follow:

<b:if cond='data:comment.favicon'>

              <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>


            </b:if>

To be seen that the size will be 16px, so you can change it with the larger value, e.g. 35px.

<b:if cond='data:comment.favicon'>

              <img expr:src='data:comment.favicon' height='35px' style='margin-bottom:-2px;' width='35px'/>


            </b:if>

The avatar image will be forced to become 35X35. Although the resolution becomes broken, it will be better instead of 16X16.

The result of the modification will be as follow:

Well, the article above will be suitable for those who have been familiar with CSS or HTML.

And now, if you don’t want to get dizzy, simply follow the next steps:

1. Log in to blogger with your ID



2. Click Layout.



3. Click Edit HTML tab



4. Click "Download Full Template", please backup your template first.



5. 
   

   Check the small box next to "Expand Widget Template "

   
   
   

   

   
   
   

    

   
   



6. Copy and paste the below code above the code ]]></b:skin>
   
   

   .avatar-image-container img{

   
   
   

   background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6bDrBwqdySnZu27-k8JorrhPAp7kMrT_2YAg9tw8K4xcdfFUVCi8QfkfuHl2R83P4XJ_sd4ZGkZO0JsPHovyijIAxULaI4CcIc5YuiyMEzc2RvB917YDkY9WTD5IeKUD1tgB_cwP-6CM/)no-repeat;

   
   
   

   height:35px;

   
   
   

   width:35px;

   
   
   

   }

   
   
   

    

   
   
   
   
   



7. Find the code as follows on your template:
   

   <dl id='comments-block'>

   
   
   
   
   
   

   Or sometimes will be like this:

   
   
   

   <div id='comments-block'>

   
   



8. Replace the code with this code:
   

   <dl expr:class='data:post.avatarIndentClass' id='comments-block'>

   
   
   
   
   
   

   If your template code used div code, change with this code :

   
   
   

   <div expr:class='data:post.avatarIndentClass' id='comments-block'>

   
   



9. 
   

   Find the following code:

   
   
   

   <a expr:name='data:comment.anchorName'/>

   
   



10. 
    

    Remove the code and then replace with the code as follows:

    
    
    

    <b:if cond='data:comment.favicon'> 
          <img expr:src='data:comment.favicon' height='35px' style='margin-bottom:-2px;' width='35px'/>
    
    
                </b:if>
    
    
                <a expr:name='data:comment.anchorName'/>
    
    
                <b:if cond='data:blog.enabledCommentProfileImages'>
    
    
                  <data:comment.authorAvatarImage/>
    
    
                </b:if>

    
    



11. Click SAVE TEMPLATE.



12. Done

The steps above may not be suitable with your current custom template so you have to make any modification to have the maximum blog template.

Again, blogger buzz informs that now blogger has added one new feature to their machine, it is the avatar beside the comment. It’s said that this feature is to complete any new features in celebration of Blogger’s birthday.

If the comment avatar has not appeared yet in your blog, maybe your template has not supported this new feature. But don’t worry because you can add a modification to your template so you can solve this problem and Blogger Avatar will appear. The important thing is that Blogger has provided the facility to their machine.

For Blogger Developer, we’ll wait for any other new feature so blogger manias will be confident to use your machine.. Go..go..go.. blogger.

Customizing the display of Read More – Since news about Read More system in blogger is still hot, talking about that can be still interesting, so Kang Rohman, at this chance, wants to try to deliver a description about how to customize the text “Read More” into more interesting one than before.

By default, the display of “Read more »" is like this:

The font will adopt the font in your template setting. The color of the link will be the same as the link you use. The display of the “Read More” is actually customizable. You can create your own text or image to replace the default text as above so that your blog can be more beautiful overall.

As the basic knowledge for you, below is the code of Blogger read more:

<b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a> 
      </div>
    </b:if>

By knowing the basic code, we can create our own “Read More” variations.

• To make Read More appear on the right

By default, “Read more” will appear on the left, but if you want to display it on the right, you can add the code like this:

<b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
<div style='float:right;padding:10px 0px 5px 0px'>

<a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a> 

</div>

</div>
    </b:if>

Or if you like installing at CSS, you can add like this:

Place above the code ]]></b:skin>

.readmore { float:right;padding: 10px 0px 5px 0px; }

and place this in the body:

<b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
<div class='readmore'>

<a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a> 

</div>

      </div>
    </b:if>

• To make “Read More” printed in Bold

To make “Read More” printed in Bold, you only add the code <strong> … </strong> or <b> … </b>. e.g. :

<b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
<strong><a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a> </strong>
      </div>
    </b:if>

• To make “Read More” with post title

Your “Read more” can be displayed with post title, and the code would be:

<b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>

<a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/>&#160;&#8594;&#160;
<data:post.title/></a>
      </div>
    </b:if>

• To make/replace “Read More” with banner

If you think your text of “Read more” is not so interesting, you can replace it with the button or banner, e.g.:

The code format would be:

<b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'> 
      <a expr:href='data:post.url + &quot;#more&quot;'><img src='YourImageURL' alt='read more'/></a>

</div>
    </b:if>

The real example as below:

<b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'> 
       <a expr:href='data:post.url + &quot;#more&quot;'>

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuBSKt9CTt5wsfChB4oHFY5cJrg0QdbrQTaFy4sLluXjrDaZtd4ncW2LAOOB5uvrFE5C-tpylaSDftJEPMMnohAXEXugefXCnVVB_VCasKxqSpe8g2y1rQaJcX3fetQd8qtmwQa6sU1jo/[1].png' alt='read more'/></a>

      </div>
    </b:if>

And you can create tens or thousands of Read More variations to beautify your blog. Now if you are still upset with that, the following are the steps:

1. Please login to blogger with your ID
2. Click Layout
3. Click Edit HTML tab
4. Check the small box next to “Expand Template Widget”

   

5. Find the code similar to:

   <div class='post-body entry-content'>
         <data:post.body/>
         <div style='clear: both;'/> <!-- clear for photos floats -->
       </div>

    

6. Please replace the above code with your creations as Kang Rohman explain above.
7. Click SAVE TEMPLATE button
8. Done

Happy creating!

Blogger has launched a new post editor – After a long period existing in blogger in draft, finally, the new post editor is officially adopted for blogger. Of course, at the new post editor, we will find the added features for an ease in editing our posts. The following is the screenshot of new post editor for blogger:

New blogger feature: Share from Blogger Navbar - Blogger buzz again reported that it has added a new feature, the share facilities, which is located in the blogger navbar.

When visitors are in your blog, then they can click "Share" so that they can directly post to Email, Twitter, Facebook, and Google Reader.

Modifying the display of Blogger Label Cloud – Yesterday, Kang Rohman informed you about the new feature for Blogger, label cloud. Some have opinion that the display of Blogger label cloud is not interesting to view. If so, you can modify the display of Blogger Label Cloud into the better one. Maybe you want to change the font color, font size, font style, or anything else. It is easy to do that. You only need to add some CSS codes as you desire.

Basically, label cloud has shown the label with the changeable letters based on the number of the label. For instance, the keyword "Blogspot Tutorial" will be larger than the other keywords because Kang Rohman has posted many articles/posts labeled with the keyword "Blogspot Tutorial".

.label-size-1 a {
font-size: 12px;
text-decoration: none;
}
.label-size-2 a {
font-size: 14px;
text-decoration: none;
color:#cd9f01;
}
.label-size-3 a {
font-size: 15px;

font-family: Arial, Tahoma, Verdana;

text-decoration: none;
}
.label-size-4 a {
font-size: 18px;
font-weight:bold;
text-decoration: none;
color:#ea5a04;
}
.label-size-5 a {
font-size: 24px;
text-decoration: none;
}

.label-size-1 a:hover, 

.label-size-2 a:hover, 

.label-size-3 a:hover, 

.label-size-4 a:hover, 

.label-size-5 a:hover { text-decoration:underline }

Businesses that want to sell something in the market need 2 things. The first is the product to be sold which has to be made then distributed to places like the grocery, the mall or the supermarket. The second is marketing which is the vehicle to carry that message across to the consumer so that people are aware of its existence then it is purchased.

The age of the internet has given people the opportunity to make money via the web. There are a lot of websites that offer a person the chance to be seen easily and quickly and one of the best right now is using site maps created by Google.

The benefits of using Google are the following;

· It helps people find ones web page better than other search engines because of better crawl coverage.

· People will be able to search on certain keywords that the person put in place which will directly lead searchers to ones website.

· It allows the person to provide specific information to Google about the web page such as the last time it was modified or how often it is changed.

· Using Google straight will allow ones web page to be seen quickly which is a lot better than other computer companies who promise to do the same thing but can’t deliver in the end.

Now that the benefits have been mentioned, it is now time to go through the step by step process to make a Google site map.

1. The first thing that needs to be done is to do the proper research. The service or product has to fill a need that the customers want right now. It should provide a solution of some kind that will make that will improve the quality of life either at home or at work.

2. Next, one should focus on the product or service that is being offered to the customer must be sold at a decent price. Sometimes, the product one makes is already available in the market. To be competitive, one must figure out a way to convince people as to why this product is better than the other leading brands available. What features does it have that the competitor doesn’t? What makes it unique which is not only about the product on hand but the service that this can give as well?

Just like a normal business where business is done on the phone or in a store, one must acquire the right equipment and machines for the job. These could be merchandise that is either physical or electronic and an online ordering system.

To be successful, one should be sure that the goods that a customer will order can be delivered on time. If there are any problems, a customer support staff or system should be ready to cater to that.

3. If the business is done with a group of people or a single proprietorship, it is best to brainstorm for the best domain name for the business. It should be catchy and will easily be remembered by people. Given that there are probably other people who have been in the business longer and that it is possible that the domain name has already been taken, it is best to think of several names in case it can no longer be used.

4. When a domain name has been selected, one should enter the URL of the website to be created. Google site maker will then crawl the site and create a list of all the links it can find.

5. Next, one should fix the control settings. Doing this will determine how frequent the contents of the site changes which will let Google know how often it should be crawled.

6. If there are certain URL’s that a person does not wish to be included in ones site, Google can be instructed to bypass it so that it will not be crawled and posted on ones site map. One can select what types of files to be bypassed whether these are .zip or .exe files.

7. Also, one has the option of adding the sites FTP information since Google can automatically upload the site map for the person.

There are two major types of business models that entrepreneurs use to make money blogging. The first and most common way to turn a blog into a profit making machine is to sell advertising to different companies and brands who want to reach that blog's readers. The second kind of money making blog is one that helps a single brand improve its image by creating positive associations between the blog and the product in the mind of consumers. Both kinds of blogs can make a lot of money, especially if the creator has a keen mind for marketing.

If you are blogging with the goal of selling advertising, there are two basic ways that you can go about recruiting sponsors who want to put ads on your site; you can let someone else do all of the legwork, or you can do the work yourself and keep all of the revenue. Within the first group, many people make money blogging by selling space through Google's AdSense program. The advantages of this program are numerous, as it requires very little effort on the part of the blogger or webmaster to begin raking in profits. However, most people discover that they make less money through this method than they had hoped that their blog would earn.

Selling advertising directly to companies who want to put banner ads or sponsored links on your blog can take quite a bit of time, but it is often fairly lucrative. If you have a lot of contacts in industries that are related to the topic of your blog, you may want to try to go this route. People who have a strong background in sales and are experienced at pitching proposals can make quite a bit of money by renting blog space to interested companies.

The most serious problem with this model is that you often have to build quite a sizable readership before you can attract advertisers, which can mean that you have to do several months of work before you start to make money blogging.

As blogging becomes a more and more lucrative business, a lot of established companies are considering how they can get into the action. One way that companies are capitalizing on the blog movement is by having blogs that provide a kind of friendly face for their corporation. Often, a company will employ an established blogger to create a weblog designed specifically to appeal to that company's customers and to create positive associations with the brand in consumers' minds. More than one writer who never even dreamed that he or she could make money blogging has been approached by a company and offered quite a pretty penny for this kind of gig.