MWorkshop

2 must-have tools for web developers & designers

2009-04-09T18:43:00.000-07:00

I would like to introduce these 2 software because I recently realized how powerful they are and can't resist the impulse to recommend them. They really solved a lot of problem for me. The first one I want to introduce is Firebug. If you are a web designer and you have never heard of Firebug, get one now! Cause you have no idea what you have missed. Firebug is an add-on for Firefox ( I think that's how it got its name ). It can track down every detail of your web page, from loading time and sequence to CSS definition of every tiny bit of the page. You can browse the document tree to locate your content and you can also click on the page to find its location in the document tree. At the same time, you can see the detailed CSS definition for that part, you can easily find out how many CSS file have definition for that part, where these CSS files are located and which one is in effective. However, Firebug works only in Firefox (obviously!), but you can not just simply ignore IE users, for they are still the majority of web users. The most frustrating experience in web design is that after you spent a lot of time and finally carved out a good looking design in Firefox and then try it in IE to see how it works but

BlogSync Help

2007-03-16T09:30:00.000-07:00

Requirements:
BlogSync don't save any user information to any server, It use client communication ability to connect to blogger and feed url. But unfortunately, not all browsers support this method, so the following software and setting is required.

Firefox
signed.applets.codebase_principal_support setting
in Firefox about:config page, set signed.applets.codebase_principal_support to true.
Flashplayer 9
You may be asked if you allow script to use the enhanced abilities of "Read private data from any site or window", It is because BlogSync need to communicate with Blogger site or feed url, by default, all browsers don't allow that. To make BlogSync work, you have to choose Allow and check "Remember this decision".

Help

Source Manager

Checkbox "save this list on local machine":

Buttons:

Compare selected: Compare selected 2 sources, then list the result.

Add new: Will take you to add new sources page.
Delete: Delete selected source from Source Manager.
Manage Posts: List all posts from the selected source.

Recheck Failed: Recheck sources with status "failed".

Add Source

Compare Results
Post Manager

How to

BlogSync - A tool for bloggers

2007-03-16T09:28:00.000-07:00

The 1.1 version of BlogSync is released.
New version include support for MSN Live Spaces, WordPress, Drupal and it can run in IE and no longer require extra setting.

The new address is:
http://miian.com/blogsync/1.1e

Enjoy!

How to exclude self traffic when using Google Analytics in blogger

2007-02-28T22:53:00.000-08:00

This article was translated from this one.

Many bloggers use Google Analytics to track their blog's internet traffic. But when we testing templates, checking articles ... our traffic is logged in Analytics too, which makes the report inaccurate. How can we exclude traffic by ourselves?

In Analytics help center there is an article introduced a method to exclude traffic by filtering ip addresses. If you have a fix ip, this method should work fine. But for others who don't have a fix ip, it's useless.

Is there an other way?

Yes there is.
There is another article in Analytics help center teaching you how to classify your visitors by setting a customed string value to their cookie, the value will be logged by Analytics when they visit your site.
If you can identify your visitors , you surely can identify yourself too. Just let Analytics filter traffic with the custom value you defined to identify yourself.

Here is how you do it:
Post a new article, put the following html code in.
<a href="#" onclick="__utmSetVar('no_report');">Click me to exclude my traffic</a>

Then go to Analytics setting, create a new filter.
Filter type set to "Custom filter"
select "Exclude"
Filter Field set to "User defined"
Filter Pattern set to "no_report"
Save your new filter.

Now go to your new post in blogger, click on the link.
Then your traffic will no longer be included in Analytics report.

How to display post as thumbnails by change template in blogger

2007-02-27T20:02:00.000-08:00

This article was translated from this one.

With new blogger template, you can do a lot of things, including display your post with thumbnails, it's better than traditional blog layout if you have lot of photo in your posts.

Next is a step-by-step tutorial for peoples that are not quite familiar with blogger template "programming". The basic ideas of this method is quite simple, if you know something about template codes, you may quickly understand it. And it's easy to extend this method to suit your needs if you have some css / javascript skills.

First your have to understand that as a Template the blogger template is very powerful than other templates. But it's not powerful enough to create thumbnails for you, so you have to make them yourself. Or you can use one of images in your post as thumbnail image.

After you created the thumb image, upload it to a place, you can upload it in the post, you also can put it somewhere else. All we need here is its URL.

Now edit your post, if you don't see a link input box under the title box, you have to go to blogger setting to make it there. Here is an article in blogger help about how to open the link field. copy your thumbnail image url into the link box. Then choose a label name to identify posts that you want to display as thumbnails. for example you choose "Photo" as the label. Now add the label "Photo" to the post, save it.

OK, the data is ready, next we edit the template to make it work. Go to template setting, open HTML edit box.

Search for the next line:
<b:widget id='Blog1' locked='true' title='Blog posts' type='Blog'/>

When you find it, replace it with next code:

<b:widget id='Blog1' locked='true' title='Blog posts' 
    type='Blog'>
  <b:includable id='main' var='thisdata'>
    <b:if cond='data:blog.pageType != "item"'>
      <div style='margin:0px;padding:3px;'>
      <center>
        <b:loop values='data:posts' var='post'>
          <b:loop values='data:post.labels' var='lb'>
            <b:if cond='data:lb.name == "Photo"'>
              <a expr:href='data:post.url'>
                <img expr:alt='data:post.timestamp' 
                  expr:src='data:post.link'
                  expr:title='data:post.title' 
                  height='100'/>
              </a>
            </b:if>
          </b:loop>
        </b:loop>
        </center>
      </div>
    </b:if>
  </b:includable>
</b:widget>

then find this code:

     <b:if cond='data:post.link'>
       <a expr:href='data:post.link'><data:post.title/></a>
     <b:else/>
        <b:if cond='data:post.url'>
          <a expr:href='data:post.url'><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if>
     </b:if>

Delete bolded codes.

Now we are done.
Save the template and check the results.

For advanced readers, here's some explain of the template code above:

first I loop for every post
in one post, I loop for every label the post has
if label.name == "Photo"
draw the img, use post.link as img.src, use post.title as img.title, use the post.url as the link on img.

The basic is that simple.

New year flower market

2007-02-27T19:59:00.000-08:00

Simon in shenzhen dogshow

2007-02-27T19:58:00.000-08:00

His name is Simon, he is the best american cocker spaniel I ever seen.

Simon in shenzhen dogshow part2

2007-02-27T19:57:00.000-08:00

part 1 is here

Toy group in shenzhen dogshow

2007-02-27T19:56:00.000-08:00

BIG

Preparation in shenzhen dogshow

2007-02-27T19:53:00.001-08:00

Outside the ring in shenzhen dogshow

2007-02-27T19:51:00.000-08:00

These are dogs outside the ring.

Are you talking to me??

Other dogs in shenzhen dogshow

2007-02-27T19:47:00.000-08:00

Husky! Cool!

It's the funniest moment in that day. He just won the BIG, but...

make face

My cat mimi & miaomiao

2007-02-27T19:44:00.000-08:00

Waterfalls

2007-02-27T19:43:00.000-08:00

My new monster truck

2007-02-27T19:42:00.001-08:00

新年新车

A trip to Guilin

2007-02-27T19:40:00.000-08:00

fly the tower top is made by pure gold