YJL

Almost a year ago, I posted a post about how to add falling snow script on my another blog (I didnt create this blog yet).

This year, I pulled the time ahead for another month. I added four buttons that you can more easier to add on your Blogger blogs.

Choose one you like to put on your Blogger blogs.

I have been wondering how I could edit my favorite music section in my Blogger Profile. One good way may be the Last.fms top tracks feed.

Its an XML feed (e.g. my overall feed), you need to process it. An easy way is to use XSLT processor, xsltproc, you should be no big deal if you are a Linux user.

If you know about HTML, you probably had use:

<a name="Damn">Blogger Drives Me Crazy!</a>
blah...
blah...
<a href="Damn">Go to Blogger Drives Me Crazy</a>
blah...
blah...

So the code above provides a in-page link. I tried to write a blog posting with that, Blogger's Compose mode made me crazy!

You have to enter the HTML code name="Damn" in HTML mode, that would be fine as long as you don't switch back to Compose mode. If you do, your code will be inserted with new attribution href and a link will be assigned to it. That wasn't the result you would like to see.

So basically, you must stay in HTML mode. However, sometimes, WYSIWYG is too convenient. Even you are a HTML nuts, you may accidentally switch to Compose mode. If your page is still Draft, God bless you! Your code has been messed up! Because of autosave.

So, I go back to Google Docs, I had been using it to write a while ago. The only problem with it is the images. I used to compose in it, then paste into Blogger's edit and inserted the photos.

Obviously, this will not be working this time.

So, I put image in Google Docs and modify the code to make it hotlink to Google Docs' server to serve images.

Here is the steps:

1. Edit your document in Google Docs
   
2. Copy HTML code from Edit/Edit HTML
3. Use a editor can support regular expression replacement. I use Vim. After the HTML in VIm, type :%s_"File_"http://docs.google.com/File_g
4. Paste the modified code to Blogger's editor. Don't switch to Compose mode.
   

This is terrible, just for name attribution. But I really don't know if there is a better way to do this. However there is a benefit of using Google Docs to do such task, it's easy to maintain those links (Bookmarks in Google Docs), you don't have to type those anchor names, you can choose from list. No typos any more.

The Label Cloud feature has been released for one and a half months, I just tried it out. The representation of cloud is fine, but not as good as my LabelX (An external JavaScript to convert original Labels gadget into a label cloud representation). The benefit of using original official functionality is I dont need to add more JavaScript, which will slow a bit the page loading.

However, it doesnt show the post count when your mouse cursor stay on a label. I know you can show post count after label, but its too ugly! The original partial XML code is as follows:

<b:loop values="data:labels" var="label">
    <b:if cond="data:blog.url == data:label.url">
      <data:label.name></data:label.name>
    <b:else>
      <a expr:dir="data:blog.languageDirection" expr:href="data:label.url" href=""><data:label.name></data:label.name></a>
    </b:else>
    <b:if cond="data:showFreqNumbers">
      <span dir="ltr">(<data:label.count>)</data:label.count></span>
    </b:if>
  </b:if>
</b:loop>

I have modified this part code, the revised version is as follows:

<b:loop values="data:labels" var="label">
    <b:if cond="data:blog.url == data:label.url">
      <b:if cond="data:label.count == 1">
        <data:label.name></data:label.name>
      <b:else>
        <data:label.name></data:label.name>
      </b:else>
    <b:else>
      <b:if cond="data:label.count == 1">
        <a expr:dir="data:blog.languageDirection" expr:href="data:label.url" expr:title="data:label.count + &quot; post&quot;" href=""><data:label.name></data:label.name></a>
      <b:else>
        <a expr:dir="data:blog.languageDirection" expr:href="data:label.url" expr:title="data:label.count + &quot; posts&quot;" href=""><data:label.name></data:label.name></a>
      </b:else>
    </b:if>
    <b:if cond="data:showFreqNumbers">
      <span dir="ltr">(<data:label.count>)</data:label.count></span>
    </b:if>
  </b:else></b:if></b:if>
