Showing posts with label Blog. Show all posts
Showing posts with label Blog. Show all posts

Wednesday, February 14, 2024

Liu Qian's Magic Card Show in TV Gala

Liu Qian presented a magic card show at the Chinese Spring Festival TV Gala 2024. Like most magic shows, being interactive with the audience is a very popular way to make the show interesting. Liu's show was so amazing and well received that even audiants in front of TV could participate and get unexpected and unblievable results.

I watched the show on YouTube. When I saw the amazing result, I could not wait any longer to give it a try. I did get a similar and amazing result. Initially, I could not find play cards at that time, and I did not want to destroy cards simply by playing the game. I wanted to do the show with my grandson. I asked him to get a piece of paper to make cards with four different numbers and any drawing shapes. We enjoyed the game very much.

I tried the game several times. Afterwards, I got my understanding and some ideas about the game. I made some modifications to replace Chinese contents with Western ways. Finally, I created the following modified version of the game.

This game is related to mathematics and computer science. Therefore, I write this on my programming blog.

Modifications of the Rules

In Alberta, we have two hokey players: the Flames in the south city of Calgary and the Oilers in the north city of Edmonton. I'll use them as players. The following are the rules and related modifications:

  • In the original show, people from the south had number one and those from the north had number two.
    I made this change: Flames at the sourth have number one, and Oilers on the north have number two.
  • The number of Chinese characters in one's name was used in the show.
    The number of Flames and Oilers names is 6. Another alternative for fun is to use the number of vowels or consonants, just for kits to learn.
  • One interesting choice is the sex of a random person: male as number one and female as number two in the show.
    I use the flip of a coin, the head as number one, and the tail as number two.
  • The secret or magic words are 見-證-奇-蹟-的-時-刻
    I use the English word m-a-g-i-c-a-l

Based on my understanding and analysis, I categorise all the steps in the game into three groups.

Build Cards' Structure - Preparation 1

Those are steps to build cards in the right structure.

  1. Fully shuffle four cards first. Fold the cards in half. Then, based on the fold line, rip the cards into two halves. Finally, put one half on top of another half. The total number of cards is eight.
  2. I chose the Flames to start a game. I read the name of the characters one by one, and at the same time, I place the top card on the bottom of the deck. In this way, I repeat the process six times.
  3. Take the top three cards up and place them any place between the remaining cards, i.e., after the first, second,... or fourth card (before the fifth). I put the top three cards after the fourth card.
  4. Pick up the top card. Keep it in a secret or safe place. This is the secret card.

Up to this step, you have seven half-cards in your hand. Eventually, you will have a last-half card left, and the card will match the secret card, which is the other half.

Deceive or Confuse - Preparation 2

Continue to interact with audiences. The steps in this second group would further deceive or confuse them. By the time of the last step, the right number of cards will be ready for the steps in the last group.

  1. I chose the Flames team, which is in the south of our province. Based on the above rule, the number is one. Take the top card from the deck and place it between the remaining cards. I place the top card behind the third card. It could be placed behind the first card, the second card,..., or the fifth one.
  2. At this step in Liu Qian's show, Liu used male or female for a random choice. Based on my above modifications, the alternative random choice is to throw a coin. My grandson received some chocolate candy coins. We made an agreement: one side as number one, another side as number 2. I explained to him that this is like a hokey game to choose the starting side in the beginning. He threw the coin and got the number two. I asked him to take the top two cards and throw them into the air.
    I asked my grandson to mimic Liu and Xiao Ni (one famous show anchor as the game player). They said, Sorry, cleaning maids. My grandson said, Sorry, dady and mami, we will clean those cards.

Magic Words for Magic Results

Up to this step, there are only five half-cards left. The game entered the most interesting and exciting stage.

  1. Read the magic words in the above rules, one character by one. For each read, place the top card at the bottom. The order is as follows: m-a-g-i-c-a-l.
  2. The last step is the moment in the most emotional and exciting mode. Place the top card at the bottom. At the same time, say it loudly: Keep my luck. Then take the top card from the remaining deck. Throw the card into the air and say, Announcing things, go away!.
    Repeat this sequence until the last card is in the hand.

Now get the secret card and place it next to the last one. Turn them over. What magic!

The last half-card left in your hand is exactly the other half-card, the secret card!

Liu Qian played such an extraordinary magic show at the Chinese Spring Festival Gala. Almost all the audiences, including me and my grandson, in front of the TV, proved this magic result.

