Blogging Tutorial

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.

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.

As we know that now Blogger has supported the function to cut off the article or known as Read more function. But recently, the automatic Read more is more popular because the automatic Read more will cut off the posts automatically without doing anything.


If you want your blog has the automatic Read more function, you can follow the easy steps below. Even Kang Rohman has discussed it previously in another blog, at blogtemplate4u.
The following are the steps:

1. Login to blogger with your ID.
2. Click Layout
3. Click Edit HTML
4. Click Download Full Template and backup your template to anticipate if error occurs.
5. Tick the small box beside the words Expand Widget Templates.
   
   
   
6. Copy and paste the JavaScript below exactly above the code </head>
   
   
   

   <script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script>
   <script type='text/javascript'>
   //<![CDATA[
   function removeHtmlTag(strx,chop){
   if(strx.indexOf("<")!=-1)
   {
   var s = strx.split("<");
   for(var i=0;i<s.length;i++){
   if(s[i].indexOf(">")!=-1){
   s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
   }
   }
   strx = s.join("");
   }
   chop = (chop < strx.length-1) ? chop : strx.length-2;
   while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
   strx = strx.substring(0,chop-1);
   return strx+'...';
   }
   function createSummaryAndThumb(pID){
   var div = document.getElementById(pID);
   var imgtag = "";
   var img = div.getElementsByTagName("img");
   var summ = summary_noimg;
   if(img.length>=1) {
   imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
   summ = summary_img;
   }
   var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
   div.innerHTML = summary;
   }
   //]]>
   </script> 

   
   
   
   Or you can download this script: download
   
   
   
   
7. Find the code <data:post.body/> on your template (tips: press Ctrl + F on your keyboard then write <data:post.body/> and hit Enter).
8. Remove the code and change with the code below:
   
   
   
   
   
   
   
   

   <b:if cond='data:blog.pageType != &quot;item&quot;'>
   <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
   <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
   </script>
   <span class='rmlink' style='float:right;padding-top:20px;'>
   <a expr:href='data:post.url'>&#187;&#187;&#160;&#160;read more</a></span>
   </b:if>
   <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
   </b:if>

   
   
   
9. Click SAVE TEMPLATE.
10. Done

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.

Need Icons for your Blog? Find out at Icon Finder – Several months ago, Kang Rohman wrote about some websites that provide the beautiful icons to be used for free on our blog or website. This day, Kang Rohman has found a website similar to a search engine like Google or Yahoo, but specifically to search for icons. This Icon Search Engine is called Icon Finder.

With Icon Finder, you can find easily the various icons you like most by simply clicking the keyword for icon you want to find at their search engine, e.g. arrow, home, twitter, etc.

By clicking the search button, you will find hundreds or even thousands of icons that you need. For license, you can view the remarks through license link available.

So, if you need icons for your blog, Icon Finder is worth trying. Those who want to try, please visit http://www.iconfinder.net

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 }

New Blogger Feature: Label Cloud – There’s new news from blogger buzz, now blogger has supported the label cloud. If previously Kang Rohman wrote a hack for making label cloud, it seems that the hack is no longer useful because blogger has made it.

Label Cloud Widget made by blogger is very interesting; one of the interesting things is that we can choose whether to include the number of post or not, or which labels to be displayed.

Trick to upload the big-sized images in blogger - In yesterday’s post, written how to get image hosting with unlimited bandwidth, it is by using Blogger. But there is a little bug that we cannot post or upload the images over 400 pixels, because when we do that, it will be automatically less than 400 pixels.

Is there any trick on how to upload the bigger images in blogger? The answer is yes and easy. Curious? Here are the ways:

Searching for image hosting with unlimited bandwidth? Just use Blogger! – Do you want to find the free hosting to store the images with unlimited bandwidth? Do not be confused to find at any other place; just use Blogger! How? The practical way is that you should create a blog in Blogger specialized to store the images. Kang Rohman has done it long time ago, especially for images that Kang Rohman uses for the free template created because the more templates used, the more bandwidth needed.

The way is very simple. Just create a blog for your image gallery ( in different account ). Just post and publish the images you want to use, and then to take the URL of the images, you can do as follow:

Hello Readers, last month, exactly at the post entitled SEO Tips: Add "rel=Canonical" into Blogger, Kang Rohman gave the SEO tips on how to add the rel="canonical" on blogger template. Now you do not need to follow the tips because blogger.com has automatically added the code of rel="canonical" on your template with the condition that you do not remove the code:

<b:include data='blog' name='all-head-content'/>

To check it, please visit your own blog, and then view the source code. Confused to view the source code, below is the way:

<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='blogger' name='generator'/>
<link href='http://www.blogger.com/favicon.ico' rel='icon' type='image/vnd.microsoft.icon'/>
<link href='http://www.blogspottutorial.com/' rel='canonical'/>