</b:loop>

Now it can show the post count, its not really a necessary point to all blogger, but I want that. You can scroll down to bottom to check it out.

The BRPS blog has been moved to new place, see you there!

By request of westius, BRPS now is able to append a small piece that may help your track if your visitor click on posts of related posts list.

The new option is append_src:

<script type="text/javascript">
window.brps_options = {
  "append_src": true
  }
</script>

The the links in related posts list will look like

http://example.blogspot.com/2009/03/post-title.html?src=brps

Milkberryland¹ is a blog about Japanese art, food/cooking, music, crafts and probably anything about Japan, which is written in English by milkberry. You can see many cute drawing on this blog. Pink FTW!

[1]	http://www.milkberryland.com/ is gone.

For a long time, I always feel the official SEARCH BLOG button (at the top-left) is kind of confusion. Is that for searching a blog? or for searching a blog posting? or for searching a blog posting in this blog?

Though Blogger.com is one of the biggest blogging platform providers (Is it the biggest?), but that doesn't mean everyone understand each little part of Blogger. Some Blogger bloggers just add their own search box, which is obviously clearly. But why do we reinvent the wheel when there already is one search box?

I decided to make a simple background image to indicate where the search box is. The result looks like:

This background image used Inkscape to render the text, and GIMP to draw the arrow and to mix.