Liu said that this is a very ancient magic game. Every year on the eve. of the New Year, many people play this magic game. If you succeed, your days in the next year will be full of happiness; if you fail, then repeat watching and playing the game till you win.

Summary

Liu Qian presented a really good magic game. After following the show and seeing the result, I could not explain the logic, which is really magic. Anyone could play this game, such as alduts. However, I think this game would be very attractive to young kids. The steps in the game are very complicated and long. It is hard to memorise those steps. I repeatedly watch the show, and I think it will be forgotten after a while. That's why I wrote this blog with all the steps. Those steps are grouped into three categories. I think this will be helpful as a study place and reference.

Liu's show was in Chinese. In order to help non-Chinese-speaking people as well as oversee Chinese kids, I modified some parts of the game, based on my understanding, with other alternatives, such as creating cards from a piece of paper, drawing characters, numbers, or shapes, using sports teams, throwing a coin, counting characters, vowels, and consonants, using different magic words, et cetera. In this way, it might attract more people around the world to enjoy the game.

Although the steps in this game, including your modifications, are very long and complicated, those are the magic spirits that make it very hard to grasp its logic. They provide you with an opportunity to demonstrate or practice your show-time talent and bring magic and happiness to everyone. Like many new things, the process of learning and practicing is very important. The repetition will help you to link steps in a fluent and natural way, and the show-time will help you to control rhythm and to present your confidence.

With some changes I made to Liu's show, I hope you can create your version better than mine. Enjoy the game!

References

Read More...

Monday, April 20, 2020

Use div for Table Layout in HTML

table HTML Tag has been in HTML for long time to show table-like layout. Now div is more powerful tag to display a block of text, and this can be used for table-like layout.

The basic concept is to use css styles as a way to instruct div to show block of text in table-like layout. After search on web, I found a couple ways to use div, and I place the correspoding ccs styles in Blogger's templates.

The following are some ccs classes in Blogger template:

/* -- no border table using div class */
.nbTable { 
  display: table;
  width: 100%;
} 
.nbTableRow {
  display: table-row;
}
.nbTableHeadRow {
  display: table-header-group; 
  font-weight: bold;
} 
.nbTableBody {
  display: table-row-group; 
} 
.nbTableFoot {
  display: table-footer-group; 
}
.nbTableCell, .nbTableHead {
  display: table-cell; 
}
.nbTableCell1Line, .nbTableHead1Line {
  display: table-cell;
  white-space: nowrap;
}

/* -- table with border using div class */
.bTable {
  display: table;
  width: 100%;
} 
.bTableRow {
  display: table-row;
}
.bTableCell, .rTableHead {
  display: table-cell;
  padding: 3px 10px;    
  border: 1px solid #999999;
}
.bTableCell1Line, .rTableHead1Line {
  display: table-cell;
  white-space: nowrap;
  padding: 3px 10px;
  border: 1px solid #999999;
}
.bTableHeadRow {
  display: table-header-group;
  background-color: #ddd;
  font-weight: bold;
}
.bTableFoot {
  display: table-footer-group;
  font-weight: bold;
  background-color: #ddd;
}
.bTableBody {
  display: table-row-group;
}

Read More...

Sunday, April 05, 2020

Use VIM to Clean Up HTML

I have set up a blog at Blogger with more than one authors so that we can write our stories, observations about COVID-19. Some authors do not have any knowledge about HTML or how to write clean blogs there. As a result, the blogs they created contains massy HTML tags, either cause them frustration to edit text or inconsistent styles spreading blog text.





I am tech support person working hard behind scenes. One of my jobs is to clean up their blogs to remove unnecessary HTML tags. Here is one example how complexed HTML is:




VIM as Effective Tool


It is really tedious and time consuming to manually remove HTML paired tags. For example:

<span ...>...</span>

I realize that VIM is a great tool for help!

Here is the command to find out span paired block in HTML:

/<span\(\_.\{-}\)\@=\_.\{-}>

search for start patten <span any chars afterwards including mutilple lines till >.

Here is the result:





That's very exiting! With this confirmation test, it will be just line of VIM replace command to clean up span tags:

%s:<span\(\_.\{-}\)\@=\_.\{-}>::g  





More VIM command for finding and replacing


/<\/span\(\_.\{-}\)\@<=\_.\{-}> ## find </span>
:%s:<\/span\(\_.\{-}\)\@=\_.\{-}>::g ## replace </span>


