Showing Hint under the Title to View a Page With Comments



Dear Friend,

My friend Carlos asks me how to let readers to see posts with comments. I think this is not possible while a viewer is seeing a label or archived query, or if he or she is looking at the home page. I guess the technical reason why Blogger in Beta didn't implement that, is just simply try to avoid a potentially large stream of data to arrive to the viewer's PC. Imagine a situation where you query a category that has 20 posts in each, each post with 20-30 comments. It'll take quite a while to display that page to your screen.

My work-around to this would be to give a hint to the reader to click on the title of the post in order for him or her to read both the full post and the comments.

If you like this solution, then follow these simple steps:

1. Locate the Blog1 widget

<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'>



then the includable named "post"

<b:includable id='post' var='post'>


2. Insert the seven lines in bold to the code. What this does is to check if you're allowing comment for a post, your post has at least one comment ( !=0 ), and you are not on the full post (item) page, then insert the hint. Feel free to use your HTML expertise to alter the simple tags I have, or change the text to become clearer.


<b:includable id='post' var='post'>
  <div class='post uncustomized-post-template'>
    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
      <h3 class='post-title'>
      <b:if cond='data:post.url'>
        <a expr:href='data:post.url'><data:post.title/></a>
      <b:else/>
        <data:post.title/>
      </b:if>
      </h3>

      <b:if cond='data:post.allowComments'>
        <b:if cond='data:post.numComments != 0'>
          <b:if cond='data:blog.pageType != "item"'>
            <div><i>(For full text with comments please click on the title)</i></div>
          </b:if>
        </b:if>
      </b:if>

    </b:if>


I apply this fix to my webpage, so you can see how this works.

Have a wonderful day,

Hoctro

Blogger Hack: Adding Introductions



Dear Friend,

Sometimes a little introductory paragraph or two helps "break the ice" between you and your readers, so they know what they are about to read, rather than just guessing based on one or two "label" words. You can see the new hack in effect on my site. Select on "Blogger Beta"->"My Hacks", for example, will display a little introduction first, then all the hack articles.

Below are the steps on how to implement this hack. As usual, make a template backup copy, then try it on your test blog first. Also, remember to check on "Expand Widget Templates."

Step 1: Add "introduction" function to Blog1 widget

First, locate the widget by looking for this line:

<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'>

Once you see it, look for this line:

<b:includable id='main' var='top'>

Then paste this code right in front of it:

<b:includable id='sub-introduction' var='data:posts'>
<!-- **Introduction Hack - by Hoctro 10/2006 hoctro.blogspot.com ** Step 1 **

**** -->
<b:if cond='data:blog.pageType != "item"'>
  <b:loop values='data:posts' var='post'>
  <!-- Check for Homepage case -->
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
      <b:if cond='data:post.title == "Introduction"'>
        <div class='post'>
          <div class='post-body'>
            <p><data:post.body/></p>
          </div>
        </div>
      </b:if>
    </b:if>
  <!-- Check for matched labels -->
  <b:loop values='data:post.labels' var='label'>
    <b:if cond='data:post.title == data:label.name'>
      <div class='post'>
        <div class='post-body'>
          <p><data:post.body/></p>
        </div>
      </div>
    </b:if>
 </b:loop>
</b:loop>
</b:if>
</b:includable>


Step 2: Modify the main includable of Blog1 widget

Scroll down to this line again,


<b:includable id='main' var='top'>


then look for the portion of code that starts and ends with these lines,



  <div id='blog-posts'>


...

  <!-- navigation -->
  <b:include name='nextprev'/>





You are going to replace everything in between with these lines,


<!-- **Introduction Hack - by Hoctro 10/2006 hoctro.blogspot.com ** Step 2 **

**** -->
   <b:include name='sub-introduction' values='data:posts'/>
    <b:loop values='data:posts' var='post'>
      <b:if cond='data:post.title == "Introduction"'>
        <b:if cond='data:blog.pageType == "item"'>
          <b:include data='post' name='postQuickEdit'/> 
          <b:include data='post' name='post'/>
        </b:if>
      <b:else/>
        <b:if cond='data:post.dateHeader'>
          <h2 class='date-header'><data:post.dateHeader/></h2>
        </b:if>
        <b:include data='post' name='postQuickEdit'/> 
        <b:include data='post' name='post'/>
        <b:if cond='data:blog.pageType == "item"'>
          <b:if cond='data:post.allowComments'>
            <b:include data='post' name='comments'/>
          </b:if>
        </b:if>
       </b:if>
    </b:loop>
  </div>


Step 3: Name your new introductory posts with "special" titles

