Friday, September 18, 2009

Official Twitter Widget on Blogger

Just got a Twitter account yesterday and had fun stalking people and bombarding messages around.

Yeah, I know I'm slow at adopting latest tech trends, but it had no real use to me until I realize that I can use Twitter to bridge the gap between my Blogger and Facebook, which I often neglect. This is easily done by installing Twitter's Facebook Application and then subscribing to Twitterfeed to parse my blog's RSS feed. So, whenever I post something on my Blogger, Twitter and Facebook will get the updates as well.

The next thing I tried is to display the official Twitter Widget on my blog and this is where I ran into a little hiccup. As you can see from the preview on Twitter's site, the widget is nicely formatted and styled.

But once I copy and paste the code into Blogger's HTLM/JavaScript gadget, it turns out like this - broken. Yucks!

The problem is that Blogger will choose to ignore all external stylesheet links in your code. Therefore, this line below is purged and not saved in your Blogger's layout.
<link href="" type="text/css" rel="stylesheet">

So how do we workaround this problem?

Easy. Just use the style attribute and put CSS code directly into your HTLM/JavaScript gadget. Here is what you do:

  1. Open with your web browser.
  2. Copy the CSS code. (You can leave the comments.)
  3. Open the HTLM/JavaScript gadget in Blogger where you have your widget code.
  4. Replace <link href="" type="text/css" rel="stylesheet"> with <style type="text/css">
  5. Append/paste the CSS code you copied earlier right after <style type="text/css">
  6. Add </style> at the end of the bunch of CSS code to close the style tag.
  7. Save your HTML/JavaScript gadget.

For example, let's say we're grabbing the default Twitter Search Widget code, the working code for Blogger will look like this.