/<div\(\_.\{-}\)\@<=\_.\{-}> ## find <div...>
:%s:<div\(\_.\{-}\)\@=\_.\{-}>::g ## replace <div>


/<\/div\(\_.\{-}\)\@<=\_.\{-}> ## find </div>
:%s:<\/div\(\_.\{-}\)\@=\_.\{-}>::g ## replace </div>

With above a few commands, I cleaned up HTML with great result!





References


Read More...

Wednesday, April 01, 2020

Blogger: Change Background Color & Text Size

I have a blog at Blogger. Recently my friends ask me if I could change the background color and increase font size for my posts. After search on web, soon I found solutions.

Change Background Color


First go to Theme, then Edit HTML.

Expand line 9, b: skin section.





Search for "post.background.color". You will find this as variable definition.





In my Blogger, it is located at line 32: Make a copy the variable first. Then you can make change:

  1. <Variable name="post.background.color" description="Post Background" type="color" default="#ffffff" value="#353d4a"/>
  2. <Variable name="post.background.colorDeleted" description="Post Background DELETE" type="color" default="#ffffff" value="#1c1c1c"/>

Make sure the description on line 2 is not as same as description on line 1. I think that the description is a key for variables.

This variable is used for the class of post.outer





Change Font Size


Another change I would like to do is to enlarge text size of post.  This is very easy to do. Find "post-body" in HTML template



In my Programmer's blog, I could not find post-body. The size of text is defined in body class.


References




Read More...

Friday, September 15, 2017

Change Blogger's Theme

Recently I created a new blog for my iOS app: TapToCount - 3W.

For this web blog, I choose a theme from blog settings. The layout looks fine, except the main page displays an image from my first blog as background image at the top. It stretches ugly taking a lot of spaces on the top.

I need to disable this from the theme. After exploration on the theme's html codes, I found a simple way to disable it.



As marked in red box, I changed the variable "hasImage" to "hasImages". This minor change of variable name makes the block of html codes not embedded into the main page.

This is a note about what I did. Otherwise, I may forget what I did in the blog's theme.

References


My new blog: TapToCount - 3W

Read More...

Friday, March 18, 2016

Change Blogger Content Width Via Template

The default width of blog content for Blogger seems small, comparing large margin on both left and right sides. Recently I created another blog, where several people would be authors. I would like to increase the width for the main body of blog content.

After analysis on the blog template, I found a way to do it. As indicated in the section, I made changes of the value for name: content.width, and the value for main.column.right.width:



There are some resources on web regarding this request, but I found most of them out of date. This change might be out again in the future, but it is good for my template case. The clue to this solution si to search for "width" in my template.

By the way, I have not changed the width for this programming blog. I think the default width is OK for my English blog.

Read More...

Friday, December 18, 2015

Enhanced Syntax Highlighting by HTML

I have been using coloured syntax for codes in my blog for long time. The basic technique is to use VIM's syntax template and TOhtml command. In this way, I can easily get html format for my codes.

The only thing that has been puzzled me is to add line numbers. In VIM is very easy to add line numbers. The view is good. By adding line number, I could explain codes in my blog by line. However, it is a messy if you want to make a copy of my codes in my blog. I would like to have line numbers in my colourful code syntax, but not be copied if selected.

While I was reading Swift Programming Language by Mac Developer Library. I found that code examples there do have the feature I want. By further exploring, I found html ol tag being used. That's the solution for my long time puzzle!

Setup Line Numbers for Codes


Here are steps to get colourful codes in html by VIM:
  1. :set nonumber # to disable line number
  2. :set syntax=swift # change syntax template to swift
  3. :let use_html_css=1 # to use css in html, instead of style attribute
  4. :TOhtml # to convert text to html
  5. remove html tags not needed
  6. :%s:^:<li>:g # add </li> tag to the beginning of each line
  7. :%s:$:</li>:g # append </li> to the end of each line
  8. :%s:\s\@<=\s:\&nbsp;:g # replace continuous spaces, not the first one, by html special code for space.
The html codes generated by above steps are li tags, which can be added to the body of ol tag.
Note
The reason I use css class is that blogger provider allows me to add customized css. If you don't have access to css, then you should use embedded style for syntax colouring.

An example is as follows:





The html codes could be further enhanced, for example, moving ordered line number left out of code box. For the time being, I think it is good enough.

Add Note Section


This is a related topic: adding a note section for code explanation. I like the way in Mac Developer Library to add a note section in simple and clear format. I added this feature to my blog as well.