If you want to have same thing on your Blogger blog, you can go to your blog's Dashboard Layout Edit HTML, find body { in CSS section. Just right after that should be background:$bgcolor;, however, this may differ in different blog templates. Make it look like

  background:$bgcolor url(http://sites.google.com/site/livibetter/blog-files/searchthisblogbg-arrow-on-left.png?attredirects=0) top left no-repeat;

Save your template, this should be working now.

If your blog already has background image, then you will need to edit it on your own. This may look terrible in IE6, I only tried this on FF3.

Updated on 2009-10-24: Modified image to match new Blogger navigation bar's layout.

The label in Blogger is like the tag in WordPress. But it's not necessary to be that though. You can use label as anyway that you want to. However, since BRPS is fully based on label query. You must follow some rules in order to get the most related posts.

The following is the guidelines:

• Label you post with Category + Tag If you have a computer topic blog and you have a post about photo editing using GIMP on Windows. You may label with Windows, which is using in Category way. But it's not good enough. You may label with Windows, Howto. It's still not enough, try Windows, Howto, Photo editing. You can try more Windows, Howto, Photo editing, GIMP. Why not one more? Windows, Howto, Photo editing, GIMP, Filter. Now I believe that you got the idea, you can go on your own.
• As of writing, Blogger supports up to 20 labels to one blog posting. It won't cost you if you label with 20 labels, so why not just label as many as possible and get the most related posts. BRPS queries all 20 labels for you, don't waste the ability of BRPS!
  
• When you label a post, Photo editing give you more precise results than Photo, editing. Because the later may also match File, editing.
  

From today, this blog also serves as the blog of BRPS (Blogger Related Posts Service). Because I think there is no need to create a new blog for BRPS and this blog name brps has been occupied at blogspot.com I hate those name wasters and they dont leave a contact information.

The blog of BRPS is actually posts with label BRPS. So its a sub-blog of The B Thing. In this sub-blog, I will try to write about how to use BRPS and giving you some tips. I also plan to introduce some nice active blogs to you.

A quick report about current status of BRPS. The daily requests reach nearly 20K and almost 100 active blogs.

Dont forget to checkout the wiki page and discussion group.

Thanks for using BRPS!

I have to say that I was misled by the paid-feature of WordPress.com. I wasn't aware that is needed to buy credits.

At first, I created a new blog on Blogger, but I didn't like it because I couldn't get perfect URL of that blog. Many people registered blog and awfully only posted one time. On WordPress.com, I still can get a nice URL. I decided to use WordPress.com at the moment, because I saw there is a Edit CSS.

When the time to configure the blog, I then realized that is a paid-feature. It's like most of commericials, you hardly notice the important messages.

However, I have started on it, I wouldn't like to move back to Blogger. I will live without custom CSS.

Actually it's not only painless but also automatic upgrade if you used the Followers gadget. I heard this great news from Blogger Buzz. Now all Followers gadgets on my blogs have converted into the Google Friend Connect gadgets and still have previously followers. We left no one behind!

Good job, Blogger!

I saw someone asked in discussion group, so I decided to write on my own. Here is all you need:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://yjl.googlecode.com/svn/trunk/JavaScript/falling_hearts.js"></script>

Put these two lines to an HTML/JavaScript gadget without setting the title of widget. You should now have falling hearts! <3

You can see them in this demo page. The code is released under the modified BSD.

There will be 40 hearts, flying around, fading at bottom, then starting falling over again. They also slightly change font size and change colors. Those hearts are text, actually just HTML entity &hearts;.

The script currently doesn't let you customize easily. If you want to, you need to download the script, change variables and upload to somewhere else.

Feel free to provide ideas if you need to fit your needs.

Hope you would <3 it!

PostRank is a great service that gives you some good statistics of your blog posts. It provides a nice thematic widget for your top posts popular posts, of course, it also let you customize it. I have been using this thematic widget over my blogs for months. I didn't try customizing it which was due to my prejudice which consists of my experince of iframe. I believed that CSS can not be applied on iframe and the document in iframe, therefore I never tried. Earlier, I read on PostRank's GetSatisfaction, those questions and answers indicate that I was wrong. I tried and I am happy with the result.

If you choose the right-most option while customizing, you will see a partial code like:

var options = {
    "feed_hash": "cbfa4ed49ae77050fb48ccbb47a101bc",
    "num":        6 ,
    "theme":     "diy" 
};
new PostRankWidget(options);

Note that "theme":     "diy".

Now check out the following screenshots, first one is the thematic, latter is customized:


Here is the CSS that I applied:

/* BEGIN: PostRank */
/*
ul.postrank-posts {
  list-style-type:none;
  padding-left:0;
}
*/
ul.postrank-posts li{
  margin-bottom:0.1em;
}
a.postrank-value {
  color:#000;
  width:3em;
  display:block;
  float:right;
  clear:both;
  text-align:center;
}
table.postrank-options {
  display:none;
} 
/* END: PostRank */

I put the PostRank value on the right side because I couldn't make it perfectly on the left. However, the result it not bad at all. If you can make it on left, share with me.

One more thing to note, I only test on Firefox. 90% chance that I believe it will be broken on Internet Explorer since this blog already is.

My LabelCloud/TagCloud script, LabelX, now can render with colors. Here is a screenshot:

YouTube provides few predefined sizes of embedded code, but usually that won't fit perfectly for your blogs. I wrote a simple script to calculator based on the width that you want, it will give you what proportion you should set.

As of writing, the control panel, at bottom of video, is 25 pixels high. If you have set border on, that will increase 20 pixels on both width and height.

---

---

A sample embedded code looks like:

<object width="width" height="height">
 <param name="movie" value="http://www.youtube.com/v/video_id&hl=en&fs=1&rel=0"></param>
 <param name="allowFullScreen" value="true"></param>
 <param name="allowscriptaccess" value="always"></param>
 <embed src="http://www.youtube.com/v/video_id;hl=en&fs=1&rel=0"
  type="application/x-shockwave-flash" allowscriptaccess="always"
  allowfullscreen="true" width="width" height="height"></embed>
</object>

You need to replace proportion in two places, which are marked in red.

This is my 7th active blog on Blogger, yeah! lucky 7!

You should already know what this B thing is, which stands for blogging. That means I will post thing about blogging. However, this is not a blog that provides you tips, tricks, or tutorials, at least, not intentionally. It's for storing my notes or experineces of blogging, leaning towards to technical stuff.