YJL

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


It's 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.


I have already written a Bash script and a template for use.

Please download lastfm-tracks.sh and lasfm-track.xslt.

Put them together and run the script, you will get something like:

$ ./lastfm-tracks.sh
Your Last.fm username: livibetter
                               
Choose type of your tracks:    
 1 - Last 7 Days
 2 - Last 3 Months
 3 - Last 6 Months
 4 - Last 12 Months
 Other - Overall

Select?
--2009-10-24 16:24:37--  http://ws.audioscrobbler.com/2.0/user/livibetter/toptracks.xml
Resolving ws.audioscrobbler.com... 195.24.233.55
Connecting to ws.audioscrobbler.com|195.24.233.55|:80... connected.
HTTP request sent, awaiting response... 200 OK
Length: unspecified [text/xml]
Saving to: lastfm-tracks.xml

    [    <=>                                                                                                                                       ] 37,546      33.3K/s   in 1.1s

2009-10-24 16:24:40 (33.3 KB/s) - lastfm-tracks.xml saved [37546]

===== BEGIN =====
Lebe lauter, Fieber, Das Beste, Optimist, Ohne Dich, Meer sein, Misery Business, Nie genug, An Sommertagen, Augenblick am Tag, Mitten unterm Jahr, That's What You Get, Come to your senses, Ich wünsch dir was, Ich Lebe, Anders, Revolution, Stupid for You, Free Loop, Engel fliegen einsam, Spell, Umbrella, Traffic, Orchester in mir, Reine Nebensache, Seite Eins, Nie zu spät, Better Off Alone, Scherbenmeer, Geile Zeit, Warum, Wenn die anderen, Glücklich, Voice on the Radio, Regen und Meer, Nein danke, Dieses Leben, Ich verschwinde, Zu Weit, Sonne hinter dem Nebel, So Wie Jetzt, Das Ende vom Kreis, Say It Again, Unendlich, Unsere besten Tage, Um bei Dir zu sein, In Zeiten wie diesen, November, Unfold, Kurz vor der Sonne
====== END ======

You can also open the result text file lastfm-track-result.txt.

I don't know if Mac user have xsltproc or not, I believe it has. Mac has no problem with shell script, this should also work.


Please follow the instructions in this page, Installing an XSLT processor. I didn't try it.

Once you install it, you should be able to use it. You need to manual download the feed from Last.fm and run this command with the XSLT template alongside:

xsltproc lastfm-tracks.xslt DOWNLOADED_FEED.xml

If I wrote it in Python, there should not have much problem and could have a GUI, but I don't think it's worth. I want to make it fully automatic not just semi-automatic. But I also need Blogger API to support Profile update, unfortunately, it doesn't support that at this moment. I am not sure if it will in future. I don't want to trick Blogger, which means simulating your editing in that page.

There is also a other sections like movies and books, but I don't know any websites provide similar feed as Last.fm do for music.

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 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

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.
  

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.

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.