What I did is to add the following css classes to my html template in blogger:

  1. /* div box with class note for note section */
  2. div .note {
  3.  border-left: 5px solid rgba(233, 233, 233, 1);
  4.  background-color: rgba(249, 249, 249, 1);
  5.  margin: 40px auto 35px;
  6.  padding: 15px 15px 7px;
  7.  width: 85%
  8. }
  9. div .noteTitle {
  10.  color: rgba(128, 128, 128, 1);
  11.  # font-size: 9px;
  12.  letter-spacing: 2px;
  13.  margin-bottom: 8px;
  14.  text-transform: uppercase
  15. }

Here is example of above note section in html:

<div class="note">
<span class="noteTitle">Note</span><br />
The reason I use css class is that blogger provider allows me to add customized css. If you don't have access to css, then you should use embedded style for syntax colouring.
</div>

References



Read More...

Thursday, March 21, 2013

Use HTML Button Tag in Blog

This morning I read an article on web. The article is a long serials one, but it does not show the whole article on one page. Instead, it breaks down into small ones and placed serval buttons at the end of each one: First, 1, 2, ..., Last. I like this style. I immediately related this to my blog. Sometimes, I do the same thing, but I use UL LI list tags to show them as a list.

I did some investigation. What I found are three basic ones. First is to use DIV or UL LI with CSS. Although it does provides flexible and nice layout, it is a little bit complicated. The most concern I have is that I have to define CSS styles in my blog headers. This is not an issue in Blogger, but my other blog web providers do not allow me to add CSS styles.

The second method is INPUT tag. It is very simple. It provide a button like UI. However, it is a single tag with limited layout enhancement.

The third one is BUTTON tag. With this tag, any HTML tags can be placed within open and close tags. I like this one very much. Both INPUT and BUTTON utilize OnClick event to trigger click or hit event. For my blog purpose, what I need is to direct to another URL, either in current document or a new window. This can be done by client side JavaScript. I'll show this later on.

Here I give it a try in this blog.

The following codes define two BUTTON tags. By using inline Javascript, one will open a URL (Apple web page) in another new window and another open Microsoft web page in the current window. Within each button, there is an image content with text on the next line.

<button type="button"
 onclick="JavaScript:window.open('http://www.apple.com')">
 <img src="http://images.apple.com/home/images/billboard_ipad_hero.jpg" />
 <br/>Go to Apple... make my day!
</button>
<button type="button"
 onclick="JavaScript:document.location='http://www.microsoft.com';">
 <img src="http://compass.surface.com/assets/e4/38/e43802e2-8e9c-4fb9-80d6-f27fa6cf50df.jpg#1280_carousel_1_meet_surface.jpg" />
 <br/>Go to Microsoft... make my yesterday!
</button>

Here is another example with two buttons. I added a SPAN tag with TITLE attribute so that each button has a tooltip when you move mouse over the button.

<button onclick="JavaScript:window.open('http://davidchuprogramming.blogspot.com/2004/05/my-first-blog-entry.html')" type="button">
<span title="First blog">||&lt;&lt;</span></button>

<button onclick="JavaScript:document.location='http://davidchuprogramming.blogspot.com/2013/02/communication-between-mvc-controllers.html';" type="button">
<span title="Previous blog">&lt;</span>
</button>

Read More...

Tuesday, October 30, 2012

Chinese Blog Site: diandian

Weibo is my favorite twitter. In Chinese it means micro blog. Weibo is very populate in China. I have seen some English tweets there. Today, I noticed one my of followers has moved his blog from Sina blogger to Diandian web site. This caused my interest.

Actually I like Sina blogger very much. It has some nice features. However, the only thing I miss is the CSS and HTML control. I cannot define my CSS classes and HTML scripts there. That's why I prefer Google's Blogger. I have my duplicate Chinese blog at Blogger as well. For sure, it is also for backup purpose.

点点 or dian dian in Chinese means bit by bit. As it says in Diandian's about page, all the complicated contents starts from simple points, then lines, curves, pixels, text and more. Its motto is Let blog start simple"(in Chinese). The overall look of dian dian blog site is very simple and clean. Of course, the most attractive point is the feature of customized CSS and HTML with Javascript.

Based on some articles on TechRice, Diandian is a copy of Tumblr, which is popular web based blog service. I tried to explore Tumbler, but I could not find a reason to switch to this site, even it says that you can customized everything.