Name your "special" new introductory posts' titles with exactly the same label names. for example, for the introductory post of "My Hack" to show correctly on my homepage, I had to name the title as "Blogger_Beta*My_Hacks" (I use my own's two level tab hack, hence the star (*) symbol in the middle) Also, after composing this special post, you need to change the date to some time in the past, so it will not show up as the latest. Also, if your introductory post has more than one label (which you shouldn't do,) make sure the last label is the same as the post's title.



here is the result,




For an introduction in your homepage, you will need something different. You need to create a post with the title "Introduction", do not assign a label (leave it blank), and set the date to a distant future! (I owe Hans from "Beautiful Beta" for this "set-in-a-future-date", by the way. Thanks! Hans.) This will make sure the post always includes in the homepage's post collection, thus it will show up. When displayed, this post will not show a title nor allow any comment from the readers.



Here is the result,



That's all it takes to have introductory paragraphs to show up on your blog. I hope you will able to make use of this hack.


Technical Comments:


Below are my technical comments, explaining the hack's logic. If you are interested in then read on. You're not required to understand my explanations to make it work on your blog.

1. I'm glad I am finally able to write another hack without the help of JavaScript. There is nothing wrong with JavaScript, it's just that stretching beta's own simple language is really fun. Indeed, beta's template doesn't need any Javascript at all, and it still looks great.

2. In Step 1: the "introduction" function, I create a loop, thus in effect make Blog1 loops through its post collection twice. That's how the introductory post can bubble up to be the first in the list. Inside the loop, I have two cases:

-If the reader is at homepage, then check to see if one of the post has the title of "Introduction." If so, prints the body only. This post must not have a label assigned.

- Next, I create another loop to go thru all the labels, and if one of them match the post's title, then also prints the body.

3. In Step 2, the goal is completely different. We want the introduction not to show up twice, yet at the same time it must be visible in the item page, if someone clicks on it from the archived list, hence the if-then-else structure.

I hope you will find some good use of both the hack and its source code as well.

Have a wonderful day.

Hoctro
(10/8/2006)

How to add a new CSS parameter to your Blogger template



Dear Friend,

Cecilia left a comment asking me if I know anything about changing the default background of the blog. As usual, I go looking for answers in several of my CSS books (Bulletproof Web Design, CSS CookBook, Eric Meyer on CSS, etc.) For this one, the answer is right on Chapter 1 of the "Bulletproof Web Design" book. So here it is, if you have one of the Minima designs, please alter the equivalent tags of the template's CSS portion like this:



body {
/*background:$bgcolor;*/
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
background: $bgcolor url(http://photos1.blogger.com/blogger2/7873/821550570340913/1600/bg.gif) repeat-x top left;
}


/* Header
-----------------------------------------------
*/

#header-wrapper {
width:660px;
margin:0 auto 10px;
border-bottom:1px solid $bordercolor;
}

#header {
margin: 5px;
/*border: 1px solid $bordercolor;*/ text-align: center;
color:$pagetitlecolor;
}


/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
border: 1px solid $bordercolor;
font: $bodyfont;
background: #fff;
}



Discussion:

* In CSS, if you want some effects to be temporary disabled, use this /* xxxxxx */ format. Notice that a comment inside another comment is not acceptable, such as

/* xxx /* xxxxxx */ xxx */


*This line, in particular, adds a faded yellow picture to the top-left of the screen, and repeats that picture in the horizontal (x) direction.

background: $bgcolor url(http://photos1.blogger.com/blogger2/7873/821550570340913/1600/bg.gif) repeat-x top left;


* In addition, I tweak some code so that instead of the default two boxes around my title, now I only have a line at the bottom. Since the line is added with same color as the border's, I can change it visually with the "Font and Color" Editing option.

#header-wrapper {
width:660px;
margin:0 auto 10px;
border-bottom:1px solid $bordercolor;
}




* You can add more font and color variables to the template, and they will show up in the "Font and Color" design tab. What this means is that you will have many more options to play around with, not just the default ones from Blogger templates.

For example, I could create a new color variable (inside the <b:skin> tag at the front of the template):

<Variable name="commenttextcolor" description="Comment Text Color"
type="color" default="#999" value="#999999">


and it would show up in the "Font and Color" tab,



This new variable has a name so you can add later as $commenttextcolor in the actual CSS code, a description name for it to show up in "Font and Color" design tab, the type of "color", and a default and actual value. I think Blogger will write whatever your choice back to this "value" so your template is always up-to-date and independent of Blogger's database.

Now that you have a variable, you can apply that to the CSS code, just like any other default variables.

* For my Vietnamese blog, I have used the same code showing in this article to modify its appearance. Please take a look.

Have a nice day,

Hoctro (10/2006)
Blog: http://hoctro.blogspot.com/

Showing a Hint on Where to Post a Comment



Dear Friend,

