Change numbers of posts displayed by label

Blogspot already has UI allow our to set the number of posts displayed at main page or displayed by days.


Check this picture below :



But when we click on a label in Label widget, there're many posts displayed.
By default with a blogspot blog, max of posts displayed is 20.
And you need to customize number of posts display by label, do the following :



Go to "Edit HTML" as in picture above. Remember to save your template ( for safety ;) ), and then check the check box "Expand Widget Templates".

Now, press Ctrl+F and find below snippet:

   <div class="post-footer-line post-footer-line-2">
   <span class="post-labels">
     <b:if cond="data:post.labels">
       <data:postlabelslabel>
       <b:loop values="data:post.labels" var="label">
         <a href="data:label.url" rel="tag"><data:label.name></data:label.name></a>
         <b:if cond="data:label.isLast != "true"">,</b:if>
       </b:loop>
     </data:postlabelslabel>
   </b:if></span>
   </div>

The snippet above show post's label at (usually) bottom of your post.
Notice the phrase in RED, modify it to customize your posts number displayed:
<a expr:href='data:label.url + "?max-results=3" '
3 is mine, just replace yours.

And, the snippet below is the Label widget:

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
 <b:if cond='data:title'>
   <h2><data:title/></h2>
 </b:if>
 <div class='widget-content'>
   <ul>
   <b:loop values='data:labels' var='label'>
     <li>
       <b:if cond='data:blog.url == data:label.url'>
         <span expr:dir='data:blog.languageDirection'>
           <data:label.name/>
         </span>
       <b:else/>
         <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
           <data:label.name/>
         </a>
       </b:if>
       <span dir='ltr'>(<data:label.count/>)</span>
     </li>
   </b:loop>
   </ul>

   <b:include name='quickedit'/>
 </div>
</b:includable>
</b:widget>

Change phrase in RED and we done:
expr:href='data:label.url + "?max-results=3" '
Now, test your work and enjoy.
Happy harvest exp.
Moongy

Expand collapse label widget

This is my first widget on the way i'm learning about blogger.
I don't like original label widget of blogger because :
- it's load all posts related to (slow to browse).
- hard to browse all if there're too many posts of a label.

As you see the label widget on this blog, when a label name is clicked, a table of content (TOC) is display above post region. The TOC author is Hans , you can visit his site and try implement the original TOC if you like.

At first, your blog must already has a label widget. If not, just add one ;).
There are three easy steps to get one label widget. Here you are :
1. In Layout tab of your blog administration region, choose "Edit HTML". After "Expand Widget Templates", press Ctrl-F and type "Label1" to look up your label widget code ( or find it by any way you want ;) ).
You found code like this :

Replace code above with this (click to get code )
Ok, step one finished .

2. Now, press Ctrl-F and lookup "type='Blog'". You found it?
Ya, nothing to do with this line, Let take a look at the line above it.
section class='main' id='main' showaddelement='yes'
change showaddelement to 'yes'.
Save your work.
Ok, step two finished.

3. Choose "Page Elements"
You can add Page element in the same column with Blog Posts now. ;). Ok, click to add one.
In the popup, choose type of widget is "HTML & JavaScript", click "Add to Blog".
You see a new popup appear. Ya. Now add this code (click to get code) to Content, title just left blank.
Click "Save Changes".
step three finished.

Just view your blog and enjoy the widget.
Happy harvest exp.
Moongy.

Add image to label widget

Do you like Label with the cool arrow image at front like this ;) . It's really cool, isn't it?
It's very easy to have one at the same :D. Just read steps below.

1. You must have your image url, if not you can create a googlepage account at push the image there. If you like this arrow image and ... here you are : http://www.blogblog.com/rounders3/icon_arrow_sm.gif
2. Now, log in to ur blog, choose "Layout" tab, choose "Edit Html", choose " Expand Widget Templates" (familiar steps ;) ).
3. Press Ctrl+F and find your Label widget's code (my keyword is "Label1" ^^).

what we found:
<b:if cond="'data:blog.url"><span dir="'data:blog.languageDirection'"><data:label.name/></span><b:else/><a dir="'data:blog.languageDirection'" href="'data:label.url'"><data:label.name/></a></b:if>

finished:
<b:if cond="'data:blog.url"><span dir="'data:blog.languageDirection'"><data:label.name/></span><b:else/><a dir="'data:blog.languageDirection'" href="'data:label.url'"><img src="IMAGE URL" /><data:label.name/></a></b:if>

4. Rivise the snippet as the 'finished' area, remmember to replace 'IMAGE URL' by your image URL.

Save your template and enjoy.
Happy harvest exp.

Remove posts count of label widget

Ya, it's very easy to do this.

- First, login to your blog , select tab "Layout", chose "Edit HTML".
- Check the box "Expand Widget Templates"
- You see the page reloaded. Ok. Now, find the code like this:

Easily way to found code above is use Find function of your browser - press Ctrl+F and enter this text :

<span dir="ltr">(<data:label.count>)</data:label.count></span>
- To do what we need ( Remove posts count of label widget ), just delete the line you found ( selected line in image above ).