Although the following diandian.com home page looks like Trumblr.com, there is difference, blank page on diandian.com. According to diandian's plan, they will have some distinctive features for bloggers.



There are many great web services in China. I don't mean I want to get the best blog web site, but I am interested in one with features I want. In addition to that, the popularity and reliability are also very important. I am going to ask my Weibo follower about it. I really like to move my Sina blog to another simple and powerful blog site in China.

I'll keep my update about Chinese blog if I make any significant changes.

References

Read More...

Tuesday, July 31, 2012

Blogger Challenge

Recently, I have been puzzled by one challenge: update my blogger with a new view. I have been put image as an indicator of the topic in my blog post for long time. What I would like is to place the icon image off the main column just beside my post title, so that it would be much easy to see the topic for each topic, instead of reading title text. It seems simple task, however, with the limitation of Blogger I just cannot make it happen.

Here are what I tried. Starting from blogger template. I found a place to add a div just right before my post title. The div  has a margin like this style:

....
marin:0 -150%;
....

It does show on the left side of my post title. However, within the div, I could not find a way to change image, the icon for my post.

The icon image is defined in my post. It seems that there is no way to set a reference to a blog post element, such as image's src attribute value. There is a variable in blogger's template, but the values are defined within the template.

I might be possible by using Javascript codes. The difficult point is that how I can define a unique DOM element so that I can retrieve element's attribute value? In addition to that, the Javascript codes have to be trigger on Windows load to update out-fly icon images  from posts.

By the time being, I still could not resolve this puzzle. Any suggestions?

Read More...

Sunday, December 25, 2011

Great Year 2011, and Welcome to 2012

It is time to close to the end of Year 2011.  At the time this blog is published, I am on my way to China to visit my mother, sister and brother.

This is another great year for me. I finished my contact for 2011 at Husky Energy and I'll move to development team for another year.  Even though I have done not much programming this year, I have learned so much by provide application support.  This has been great experience to learn much more about applications, by using application, trouble shooting issues, and providing helps to gain better understanding of applications created by other people and companies.

I think to extend knowledge to a wide range is very important. You will never know when those skills and knowledge will be useful.  My past experiences with a wide range of stuff benefit so much.  This has been proved in my work in 2011.  In so many cases, my past knowledge in SQL, Oracle, OPC, Windows System, programming knowledge in .Net, UNIX, even VI has helped me  a lot. Never stop learning and never say no something you don't know. Face the challenge and invest your time and effort, as well as keeping the habit to learn something new.  All those inputs will bring great results in long run for sure.

My Apple development has no progress at all in 2011; however, I did spend time to finish all the WWDC videos.  The reason I don't have time on iOS app development is that I just don't have time.  I have changed my focus in another none-programming area and put a lots of my time and effort on my Chinese blog.  This is another sharing experience and I think it is important for me to do.  In this area, I have set up a solid and great start up.  When I settle down in this area, I'll go back my iOS and Mac app development. Actually, I will find some interesting and great potential topics to work on.

My next year contract will be also full of challenges and new opportunities.  In the past month I have been working on an ASP.Net project based on .Net framework 2.0.  The next version will be on .Net 4.0 with MVC, and Infragistics tools.  I am exited and looking forward to taking the challenge.

However, I think my .Net knowledge and skills are up to the comfort level for me to stay for a while. My next territory will be in Apple's iOS and Mac. I have laid solid foundation.  I'll continue to head in to the new area with passion.

As always, this blog will my sharing land to mature my programming experiences. It'll be very valuable to overview my trace in the feature. Let me leave my deep and clear foot prints. I'm sure it will enjoyable time to read myself.

Read More...

Sunday, July 17, 2011

Finished Watching WWDC 2011 Videos in -Halfway

In the past weeks, I have been in a fast-paced way to watch WWDC 2011 videos. Right now I have finished 100(App Frameworks), and 300(Developer Tools) serials. Still three sections left: 200(Core OS, 13), 400(Graphics, Media and Games, 24), and 500(Internet and Web, 19).

I have also made some nodes in my Chinese blogs about WWDC 2011.

WWDC exposed more detail changes in iOS and Mac OS with new framework and APIs. For example, full screen feature is a very nice thought designed bases on iOS. Windows have full screen since its start, Windows 3.0. However, Mac OS full screen has more support from its core internal. App's will receive many events such as willXXX and didXXX for full screen status. With those events, app developer can prepare UI for better user experience and usage. In terms of OS, the full screen has consistency UI for full screen such as enter, exist and keyboard shortcuts. Full screen apps flow fluently in Mac OS.