<div id="twtr-search-widget"></div>
<script src=""></script>
<style type="text/css">.twtr-widget{position:relative;font-size:12px!important;font-family:"lucida grande",lucida,tahoma,helvetica,arial,sans-serif!important;zoom:1;}.twtr-fullscreen{font-size:220%!important;}.twtr-fullscreen .twtr-new-results{display:none!important;}.twtr-widget .twtr-spinner{width:14px;height:14px;position:absolute;background:url( no-repeat;top:3px;right:3px;}.twtr-inactive{display:none;}.twtr-widget a img{border:0!important;}.twtr-doc{overflow:hidden;width:100%;text-align:left;font-weight:normal;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}.twtr-bd{padding:0 1px;}.twtr-widget .twtr-tweet-wrap{padding:6px 8px;overflow:hidden;zoom:1;}.twtr-fullscreen .twtr-tweet-wrap{padding:20px;}.twtr-widget .twtr-tweet{border-bottom:1px dotted #ddd;overflow:hidden;zoom:1;}.twtr-widget .twtr-tweet a.twtr-reply{visibility:hidden;}* html .twtr-widget .twtr-tweet a.twtr-reply{visibility:visible;}.twtr-widget .twtr-tweet:hover a.twtr-reply{visibility:visible;}.twtr-widget-profile img.twtr-profile-img{display:block;float:left;width:31px;height:31px;border:0!important;}.twtr-widget h3,.twtr-widget h4,.twtr-widget p{margin:0!important;padding:0!important;line-height:1.2!important;width:auto!important;}.twtr-widget-profile h3,.twtr-widget-profile h4{margin:0 0 0 40px!important;}.twtr-widget h3{font-size:11px!important;font-weight:normal!important;}.twtr-widget h4{font-size:16px!important;}.twtr-widget i,.twtr-widget .twtr-new-results{font-size:9px;font-style:normal;display:block;margin-top:2px;zoom:1;}.twtr-widget .twtr-new-results{text-align:center;padding:3px;margin:0 auto -10px auto;display:block;position:relative;bottom:5px;}.twtr-results-inner{line-height:1;font-size:100%;padding:4px 0;position:relative;bottom:-2px;width:40%;margin:0 auto;z-index:2;text-align:center;}.twtr-results-hr{width:100%;position:relative;z-index:1;height:1px;border-bottom:1px dotted #ddd;bottom:7px;background:none;overflow:hidden;}.twtr-new-results span{position:relative;z-index:3;top:-14px;display:block;font-size:9px!important;}.twtr-hd{padding:10px;position:relative;zoom:1;overflow:hidden;}.twtr-fullscreen .twtr-hd{height:0;padding:0;}.twtr-timeline{-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;position:relative;overflow:hidden;z-index:2;height:225px;}.twtr-flat .twtr-timeline{overflow-x:hidden;overflow-y:scroll;}.twtr-widget .twtr-tweet:last-child{border-bottom-width:0;}.twtr-ft{position:relative;}.twtr-ft div{overflow:hidden;padding:10px;zoom:1;}.twtr-ft span{float:right;text-align:right;}.twtr-ft a{float:left;display:block;}.twtr-ft span a{float:none;}.twtr-avatar{width:40px;height:40px;float:left;overflow:hidden;display:block;}.twtr-fullscreen .twtr-avatar{width:80px;height:80px;}.twtr-img{height:25px;width:25px;}.twtr-img img{width:30px;height:30px;}.twtr-fullscreen .twtr-img img{width:72px;height:72px;}.twtr-fullscreen a.twtr-join-conv{display:none;}.twtr-tweet-text{margin-left:40px;}.twtr-fullscreen .twtr-tweet-text{margin-left:90px;}.twtr-doc a{text-decoration:none!important;}.twtr-doc a:hover{text-decoration:underline!important;}</style>
new TWTR.Widget({
search: '\"San Francisco\" OR @sf OR #sf',
id: 'twtr-search-widget',
loop: true,
title: 'What\'s being said about...',
subject: 'San Francisco',
width: 250,
height: 300,
theme: {
shell: {
background: '#3082af',
color: '#ffffff'
tweets: {
background: '#ffffff',
color: '#444444',
links: '#1985b5'

Another solution is probably to move the CSS link code, as opposed to the entire CSS chunk, to the head part of your blog's HTML. Unfortunately, that didn't seem to work for me when I was meddling with the HTML header in the Template editor. I wonder if I looked in the right place...

Well, I hope this post will provide some helpful information to those who aren't too familiar with HTML and CSS taggings, and/or have the same problem with the official Twitter Widget on Blogger.

Tuesday, August 4, 2009

Mirai Figma (TFS Version)

The real Mirai Figma is finally here! Looks like Mirai-chan's optical eyes are painted just in time for Tokyo Figure Show 2009. This is not the final product so I assume there will be more touch ups when she is ready for mass production. Nonetheless, Mirai-chan is looking gorgeous!

Close-up views...

Some of the DC readers might have noticed the weird joint on Mirai-chan's left wrist, but in any case, I believe this can be easily rectified with some minor adjustments.

While I was modeling 3D Mirai, I actually noted that Max Factory used to choose their Figma characters carefully - girls usually wear sleeves, wrist bands or guantlets to "hide" those hideous looking joints. A clever design I must say.

Hmmm... is it me or do Mirai-chan's lower arms look a bit too ermm.... plump? Probably can't be helped due to the elbow joints.

I feel that Mirai Figma's painted eyes are slightly different from those illustrated by Azami Yuko sensei but they are still very lovely. I approve!

I worry about those twin pigtails though. Notice some supposedly glue residue left on one of the pigtails? Hopefully, the production team will reinforce them with metal wire or something, so that they won't break off too easily.

Well, I could be wrong about the glue residue since the picture quality isn't the best as I believe they were taken from the mobile phone shown in the photo below, which Danny first used it to tease his readers a few days ago. LOL

And more pictures of Mirai Figma display at the Tokyo Figure Show...

Notice only Mirai Figma houses a clear case. I guess she's the only prototype?

I kind of like this photo shoot by Danny. The lighting and camera angle are refreshing. :)

Edit: Better images of Mirai Figma display can now be found at Danny's Tokyo Figure Show Report (1 day after this initial writing). Also hijacked this very nice shot below by ニトロ有線式.

Wednesday, May 27, 2009


Original resolution (2480x3507) in PNG HERE.

At first, I did thought of doing this webcomic in Japanese but due to my limited knowledge of the language and after considering my target audience, I dropped the idea and did it in full English. Thanks to meronpan who helped with the translation of the dialogs, I now have a Japanese version. ^^

Other than my poor ability to read and write Japanese, I realised my Japanese font library is just as pathetic. Luckily, I managed to find some fancy fonts from this site for the main title of my webcomic. Changed the subtitle from "Sibling Love" to "shisukon" (Sister Complex), which I feel is more appropriate in Japanese. I don't know how to translate the small print that says "Dakimakura image from" so I just ripped off some text from Hobby Stock...

Now I wonder if any Japanese will ever get to see this... wwwww

Saturday, May 23, 2009

Suenaga Sisters: Sibling Love

Another one-page webcomic featuring's mascot sisters. This time done in manga style; you read this in a right-left and top-down fashion.

Original resolution (2480x3507) in PNG HERE.
Japanese version HERE.

While I did this for fun, I figured I'm not cut out to be a mangaka. My art style is too inconsistent and my drawings lack the "wow" factor when I restrict them in boxes. I need lots of references to draw and color decently as well. I just hope I don't have any weird colorings in here since I'm colorblind. I could finish the comic with simple toning but the dakimakura will definitely not look spectacular in grayscale.

The image of Mirai in apron is actually a rework of the dakimakura doodle I did some time ago. Sorry I do not have plans to complete the dakimakura sketch. Azami sensei has already done an official one and Danny is kind enough to share the PSD file somewhere on this page.

If you'd like to get the image of Mirai in apron with transparent background, click HERE to download the PSD file. Thank you.

Thursday, April 2, 2009

Figma Mirai in the Making Part 2

More pictures of Figma Mirai in the making. Images hijacked from Danny Choo's post.

Coincidentally, the original writeup was posted on 1st April which caused much doubts and confusion among DC readers regarding the genuineness of this Figma product. Whether this is an elaborated April Fool's joke or not, I reckon that the process of 3D rapid prototyping and the assembly of individual body parts is no easy task. Whoever worked on the prototype has done a pretty impressive job.

There is something missing from this action figure however and I wonder if anyone else has noticed it. Hint: Maho~ (Pani Poni Dash!)

Now if you'll please excuse me, I feel like I'm in a mood for some candy...

Thursday, March 12, 2009

Figma Mirai in the Making

Oh wow! Just read this news on Simply awesome!!! Can't wait to see the finished product.

These Figma body parts seem to be printed from the 3D model I sent to Danny a few weeks ago. I hope Good Smile Company will do some modification to Figma Mirai's hair, torso and skirt, which I felt could have been done better.

Man... wished I could visit Good Smile Company's factory and witness the actual production of this Figma in person.

P.S Danny, hope you don't mind me hijacking this picture.

Friday, March 6, 2009

Mirai Dakimakura Sketch

Before I did the Nyoron Haruka-tan 4koma, I actually made a quick and rough sketch of a Suenaga Mirai dakimakura. Unfortunately, I had to put this sketch aside because I was still trying out PaintTool SAI. Sketch progress was slow too since I have no easy access to a computer and tablet for the past couple of weeks due to major renovation work at my place. After reading Danny's latest news on Mirai Merchandise, I decided to upload this sketch and thought maybe Danny could use it as a reference. Is her pose a little conservative? XD

By the way, does anyone know the best resolution and pixel dimension for drawing dakimakura? The original DPI for my sketch is only 72 pixels per inch with a dimension of 2267 by 4818 pixels. I wonder if that's too small...

Saturday, February 28, 2009

Pocket Digital Clock is One Year Old

Pocket Digital Clock (PDC), which is a Windows Mobile Today screen plug-in I wrote for displaying date and time on the Pocket PC in a stylish manner, just turned one year old today. Yay!

I would like to take this opportunity to thank all users who have supported PDC for the past year. I have never imagine a simple personal project would have benefited other Windows Mobile users and grown into something I'm proud of, especially for someone who had no Windows programming background. Unfortunately, I'm unable to develop the software further due to time constraints and other commitments. Even though there are almost no software updates for the past six months, visitors still keep coming to PDC's home page.

As at 28 February 2009, the total number of visitors has already exceeded 106,000. (The site counter - ClustrMaps was only registered on 15 April last year.) Wow! And the world is populated quite nicely, isn't it?

What surprised me most is that the top visitors are from Japan, follow by the States. The reason is probably because I authorized two Japanese companies - SHINYUSHA Co., Ltd. and Mainichi Communications, Inc. to publish and feature PDC in their magazines. Well I guess I should be saying "arigatou gozaimasu" instead.

Wednesday, February 25, 2009

Nyoron Haruka-tan

While Mirai Suenaga gets her own anime, the younger sister - Haruka is receiving the nyoron treatment.

This time drawn mainly with PaintTool SAI as recommended by most DC readers. Experimented with the various different painting tools in SAI while I tried to imitate the art style in the Nyoron Churuya-san series created by Utsura Uraraka. I had to use Photoshop for the text however... nyoro~n :3

The above 4koma with empty speech bubbles is available for download HERE and you're welcome to caption it.

Wednesday, February 11, 2009

File Hosting Fail

I don't know why but I constantly receive complaints of inaccessible files on where I host my transcribed sheet music. If you're being directed here due to download problems, you can find copies of the files in links below the respective YouTube videos.

Granado Espada Piano Title Music (Full Ver. + Piano Sheet)

Alternate hosting sites:
Picasa Web Album (Piano sheet music only)

CLANNAD - Nagisa/Dango Daikazoku Ver.2 (Rearranged + 初音ミク)

Alternate hosting sites:
Picasa Web Album (Piano sheet music only)

Due to local ISP proxy, my choice of file hosting sites is quite limited. Sorry for the inconvenience.

Monday, February 9, 2009

Mirai and Haruka 4koma

Last week, I was cleaning my Intuos2 tablet and moments later, found myself scribbling away with the Wacom pen without realizing. Images of SD Mirai, which appeared on Danny's site not too long ago, must have been haunting me so I ended up drawing semi-SD version of the Suenaga sisters.

I'm no stranger to CGing but this is probably my first 4koma... I think. Artwork is a little crude since it was a rushed job.

Drawn entirely in Photoshop CS2. Yes, it's not the best software for inking digital lines but I didn't have Painter installed. Anyone wants to recommend me a better program for drawing lines with a tablet?

By the way, this 4koma is an inside joke for the readers.

Panel 1: じーっ (stare)
Panel 2: ドド (heartbeat)
Panel 3: ドドドドド (racing heartbeat)
Panel 4: きゃあ~ (shriek)

Highlight for spoiler >>> Dolphin is another word for penis on <<

Sunday, February 1, 2009

Gamer's Worst Fear Realized

After returning home from a boring trip, I could finally relax and and fired up my Xbox 360 for a couple of Gears of War 2 tournaments. Just when I was navigating through the multiplayer menu, I heard a short but loud screeching noise as if someone was tearing the TV apart. The next moment, the entire screen was glitched with checker-like patterns and the game froze.

My only option was to re-power the console in hope of getting my shooting spree started. And right before my eyes, I witnessed what all Xbox 360 owners fear most - the Red Ring of Death.

My reaction... OTL - I just couldn't believe this would happen so soon since I only bought my first Xbox 360 last year. By the way, it's a Falcon board.

Thanks Microsoft. You just ruined my weekend.

Saturday, January 31, 2009

Toying with Photosynth

Ever since Microsoft launched their new product - Photosynth, I've been tormenting my old Pentium 4 laptop to cough out (render) more 3D images of Figma Mirai at various viewing angles.

Test 1:
(8 Photos - 100% Synthy)
Initially, I tried to synth Figma Mirai with existing images I did previously. I was quite surprised to get 100% synthy, meaning all the images matched, but something's just not right...

Test 2:
(24 Photos - 21% Synthy)
This time, I used the nekomimi version of Figma Mirai as the test subject. I read through the Photosynth Photography Guide carefully and rendered my 3D model at every 15 degrees in hope of synthing Figma Mirai accurately. The result is a little disappointing though - only 21% synthy.

Test 3:
(72 Photos - 56% Synthy)
Then I tripled the number of photos from the previous test, i.e. I do a snapshot at every 5 degrees angle instead. Still quite disappointed with the result. But at least I get to see a fraction of the navigational halo now.

Test 4:
(72 Photos - 56% Synthy)
Since Photosynth detects textures instead of edges, I thought that by decorating the floor with some characters, I can raise the synthy percentage. Guess what? That didn't help at all... orz

Test 5:
(360 Photos - 100% Synthy)
I decided to go all out and rendered Figma Mirai by rotating the camera at every single degree. Although I scored a perfect synth this time, I still could not get a full navigational halo.

The synthing algorithm requires more work. Photo quantity matters. And I need a better PC for faster rendering xD