Nanny22girls from Google Help Groups: Customizing Templates
asks if she could reword the comment line at the end of each post in index pages to say "Leave a comment here", along with the number of comments.

After looking into it, here is my quick fix:

In Template->Edit Html, check on "Expand Widget Templates" to view the entire template. Then, locate <b:includable id='post' var='post'>, and keep scrolling down to see this:

<span class='post-comment-link'>
        <b:if cond='data:blog.pageType != "item"'>

          <b:if cond='data:post.allowComments'>
            <a class='comment-link' 
expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
          <b:if cond='data:post.numComments == 1'>1 
          <data:top.commentLabel/><b:else/><data:post.numComments/> 
          <data:top.commentLabelPlural/></b:if></a>
          </b:if>
        </b:if>

      </span> 

You are going to replace the code in bold with this code:

<b:if cond='data:post.allowComments'>
  <b:if cond='data:post.numComments == 1'>1 
Comment<!--<data:top.commentLabel/>-->
  <b:else/><data:post.numComments/> 
<data:top.commentLabelPlural/>
  </b:if>
  <a class='comment-link' expr:href='data:post.addCommentUrl' 
expr:onclick='data:post.addCommentOnclick'>Leave your comment here</a>
</b:if>

Notice there is a space at the end of "1" before the code goes to the next line, and the same thing happens with the <data:post.numComments/>. If you don't leave a space, then there won't be a space between the number and the word comment (or comments.) Notice I fix the "1 Comments" bug too.

Here is the result:



and the "1 comments" bug:



I think this enhancement really makes commenting more easier, since the link on where to add your comment now is easier to look for.

Have a nice day,

Hoctro (9/2006)
Blog: http://hoctro.blogspot.com/

On Celebrating 10 000 Visitors Milestone




Dear Friend,

It's October already! About a month ago, Blogger in Beta released its feature of "Edit HTML", revealing how powerful and more straight-forward the new templating design is. Not being a hacker of the Classic Blogger, I had the advantage of looking at the new template design with a fresh, un-bias mind frame, and was able to find some good usage of the new label feature.

And that "hacking" mentality that is always in my mind, again, twist the very existence of this blog to a complete unpredicted direction. You see, this blog at the very beginning was a humble idea for me as a (controllable) place to talk about the music of one of my most admired musician, Pham Duy. I think, and many if not most of my fellow Vietnamese will agree, that Pham Duy is the most famous and influenced of 20th Vietnamese music. His 86th birthday will be on October 5th. Happy Birthday to you, Bác Phạm Duy, may your music and your legend will live for the next 300 years (300 năm nữa có ai còn khóc Tố Như?) and many more. You can sample his music here.


Back to the new template design. In my opinion, it was such an elegant and far more simpler design than the one I knew and wrote an application at work - XSLT. You can't really compare between the two actually, since XSLT is a generic one, it works for every xml file, while Blogger template is specifically designed for Blogger Beta. The new design is much simpler with far less tags to learn than the old one, and the logic of the code is far easier to understand, I felt I should start tweaking it the way I think it should deserved to be. Being a programmer with the "constructive laziness" mind frame, it's so tempting yet amazed to see new labels magically incarnated as real-time tabs. I still think it's wonderful everyday that labels can be shown as all kinds of tabs and navigation widgets, even though I know exactly how it works.

So you see, from a humble first post with a comment from my vietnamese friend, chị Minh-Thanh từ dactrung.net:



to my first two non-vietnamese friends, Ramani and Vivek:



after a bit more than a month (with the help from Buzz and Blogs of Note) this blog will reach 10000 visitors' milestone shortly with people visiting from all over the world:



specifically:



indeed the blog is reaching the 10000 posts milestone fast:



As you observe, the vietnamese readers are only accounted for 3%, and my site since that first hack geared its contents more and more toward the globally english-based readers. Yesterday, I finally decided to create a separate blog (http://hoctroviet.blogspot.com) to put my vietnamese posts there. I think it's fair for all of us.

To all my readers, thank you so much for your visits. Your insightful comments and constructive opinions are what keep me going.

I find it so much enjoyable every time I visit a blog that implements one of my hacks (so please show me your blog once you complete with the hack.) It's true. I'm not in this for the fame, as I rather go with my nick name hoctro (it means pupil in vietnamese, btw) than my real name. Yet, I care about this blog's professional and technical qualities as the same level as my programs I have been writing at work. I'm in this because I truly believe that Google really wants to bring us closer together by offering us an effective, yet fun and free, communicating tool. I'm here to make that service from Blogger more enjoyable for you. And no, i'm not a Google employee :-). That's it. As long as it's still fun to do, and I can still learn a thing or two, i'm going to hack some more, i think :-)

Have a wonderful first day of October to you all and thank you for reading.

Hoctro

(10/1/2006)