Another group of great features are auto-save and versions. Those features are backed by app with Cocoa new APIs. Basically, this is a repository for software source codes, but it has been expanded to Mac OS app. It will be up to app developer to implement the feature. Save and versions are integrate part of Mac OS. As one of Apple software engineering in one session about this topic said, what is if further of Mac OS Cocoa? It may be the long time Quit will be gone. Users will not need to take care apps in Mac OS. Since everything will be auto-saved, why should apps with those features stay in OS when they are not in use? This will greatly enhance the experience of using Mac with great resources releases by inactive apps.

Read More...

Friday, June 17, 2011

Edit Blogger HTML Settings

This is blog is technical detail I did in 2007. I wrote this technique long time ago. It is truth that this is only required to do only once. However, when I create another blogger account, I would like to repeat it again. Now I think it is better to take detail notes of steps so that I may need to reuse it again.

Here is the example I edited HTML for my Chinese blog.

Backup HTML


It is important to backup your Blogger HTML settings before doing any updates. Here is the place to find the HTML settings and make the complete copy of HTML before any updates.



Copy My CSS Settings


The following CSS codes are used by my blog. Insert the CSS definitions into header section. Here I copied it to end of </b:skin>

<b:skin><![CDATA[/*-----------------------------------------------
...
/* David Inserted styles */
/* Use these styles as class ID for a box for some blocks such as div, p */
.outlinebox {
  width: 435px;
  border-width: 1px;        /* sets border width on all sides */
  border-style: solid;
  border-color: #666666;
  padding: 5px
  }

.outlineterminalbox {
  width: 850px;
  border-width: 1px;        /* sets border width on all sides */
  border-style: solid;
  border-color: #C0C0C0;
  font-family:monospace, prestige;
  background-color: #080808;
  color: #FFFF00;
  padding: 5px
  }

.outlinebox4wrappercodes {
  width: 444px;
  border-width: 1px;        /* sets border width on all sides */
  border-style: solid;
  border-color: #666666;
  margin: 0px auto;
  }

.outlineboxterminal4wrappercodes {
  width: 444px;
  border-width: 1px;        /* sets border width on all sides */
  border-style: solid;
  border-color: #080808;
  color: yellow;
  margin: 0px auto;
  }

/* code settings with following 2 outline Withbackclr. Generated in VIM TOhtml cmd */
.Type { color: #60ff60; }
.Comment { color: #80a0ff; }
.Identifier { color: #40ffff; }
.PreProc { color: #ff80ff; }
.Constant { color: #ffa0a0; }
.Statement { color: #fbf204; }
.Special { color: #fb8000; }

.outlinebox4wrappercodesWithbackclr {
  width: 444px;
  border-width: 1px;        /* sets border width on all sides */
  border-style: solid;
  border-color: #666666;
  margin: 0px auto;
  background-color: #000000;
  color: #cccccc;
  }

.outlineboxterminal4wrappercodesWithbackclr {
  width: 444px;
  border-width: 1px;        /* sets border width on all sides */
  border-style: solid;
  border-color: #080808;
  color: yellow;
  margin: 0px auto;
  background-color: #000000;
  color: #cccccc;
  }
 
.wrappercodes {
  width: 435px;
  padding: 5px;
  overflow: auto;
  }
 
.wrappercodesWithHeight {
  width: 435px;
  height: 300px;
  padding: 5px;
  overflow: auto;
  }

.wrappercodesWithHeightNowrap {
  width: 435px;
  height: 300px;
  padding: 5px;
  overflow: auto;
  white-space:nowrap;
  }

.nowrappercodes {
  width: 435px;
  padding: 5px;
  overflow: auto;
  white-space:nowrap;
  }

.nowrappercodesinner {
  width: auto;
  padding: 5px;
  overflow: auto;
  white-space:nowrap;
  }

.nowrappercodesWithHeight {
  width: 435px;
  height: 300px;
  padding: 5px;
  overflow: auto;
  white-space:nowrap;
  }
 
/* code style */
span.kwrd {
  color: rbg(0, 0, 255);
  }

span.defType {
  color: rgb(43, 145, 175);
  }
 
span.errorcode {
  color: rbg(255, 0, 0);
  }
 
span.highlight
{
color: white;
background-color: rgb(0, 100, 200);
}

/* Code Colors copied ccs from http://forums.asp.net/utility/colorcode.css for code colors */
/* Use asp.net forums on-line post to generate codes with these ccs class */

.coloredcode .cmt      { color: #00D502; }
.coloredcode .cmtg      { color: #666; }
.coloredcode .st           { color: #f00; }
.coloredcode .kwdt      { color: #666; }
.coloredcode .kwd      { color: #00f; }
.coloredcode .attr      { color: #f00; }
.coloredcode .attrv      { color: #00f; }
.coloredcode .ec           { color: #00f; }
.coloredcode .tag      { color: #800000; }
.coloredcode .dir    { color: #000; background: #FEFF22; }
.coloredcode .sel    { color: #800000; }
.coloredcode .val    { color: #00f; }
.coloredcode .unit      { color: #800000; }
.coloredcode .sqlcmt { color: #008080; }
.coloredcode .sqlkwd { color: #00f; }
.coloredcode .sqlkwd2 { color: #f0f; }
.coloredcode .sqlkwd3 { color: #999; }
.coloredcode .sqlkwd4 { color: #800000; }
.coloredcode .num      { color: #00f; }
.coloredcode .sqlst  { color: #008000;}
.coloredcode .classInterface { color: #1E90FF;}
.coloredcode b      { font-weight: normal; color: #008080; }
.coloredcode          { font-size: small !important; }
.row-set-descriptor {
  border-bottom: 1px solid #F60;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: #F60;
  clear: left;
  color: #E55C00;
  font-size: 140%;
  margin: 0px 20px 0.5em 0px;
  margin-top: 0px;
  margin-right: 20px;
  margin-bottom: 0.5em;
  margin-left: 0px;
  padding: 1em 0px 0.2em 0em;
  padding-top: 1em;
  padding-right: 0px;
  padding-bottom: 
}

 /* End of Code Colors */
 /* End of David inserted styles */

]] > </b:skin>


Copy Scripts


Immediately after about </b:skin>, add Javascript codes.

<b:skin>
  ...
]] > </b:skin>
<script type='text/javascript'>
function toggleIt(id) {
  var post = document.getElementById(id);
  if (post.style.display != &#39;none&#39;) {
    post.style.display = &#39;none&#39;;
  }
  else {
    post.style.display = &#39;&#39;;
  }
}

function showFullPost(id) {
  var post = document.getElementById(id);
  var spans = post.getElementsByTagName(&#39;span&#39;);
  for (var i = 0; i != spans.length; i++) {
    if (spans[i].id == &quot;fullpost&quot;)
      spans[i].style.display = &#39;inline&#39;;
    if (spans[i].id == &quot;readmore&quot;)
      spans[i].style.display = &#39;none&#39;;
  }
}

function showFull(id) {
  var post = document.getElementById(id);
  var spans = post.getElementsByTagName(&#39;span&#39;);
  for (var i = 0; i != spans.length; i++) {
    if (spans[i].id == &quot;fullpost&quot;)
    spans[i].style.display = &#39;inline&#39;;
    if (spans[i].id == &quot;showlink&quot;)
      spans[i].style.display = &#39;none&#39;;
    if (spans[i].id == &quot;hidelink&quot;)
      spans[i].style.display = &#39;inline&#39;;
  }
}

function hideFull(id) {
  var post = document.getElementById(id);
  var spans = post.getElementsByTagName(&#39;span&#39;);
  for (var i = 0; i != spans.length; i++) {
    if (spans[i].id == &quot;fullpost&quot;)
      spans[i].style.display = &#39;none&#39;;
    if (spans[i].id == &quot;showlink&quot;)
      spans[i].style.display = &#39;inline&#39;;
    if (spans[i].id == &quot;hidelink&quot;)
      spans[i].style.display = &#39;none&#39;;
  }
  post.scrollIntoView(true);
}

function checkFull(id) {
  var post = document.getElementById(id);
  var spans = post.getElementsByTagName(&#39;span&#39;);
  var found = 0;
  for (var i = 0; i != spans.length; i++) {
    if (spans[i].id == &quot;fullpost&quot;)
      found = 1;
    if (spans[i].id == &quot;showlink&quot;)
      if (found == 0)
        spans[i].style.display = &#39;none&#39;;
  }
}
</script>



Insert Script Function Calls in Body Section


MODIFYING BLOG POSTS CODES

First find the line: <div class='post-header-line-1'/>

Insert the following codes after it:

<div class='post-body'>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <p><data:post.body/></p>
    <div style='clear: both;'/>
  <b:else/>
    <style>#fullpost {display:none;}</style>
    <p><data:post.body/></p>
    <span id='showlink'>
      <p>
        <a expr:onclick='&quot;javascript:showFull(\&quot;post-&quot; + data:post.id + &quot;\&quot;);&quot;'
        href='javascript:void(0);'>读详细内容(Read More)...</a>
      </p>
    </span>
    <span id='hidelink' style='display:none'>
      <p>
        <a expr:onclick='&quot;javascript:hideFull(\&quot;post-&quot; + data:post.id + &quot;\&quot;);&quot;'
        href='javascript:void(0);'>Collapse...</a>
      </p>
    </span>
    <script type='text/javascript'>
      checkFull(&quot;post-&quot; + &quot;<data:post.id/>&quot;);
    </script>
  </b:if>
</div>



NOTE: I found there is a duplicate post when the title of the post is clicked. The reason is that there is another div after the above codes:

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
  <data:post.body/>
  <div style='clear: both;'/> <!-- clear for photos floats -->
</div>



delete this section of div to avoid duplications.

NOTE: remove two tags: <div class="post-header"> ... </div> to avoid the content of post content in grey.

CODE FOR THE INCLUDABLE

Find the code: <b:includable id='feedLinksBody' var='links'>
Insert the following codes above it:

<b:includable id='PeekABooPost' var='post'>
  <div class='post uncustomized-post-template'>
    <table><tbody>
      <tr><td>
        <h3 class='post-title'><a expr:href='data:post.url'
        title='View this post only (comments visible).'><data:post.title/></a></h3>
      </td></tr>
      <tr><td>
        <a expr:onclick='&quot;javascript:toggleIt(\&quot;&quot; + data:post.id + &quot;\&quot;);&quot;'
          href='javascript:void(0)'
          style='text-decoration:none'
          title='Expand/collapse this post (comments not visible)'>[+/-] 显示内容(Show/Hide This Post).</a><br/>
        <a expr:href='data:post.url' target='_blank'>
          <i><font size='-2'>See/leave comments for this post in another window/tab.</font></i></a>
      </td></tr>
    </tbody></table>
    <div class='post-body' expr:id='data:post.id' style='display:none'>
       <p><data:post.body/></p>
       <div style='clear: both;'/>
    </div>
  </div>
</b:includable>
<b:includable id='feedLinksBoday' var='links'>



INCLUDE THE INCLUDABLE IN THE POSTS WIDGET

Find the code: <b:includable id='main' var='top'>
In this section find: <b:include data='post' name='post'/>
Change it to:

<b:if cond='data:blog.homepageUrl == data:blog.url'>
  <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:include data='post' name='PeekABooPost'/>
  <b:else/>
    <b:include data='post' name='post'/>
  </b:if>
<b:else/>
  <b:include data='post' name='post'/>
</b:if>



Copy HTML Back to Blogger HTML Settings


After the change, copy the content of HTML from your local file back to blogger HTML settings.

REFERENCE

This feature of shrink and expend bloggs is based on this blog.

Read More...

Sunday, May 08, 2011

Sina Blog

Let me continue to explain the Chinese web services. Today it is about blog. Sina provides a wide range web services. Sina blog is one of the most popular blog services in China. From its blog main page, you will see rich contents. The most interest area in the main page is the rank of bloggers.

For example, the number 1 for the current time is Xu Xiao Ming. He is so hot that his visits and followers will blow you away comparing to most western bloggers:



and Hanhan was the number one for many years. He is the most controversial person in China. He is so popular is mainly for this critics and sharp thoughts about government and current issues. He is still 8th in the rank.

Those top ones have most influence in Chinese, especially in young people. In Chinese followers or fans are called as fensi, which is a new word based on phonetic. It is interesting to see so many new words coming out almost every day. For Chinese absence just one year, they will don't know many new words when they come back. Chinese fensi love to read their their favourite blogs. It is interesting to read a long list of comments. As well, Sina provides a list of statistics about each blog, such reads, comments, forwards (copy to bloggers' blog) and favourites.



Most people just jump to their accounts to write or view blogs. On the top of Sina blog, there are some convenient links or menu items for accessing other sina services, as well as blog settings:



There is a list of menu items for personal information:



Writing blog is also very convenient. The on-line blog has a rich list of formats, photos, and videos, as well other options:





For uploading photos, you can only upload up to 20 photos per blog. Photo and video insert tool icons have other options such as reuse previous ones and web links.

Read More...