My Little Notebook: January 2010

Jan 29, 2010

ဒီတေလာ(၈)

ဒီတေလာ တျခားအေဆာင္ေတြကုိ သြားလည္ပါတယ္။ စာေတာင္သိပ္ မလုပ္ျဖစ္ဘူး ။ခ်စ္သူနဲ႔ စကားေျပာျဖစ္ပါတယ္။ သူ စာေမးပဲြေအာင္တယ္တဲ့။ အေ၀းသင္ ပထမႏွစ္ ေအာင္သြားျပီ။ ေနာက္ႏွစ္ႏွစ္ဆုိရင္ ဘဲြ႔ ရျပီ။ အရမ္းခ်စ္တယ္။

Jan 25, 2010

ဒီဘေလာ့ေလးကေတာ့ ဘေလာ့ေလာကကုိ စ၀င္တုန္းက လုပ္ခဲ့တာေလးပါ။ http://familylover.blogspot.com/ အခုေတာ့လည္း ပစ္ထားခဲ့တာ ၾကာပါျပီ။ ဒီေန႔ စိတ္ကူးရလုိ႔ Template ေျပာင္းလုိက္ပါတယ္။ ၾကည့္ေကာင္းသြားေအာင္၊ အဲဒါနဲ႔ widget ေတြအားလံုးနဲ႔ အရင္က ဘေလာ့မွာရွိတဲ့ javascript file တုိ႔ css ေျပာင္းထားတဲ့ ကုတ္ေတြအားလံုးကုိ notepad နဲ႔ မွတ္ျပီး ေနာက္ Template ကုိ ေျပာင္းလုိက္ပါျပီ။ Blogger Template ကုိ လုိက္ရွာတယ္။ Shine ဆုိတဲ့ Template ကုိၾကိဳက္ျပီး ေဒါင္းပါတယ္။ အဲဒီမွာ XML ဖုိင္ေလးပါလာပါတယ္။ အဲဒါကုိ Layout => Edit HTML => upload ကေနျပီးတင္လုိက္ပါတယ္။

အဲဒီအတုိင္း ျဖစ္သြားပါျပီ။ လွလည္းလွတယ္ ၊ အဲဒီမွာမွ အရင္ notepad နဲ႔ မွတ္ထားတာေတြကုိ ျပန္ျဖည့္လုိက္ပါတယ္။ အရင္တုန္းက မျပီးျပတ္ခဲ့တဲ့ ပုိစ့္ အသစ္တင္ပါတယ္။ ေနာက္ပုိင္းဒီဘေလာ့ကို မွတ္သားစရာေလးေတ ြေရးသားဖုိ႔ထားသြားမယ္ လုိ႔စိတ္ကူးထားပါတယ္။ အခု ဘေလာ့ကုိေတာ့ Computer နဲ႔ ဆုိင္တဲ့ Article ေတြကုိ ေရးသားသြားဖုိ႔ စိတ္ကူးထားပါတယ္။

Jan 24, 2010

How to remove extra blank lines, when you put a Table in blogpost

blog မွာ Table တစ္ခုေရးျပီး တင္ေရာ ျပသနာေပၚတာပါပဲ။ အဲဒီ blog post ေတြနဲ႔ Table နဲ႔က ေတာ္ေတာ္ေလးကုိ ကြာသြားတယ္။ post တင္ေနတုန္းမွာ(Preview မွာေရာ Compose မွာေရာ)ဘာမွမျဖစ္ဘဲနဲ႔ View blog ဆုိျပီး blog ကုိၾကည့္လုိက္ေတာ့မွ Table က သူ႔ေရွ႕ က Text ေတြနဲ႔ ဟုိးေအာက္ဆံုးကုိ ေရာက္ေနတာ ေတြ႔ရတယ္။ Edit Html ကုိၾကည့္ေတာ့လည္း ဘာမွမေပၚဘူး။ ဒါနဲ႔ Googling လုပ္လုိက္ေတာ့ အေျဖကုိ ေတြ႔သြားပါတယ္။
Extra blank line ေတြေပၚလာတာ ဘာျဖစ္လုိ႔လဲဆုိေတာ့ blogger က post ေတြကုိ user တင္လုိက္တဲ့အခါမွာ Enter ေလးေခါက္ထားတဲ့ ေနရာေတြအားလံုးကုိ < br/ > နဲ႔ auto အစားထုိးေပးတဲ့အတြက္ပါ။
အခုလည္း ဒီမွာ

< table>
< tr>
< td> foo</td>
< td> bar</td>
</tr>
</table>

အဲလုိေရးတာနဲ႔ အဲဒီ ေအာက္ကုိဆင္းထားတဲ့ ေနရာေတြအားလံုးကုိ < br/ > နဲ႔ျဖည့္သြားလုိ႔ ေအာက္ကအတုိင္းေပၚမွာပါ။

အဲဒါကုိ ေအာက္ကအတုိင္း Enter မႏွိပ္ဘဲ ေရးျပီး လုပ္ၾကည့္ပါ။ အဆင္ေျပသြားပါလိမ့္မယ္။

< table> < tr>< td> foo</td>< td> bar</td></tr></table>

MORE INFO => http://www.google.com/support/blogger/bin/answer.py?hl=en&answer=41592

LESSON(2) Basic Commands in Linux and Windows

2.1.Introduction and Objectives

ဒီ lesson မွာ window နဲ႔ linux OS ေတြမွာ ရွိတဲ့ commands ေတြနဲ႔ Tools ေတြကုိ ရင္းႏွီးသြားေအာင္ မိတ္ဆက္ေပး သြားမွာပါ။ ဒီ lesson ဆံုးတာနဲ႔ ခင္ဗ်ားဟာ ေအာက္က အရာေတြကုိ သိျပီးျဖစ္သြားမွာပါ။

General Windows and Linux commands
Basic network commands and tools
- ping
- tracert
- netstat
- ipconfig
- route

2.2.System Operation:WINDOWS

Start => Run => type "cmd" => OK
WINDOWS ရဲ့ Commands and tools ေတြကေတာ့ ေအာက္ပါအတုိင္းျဖစ္ပါတယ္။

Commands

date	system ရဲ့ date ကုိျပပါတယ္(သုိ႔)သတ္မွတ္လုိ႔ရပါတယ္။
time	system ရဲ့ time ကုိျပပါတယ္(သုိ႔)သတ္မွတ္လုိ႔ရပါတယ္။
ver	လက္ရွိသံုးေနတဲံ MS-DOS version ကုိျပပါတယ္။
dir	ေပးထားတဲ့ directory(folder)တစ္ခုအတြင္းမွာ ရွိတဲ့ subdirectories(subfolder) (သုိ႔) files ေတြရဲ့ list ကုိျပပါတယ္။
cls	Clear the screen
mkdir,md directory	directory ဆုိတဲ့ နာမည္နဲ႔ folder(directory) အသစ္တစ္ခုဖန္တီးေပးပါတယ္။ ဥပမာ။ md tools
chdir, cd directory	လက္ရွိ folder(directory)နာမည္ကုိ ေဖာ္ျပျခင္း(သုိ႔)"directory" သုိ႔ေျပာင္းလဲေပးပါတယ္။ ဥပမာ။ cd tools
rmdir, rd directory	"directory" ဆုိတဲ့ folder(directory)ကုိဖ်က္ပါတယ္။ ဥပမာ။ rd tools
tree directory	ေပးထားတဲ့ folder structure ကုိ text-graphic format နဲ႔ ျပပါတယ္။ ဥပမာ။ tree c:\tools
chkdsk	Check a disk and show a status report
mem	လက္ရွိအသံုးျပဳေနတဲ့ memory amount နဲ႔ free amount ကိုျပေပးပါတယ္။
rename, ren source dest	file နာမည္ကုိေျပာင္းေပးပါတယ္။ ဥပမာ။ ren oldname newname
copy source dest	Copy one or more files to another location ဥပမာ။ copy c:\tools\myfile.txt c:\temp
move source dest	files မ်ားကုိေရႊ႕ေပးပါတယ္။ ဥပမာ။move c:\tools c:\temp
type file	text file မွာ စာေရးေပးပါတယ္။ဥပမာ။ type c:\tools\myfile.txt
more file	Display the information screen by screen ဥပမာ။ more c:\tools\myfile.txt
delete,del filename	delete one or more files ဥပမာ။ del c:\tools\myfile.txt

Tools

ping host	Ping command ကေတာ့ ICMP(Internet Control Message Protocol) ေလးကုိ အသံုးျပဳျပီး “packets” ေလးေတြကုိ "host" ဆုိတဲ့ကြန္ျပဴတာကုိ ပုိ႔လႊတ္တာျဖစ္ပါတယ္။ အဲဒီလုိနဲ႔ ဒီ command က လက္ရွိကြန္ျပဴတာဟာ သူတည္ရွိေနတဲ့ network ထဲမွာ accessible ျဖစ္မျဖစ္ကုိ စမ္းသပ္ေပးပါတယ္။ ထပ္မံျပီး ဒီ command ဟာ အဲဒီ answered packets ေတြအားလံုးရဲ့ summary နဲ႔ response time ေတြကိုပါ တပါတည္း ေဖာ္ျပေပးပါတယ္။ host ဆုိတဲ့ စာသားေနရာမွာ IP address ဒါမွမဟုတ္ စက္နာမည္ကုိ ေရးေပးရပါမယ္။ ဥပမာ။ ping www.google.com Ping 193.146.85.2 ဒီ command ရဲ့ တျခား options ေလးေတြကေတာ့ -n N: send N packets -t :သတ္မွတ္ထားတဲ့ host တစ္ခုကုိ မရပ္ခုိင္း မခ်င္း ping ေနပါတယ္။
tracert host	Tracert host ဒီ command ကေတာ့ “host” ဆီကုိ ေရာက္သြားဖုိ႔ အတြက္ လႊတ္လုိက္တဲ့ packet ေလးရဲ့ လမ္းေၾကာင္းကုိ ေဖာ္ျပပါတယ္။ command “tracert” ဟာ Trace route ရဲ့ အတုိေကာက္ျဖစ္ျပီး user ရဲ့ လက္ရွိ computer ကေနျပီးေတာ့ သတ္မွတ္ေပးလုိက္တဲ့ “host” ဆုိတဲ့ေနရာကုိ ေရာက္ေအာင္သြားတဲ့ လမ္းေၾကာင္းကုိ ျပေပးပါတယ္။ေနာက္ျပီး အဲဒီ packet ေလးသြားတဲ့ လမ္းတေလ်ာက္ၾကာခ်ိန္ကုိလည္း ေဖာ္ျပေပးပါတယ္။ တခါတရံမွာ အဲဒီ လမ္းေၾကာင္းတေလ်ာက္မွာ ရွိတဲ့ စက္မ်ားရဲ့ အမည္မ်ားက စိတ္၀င္စားဖုိ႔ေကာင္းပါတယ္။ ဥပမာ။ tracert www.google.com Tracert 193.146.85.2 ဒီ command ရဲ့ တျခား option ေလးေတြကေတာ့ -h N: အမ်ားဆံုး ျဖတ္သြားရမယ့္ အေရအတြက္ N -d : machines နာမည္ကုိ မေဖာ္ျပရန္။
ipconfig	Ipconfig ဒီ command ကေတာ့ လက္ရွိ computer မွာ သံုးေနတဲ့ active interfaces(Ethernet,ppp,etc) ရဲ့ information ကုိ ေဖာ္ျပေပးပါတယ္။ ဒီ command ရဲ့ တျခား option ေလးေတြကေတာ့ /all : အားလံုးကို details ျပပါ။ /renew name: automatic configuration with DHCP ကုိ အသံုးျပဳျပီး “name” ဆုိတဲ့ ကြန္နက္ရွင္းကုိ ျပန္ဆက္သြယ္ပါတယ္။ /release name : automatic configuration with DHCP ကုိသံုးထားတဲ့ connection အားလံုးကုိ deactivates လုပ္ပါတယ္။
route print	Routing table ကုိ ေဖာ္ျပေပးပါတယ္။ command “route” ဟာ routes ေတြကုိသတ္မွတ္ေပးတယ္။ routes ေတြကုိဖ်က္ေပးတယ္။ ဒါမွမဟုတ္ route ေတြရဲ့ အေျခအေနကုိ ေဖာ္ျပေပးတယ္။သူ႔ရဲ့ တျခား option ေလးေတြကေတာ့ Print : to show the list of routes Delete : to delete a route Add : to add a route
netstat	Remote machines နဲ႔ သက္ဆုိင္တဲ့ connection ေတြ၊ network status ေတြရဲ့ information ေတြကုိ ေဖာ္ျပေပးပါတယ္။ သက္ဆုိင္တဲ့ တျခား option ေလးေတြကေတာ့ -a : To sample all the connections and listening ports -n : To display addresses and port number in numeric form -e : To sample Ethernet statistics ဥပမာ။ netstat -an

2.3.System Operation: Linux

ဒီအေၾကာင္းကုိေတာ့ သိပ္မသိလုိ႔ မေရးေတာ့ပါဘူး။ အဂၤလိပ္လုိပဲ တင္ေပးလုိက္ပါတယ္။
Just as in Windows, if you are using Linux, a great majority of the commands that you will use are executed from a console emulation window. Therefore, we will next learn how to open a console window in Linux.
2.3.1 How to open a console window
To issue the following commands, it is necessary to open a console window:
1 - To go to the START APPLICATION button
2 - Select “Run Command”
3 - Enter “konsole”
4 - A window similar to the following one will appear:
5 - Now the commands and tools listed below can be entered.

Commands

pwd	Display the name of the current directory
hostname	Display the name of the local host (the computer which you are currently using)
finger user	Display information on the user “user” Example: finger root
ls	List the content of the directories Example: ls -la
cd directory	Change from current directory to “directory”. If no directory name is specified it changes to the home directory, Example: For the login name “mylogin” the command $cd changes the directory to /home/mylogin Example: $cd - changes to the last visited directory Example: $cd /tmp changes to the “tmp” directory
cp source dest	Copy files. Copy the file “source” to the file “dest”. Example: cp /etc/passwd /tmp
rm file	Delete files. Only the owner of the file (or root) can delete it. Example: rm myfile
mv source dest	Move or rename files and directories. Example: mv oldname newname
mkdir directory	Make a directory with the name “directory”. Example: mkdir tools
rmdir directory	Delete the directory with the name “directory” if it is empty. Example: rmdir tools
find / -name file	Find a file with the name “file” beginning the search in the root directory Example: find / -name myfile
echo string	Write the string “string” in the standard output Example: echo hello
command > file	Redirect the normal screen output of the command “command” to the file “file” Example: ls > myls
command >> file	Redirect the normal screen output of the command “command” to the file “file”. If the file already exists, it appends the output to the end of the file. Example: ls >> myls
man command	Show the pages of the online manual about “command” Example: man ls

Note: The words in italics are not commands and must be replaced by the desired values.
For additional information on the use of these commands and tools, type in "command -help" or "man command" in the console window.
For example, for additional information on the “ls” command, type in either of these two possibilities:
1) ls –-help
2) man ls

Tools(Please see the Windows section for details on these tools.)

ping host	Verify the contact with the machine “host” Example: ping www.google.com
traceroute host	Show the route that the packets follow to reach the machine “host”. Example: tracert www.google.com
ifconfig	Display information on the active interfaces (ethernet, ppp, etc.)
route	Display the routing table
netstat	Display information on the status of the network Example: netstat -an

2.4.Exercises in Windows

2.5.1 Exercises in Windows
1. Go to a MS-DOS window.
2. Identify the version of MS-DOS that you are using. What version have you detected? What
command have you used?.
3. Identify the date and time of the system. If they are incorrect, modify them so that they are
correct. What command have you used?
4. Identify all the directories and files that are in “c:\”. What command have you used?
5. Create the directory c:\hhs\lesson0. Copy in this directory all the files with the extension
“.sys” that are in “c:\”. What files have you found? What commands have you used?
6. Identify the IP address of your host. What command have you used? What IP address do
you have?
7. Trace the route to “www.google.com”. Identify IPs of the intermediate routers.

Jan 23, 2010

Integrated Windows authentication Problem in ASP.Net

VS 2008 နဲ႔ web application တစ္ခု ကုိ IIS မွာ host ျပီးေတာ့ File system ကုိ (HTTP) နဲ႔ ေဆာက္ပါတယ္။ Hello world ေလးပါပဲ။ ေရးျပီးေတာ့ Run တဲ့အခါမွာ ေအာက္ကျပထားတဲ့ error တက္ပါေတာ့တယ္။

Unable to start debugging on the web server. Debugging failed because integrated Windows authentication is not enabled. Please see Help for assistance. ဆုိျပီး ေဖာ္ျပပါတယ္။ ဒီ error က IIS မွာ host တဲ့ web page ေတြပဲ ျဖစ္တာပါ။ MSVS 2008 နဲ႔ ရုိးရိုးပဲ ေရးတဲ့ (projects folder အတြင္းမွာပဲ host တဲ့) web page ေတြဆုိ မလုိပါဘူး။ အဲဒီအတြက္ Integrated Windows authentication ကုိ ON ေပးရပါမယ္။ IIS ကုိသြားျပီး လုိအပ္တဲ့ aspx file ကုိ right click ပါ။ ျပီးရင္ေအာက္ကအဆင့္အတုိင္းလုပ္သြားရင္ ရပါျပီ။

Directory Security က Edit ကုိ click ပါ။

ေအာက္ဆံုးက Integrated Window Authentication ကုိ checked လုပ္ျပီး OK ရင္ရပါျပီ။

Blogger menu ကုိ Lava Lamp တင္ျခင္း

Lava lamp အေၾကာင္းကုိ အရင္ post မွာ ရွင္းျပီးပါျပီ။ အခု အဲဒီ menu bar ကုိ ဘေလာ့မွာ တင္မွာ ျဖစ္ပါတယ္။ ဒီမွာ အဓိက က(၃)ပုိင္းရွိပါတယ္။ CSS coding ပုိင္းရယ္။ javascript ေၾကညာတဲ့အပုိင္းရယ္၊ body မွာ menu link ေတြထည့္တဲ့အပုိင္းရယ္ပါ။ ေအာက္မွာတဆင့္ခ်င္း ရွင္းသြားပါမယ္။ အရင္ဆံုး lavalamp နမူနာကုိ ေဒါင္းပါ။ ျပီးရင္အဲဒီမွာပါတဲ့ jquery-1.1.3.1.min.js ရယ္၊ jquery.easing.min.js ရယ္၊ jquery.lavalamp.min.js ရယ္ကုိ upload တင္ထားေပးပါ။ ျပီးရင္ demo.html မွာလည္း ခုနက upload တင္ထားတဲ့ javascript ဖုိင္ေတြရ့ဲ link ကုိ အစားထုိးပါမယ္။ ဒီလုိျဖစ္သြားပါမယ္ ။

ျပီးရင္ အဲဒီ html ဖုိင္ထဲက link ေတြျဖည့္ထားတဲ့ javascript ကုတ္ေတြအားလံုးကုိ < /head > ရဲ့ ေရွ႔မွာ ကပ္ထည့္ပါမယ္။

ျပီးရင္ CSS file မွာ lavaLampNoImage နဲ႔ ဆုိင္တဲ့ css code ေတြကုိပဲ ခ်န္ထားပါ။ က်န္တာကုိ delete လုပ္ပါ။ (ရွင္းသြားေအာင္ပါ) ျပီးရင္ အဲဒီမွာ color background စတာေတြ ကုိယ့္ဘေလာ့နဲ႔ လုိက္ေအာင္ျပင္ပါ။ width ကုိလည္း ျပင္ပါ။ အားလံုးျပီးရင္ Blogger ကုိ၀င္ပါမယ္။ လုပ္ထားတဲ့ lavalamp_test.css ထဲက ကုတ္ေတြကုိ ေအာက္က အတုိင္း < /head > ရဲ့ေရွ႕ < /b:skin > TA[ ရဲ့ အတြင္း css ကုတ္ေတြထည့္တဲ့ ေနရာမွာ ထည့္ပါမယ္ ။

ေနာက္ menu link ေတြထည့္တဲ့အပုိင္းကေတာ့...

< ul class="lavaLampNoImage" id="2"> < li>< a href="#"> Home</a></li> < li>< a href="#"> Plant a tree</a></li> < li>< a href="#"> Travel</a></li> < li>< a href="#"> Ride an elephant</a></li></ul>

ဒီကုတ္ေတြမွာ လင့္ေတြကေတာ့ ၾကိဳက္သလုိေျပာင္းႏုိင္ပါတယ္။ ေနာက္ျပီး နာမည္ေတြကုိ လည္းေျပာင္းႏုိင္ပါတယ္။ ထည့္ရမယ့္ေနရာ ကေတာ့ < div id='header' > နဲ႔ < /div > တုိ႔ကုိ ရွာပါ။ ျပီးရင္ အဲဒီေနာက္က ကပ္ထည့္လုိက္ရင္ ရပါျပီ။ ဒီဘေလာ့မွာေတာ့ Template နဲ႔ မကုိက္လုိ႔ မတပ္ေတာ့ပါဘူး။

Jan 20, 2010

Get a FREE Domain Name - www.YOU.co.nr !!!

Today I change my web address (blogspot.com) to (co.nr) so that visitors from Myanmar can visit to my blog. You can visit to my page either http://any1cantfind.blogspot.com/ or http://www.tutorialdotnet.co.nr/ .Setting domain name from http://www.freedomain.co.nr/ is so easy and fast. Only a little minute you can get a domain name. But you must already have a website or a blog . You can get domain name by the following steps .

အေပၚကပံုမွာ ျမွားျပထားတဲ့ေနရာမွာ အခုလက္ရွိသံုးေနတဲ့ blog or website ရဲ့ လင့္ကုိထည့္ေပးပါ။ ဒါေတြျပီးရင္ ကုိယ့္ေမးထဲကုိ password နဲ႔ ကုတ္ေတြပါတဲ့ စာပုိ႔လုိက္ပါမယ္။ အဲဒါနဲ႔ ၀င္ျပီး activate လုပ္လုိက္ရင္ ရပါျပီ။ ဒါဆုိရင္ ခုနက လက္ရွိသံုးေနတဲ့ website လိပ္စာအတုိင္းလဲ ၀င္ႏုိင္သလုိ . အခုလုိ co.nr နဲ႔ ဆံုးတဲ့ လိပ္စာအတုိင္းလည္း ၀င္လုိ႔ရသြားပါျပီ။ သူ႔ feature က FREE ပါ။

Jan 19, 2010

Animated Recent posts widget for blogger

ဒီေန႔ေတာ့ ႏုိင္ငံေရး website ေတြကုိ ၀င္ျဖစ္ပါတယ္။ http://www.dawnmanhon.com မွာ ဟုိဖတ္ဒီဖတ္ရင္းနဲ႔ အရမ္းလွတဲ့ widget ေလးကုိေတြ႔ျပီး စိတ္၀င္စားသြားပါတယ္။ အဲဒါနဲ႔ View source ကေနျပီးေတာ့ ကုတ္ေတြကုိ လုိက္ရွာတဲ့ အခါမွာ ေအာက္က ပံုအတုိင္းကုတ္ေလးကုိ ေတြ႔ပါတယ္။ Googling လုပ္လုိက္ေတာ့ Animated Recent posts widget လုိ႔ေခၚမွန္း သိရပါတယ္။ http://ehlar22.multiply.com/journal/item/596/Recent_posts_with_thumbnails_and_Simple_Spyကုိအဲလာ ရဲ့ site မွာလည္း ဒီအေၾကာင္းကုိ ေရးထားတာ ရွိပါတယ္။ အရမ္းကုိ လြယ္ပါတယ္။ ကုတ္ေတြကုိ copy ယူ၊ address ေတြ change ျပီး blog ရဲ႕ sidebar widget မွာ javascript အေနနဲ႔ ထည့္လုိက္ရင္ ရပါျပီ။

< script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
< style type="text/css" media="screen">

</style>

< script language='JavaScript'>
imgr = new Array();

imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;

boxwidth = 255;

cellspacing = 6;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 70;

thumbheight = 70;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = true;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 10;

home_page = "http://www.successseo.blogspot.com/";

limitspy=4
intervalspy=4000

</script>

< div id="spylist">
< script src='http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/recentpostthumbspy-min.js' type='text/javascript'></script>
</div>

javascript file ကုိ ဒီမွာ ေဒါင္းပါ။
No image ပံုေလးကုိ ဒီမွာ ေဒါင္းပါ။
MORE INFO => http://successseo.blogspot.com/2009/11/animated-recent-posts-widget-for.html

Jan 18, 2010

ASP.Net ~ Login Logout Control (with cookies)

ဒီ tutorial ကေတာ့ ASP.net မွာ login နဲ႔ logout တုိ႔ကုိ http cookie အသံုးျပဳျပီး လုပ္သြားတာျဖစ္ပါတယ္။ သေဘာတရားကေတာ့ user login လုပ္တဲ့ အခ်ိန္မွာ username password မွန္တာနဲ႔ cookie တစ္ခုကုိ ဖန္တီးပါမယ္။ webpage ေတြကိုလည္း load တဲ့ အခ်ိန္မွာ cookie ကုိ စစ္ဖုိ႔ ေၾကညာထားပါမယ္။ ျပီးရင္ user ကုိ server ကေန အဲဒီ cookie ေလးကုိၾကည့္ျပီး user ရဲ့ login status ကုိ check ေနပါမယ္။ user ကေန logout ကိုႏွိပ္လုိက္ရင္ေတာ့ အဲဒီ cookie ေလးကုိ ဖ်က္ပစ္ပါမယ္။ ဒါဆုိရင္ user ဟာ တစ္ခ်ိဳ႕ webpage ေတြကုိ ၾကည့္ခြင့္မရွိေတာ့ပါဘူး။ အဲဒါေတြကုိ ၾကည့္ဖုိ႔ login ျပန္လုပ္ရပါေတာ့မယ္။
1.Creating Login Page
step(1) aspx page တစ္ခု ဖန္တီးပါ။ login.aspx လုိ႔ နာမည္ေပးပါ။
step(2) textbox (၂) ခု . button (၁) ခု ထည့္သြင္းပါ။ textbox1 ကုိ username ျဖည့္ဖုိ႔အတြက္ထားျပီး textbox2 ကုိေတာ့ password ျဖည့္ဖုိ႔ထားေပးပါမယ္။
step(3)

(To be continue)

you can download tutorial e-book here

Jan 17, 2010

ဒီတေလာ(၇)

ကြန္နက္ရွင္မေကာင္း၊ အနည္းငယ္ ဘီးဇီး၊ ရုပ္ရွင္ ၾကည့္၊ ေက်ာင္းပိတ္ရက္ အနားယူ၊ ၇ ရက္မွျပန္တက္ရမယ္။
ေနာက္ေန႔မွ ပုိစ့္အသစ္တင္ပါဦးမယ္။ :P

Jan 12, 2010

Rollover buttons & icons with CSS(3)

Button icon behaviour

အခုဆက္ျပီးေတာ့ အဲဒီ button ရဲ႕ text ကုိ icon ဆုိတဲ့ class နဲ႔ တဲြျပီး ထည့္ပါမယ္။ ဒီ icon class ကုိ icon ပံုေလး ေပါင္းထည့္ဖုိ႔ရယ္ သူ႕ behavior ေတြထည့္ဖုိ႔ သံုးပါမယ္။ button background ကုိလုိက္ျပီးေတာ့ icon ရဲ႕ အေရာင္ကလည္း (၃)မ်ိဳး ေျပာင္းသြားပါမယ္။ icon ကုိ OK ရဲ႕ ဘယ္ဘက္မွာထည့္ပါမယ္။

.icon {
background-repeat: no-repeat;
padding: 0 0 5px 18px;
}

Background image ကုိေနာက္မွာ ထပ္ေၾကညာပါမယ္။ အခု no-repeat ဆုိတာေလးပဲေၾကညာထားမယ္။ padding ကုိ အေပၚနဲ႔ညာဘက္ ကုိ ‘0’ ထားပါမယ္။ ေအာက္ကုိ ‘5’ ထားပါမယ္။ ဘယ္ဘက္ကုိ ‘18’ ထားပါမယ္။ ‘18’ ကုိေတာ့ icon အတြက္ေနရာခ်န္ထားတာျဖစ္ပါတယ္။ icon က (16*84) ရွိပါတယ္။

a.button:hover .icon, a.button:active .icon {
background-position: 0 -28px;
}
a.buttonDis:link .icon, a.buttonDis:visited .icon, a.buttonDis:hover .icon, a.buttonDis:active .icon {
background-position: 0 -56px;
}

Rollover effect ဟာ same background image positioning technique ကုိ button ရဲ႕ background ေျပာင္းဖုိ႔သံုးသြားတာျဖစ္ပါတယ္.။ (icon ေလးဟာ a:hover a:active အဆင့္ေတြမွာ 28 pixel position ေျပာင္းသြားျပီး orange icon ျဖစ္သြားပါမယ္။ disabled button ရဲ႕ icon ကေတာ့ 56 pixel position မွာရွိတဲ့ background ကုိပဲ သံုးပါမယ္။
**********************************************************
An icon for each button

ျပီးခဲ့တဲ့ အဆင့္ေတြမွာ button ရဲ့ state ေတြကုိလုိက္ျပီးေတာ့ ေနရာေျပာင္းသြားတာကုိ ေၾကညာခဲ့ပါတယ္။ အခုဒီမွာေတာ့ button ေတြမွာ အသံုးျပဳမယ့္ icon file ေတြကုိ ေၾကညာပါမယ္။ သံုုးမ်ိဳးရွိပါတယ္။ OK button,Cancel button and import button အတြက္ပါ။

#buttonOK .icon {
background-image: url(ok.gif);
}
#buttonCancel .icon {
background-image: url(cancel.gif);
}
#buttonImport .icon {
background-image: url(import.gif);
}

Tutorial file ကုိ ဒီ မွာ ေဒါင္းပါ။
MORE INFO => http://sophie-g.net/jobs/css/e_buttons.htm

Hosting on code.google.com for hotlinks

ဟုိးအရင္ေန႔ေတြ ကတည္းက ရွာေနတာ hotlink လုိမ်ိဴး hosting site ကုိ ပံုေလးေတြ javascript ကုတ္ေလးေတြ။ CSS file ေလးေတြ upload တင္ျပီး blog မွာ သံုးမလုိ႔ ။ အခုေတာ့ ေတြ႕ျပီ ။ GOOGLE CODE တဲ့။ ဟုိေန႔က သံုးတဲ့ SITE.GOOGLE ကေတာ့ upload ရပါတယ္။ ဒါေပမယ့္ download ခ်လုိ႔ပဲ ရတယ္။ link အေနနဲ႔ ယူသံုးလုိ႔ မရဘူး။ အခု GOOGLE CODE ကေတာ့ storage space 2048 MB ေပးပါတယ္။ သံုးရတာလဲလြယ္တယ္။ ေအာက္မွာ အဆင့္ဆင့္ျပထားပါတယ္။ Google new product ကုိ သြားျပီးေတာ့ Code ဆုိတာကုိ ေရြးပါ။

ျပီးရင္ Product hosting ကုိ ေရြးပါ။

အဲဒီမွာ Contributing open source code ထဲက Go to the Create Project ကေနျပီး create project လုပ္ပါမယ္။

အဲဒီမွာ Contribute open source ကေနျပီးေတာ့ နာမည္ေတြကုိ ျဖည့္ျပီး create လုပ္ပါမယ္။ ပံုကိုၾကည့့္ပါ။

အားလံုးျပီးျပီဆုိရင္ေတာ့ google code ကေန ျပီး project ေပးပါလိမ့္မယ္။ အဲဒီထဲမွာ ၾကိဳက္ရာကုိ upload တင္ႏုိင္ပါတယ္။ တင္ဖုိ႔အတြက္ Downloads ကေနျပီး New download ကုိ ေရြးပါ။ upload တင္္ျပီး အသံုးျပဳလုိ႔ ရပါျပီ။ အမွန္ကေတာ့ google ကေနျပီး programmer ေတြအတြက္ ေပးထားတာပါ။ :P အဲဒီမွာ ပံုေတြလည္းတင္လုိ႔ရပါတယ္။

Jan 10, 2010

Automatic Thumbnail and Readmore Function

အခုလက္ရွိလုပ္ထားတာေလးပါ။ Blog မွာ ပုိစ့္ အႏွစ္ခ်ဳပ္ေလး နဲ႔ Photo thumbnail ေလးကုိ main page မွာ ျပေအာင္လုပ္တာေလးပါ။ဘာေကာင္းသလဲဆုိေတာ့ visitor အေနနဲ႔ ပုိစ့္ေတြရဲ့ အႏွစ္ခ်ဳပ္ကုိ scroll bar နဲနဲေရႊ႔ ရံုနဲ႔ ခ်ံဳၾကည့္လုိ႔ရပါတယ္။ စိတ္၀င္စားလုိ႔ ထပ္ဖတ္ခ်င္ေတာ့မွ Read more ကုိႏိွပ္ရံုပါပဲ။

javascript နဲဲ႔ လုပ္ထားတာေလးပါ။ ရုိးရွင္းျပီး လုပ္ရလြယ္ပါတယ္။ အခုမွ ဘေလာ့လုပ္သူေတြ အတြက္ကေတာ့ Read More ဆုိတာရွင္းျပပါမယ္။ Blog မွာ ရွည္လြန္းတဲ့ post ေတြတင္တဲ့ အခါ အဲဒီ post တစ္ခုတည္းနဲ႔တင္ ဘေလာ့ၾကီး ကအရွည္ၾကီး ျဖစ္ေနမွာ စုိးလုိ႔ အေပၚပုိင္းေလးကုိပဲ ေဖာ္ျပျပီး က်န္အပုိင္းေတြကုိ visitor က Read more ဆုိတာေလး ကုိ ႏွိပ္မွ ေပၚေအာင္လုပ္ထားတာပါ။
လုပ္နည္းကေတာ့..
၁။Layout ==> Edit HTML ==> မွာ Expand Widget Templates ကုိ အမွန္ျခစ္ပါ။
၂။ေအာက္ကကုတ္ေလးကုိ ကူးျပီး < /head > ရဲ႕ ေအာက္မွာ ထည့္ပါ။

< script type='text/javascript' >
var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
< /script >
< script src='http://cebong.ipit.googlepages.com/read-moreotomatis.js' type='text/javascript'/ >

Note :

You can cutomize this size
summary_noimg = 430; is post cut height without image
summary_img = 340; is post cut height with image
img_thumb_height = 100; is thumbnail image height
img_thumb_width = 120; is thumbnail image width

ျပီးရင္ < data:post.body/ > ကုိရွာပါ။ အဲဒီကုတ္ေနရာမွာ ေအာက္ပါနဲ႔ အစားထုိးလုိက္ပါ။ အေပၚက လင့္ေနရာမွာ ဒီ ဖုိင္ေလးကုိ ေဒါင္ျပီး upload တင္ထားတဲ့ လင့္ေနရာကုိ ထည့္ပါ။

< b:if cond='data:blog.pageType != "item"' >

< div expr:id='"summary" + data:post.id' > < data:post.body/ > < /div >
< script type='text/javascript' > createSummaryAndThumb("summary < data:post.id/ > "); < /script >
< span class='rmlink' style='float:right;padding-top:20px;' > < a expr:href='data:post.url' > read more “ < data:post.title/ > ” < /a > < /span >

< /b:if >
< b:if cond='data:blog.pageType == "item"' > < data:post.body/ > < /b:if >

သတိ။ ကုတ္ေတြကူးရာမွာ < ေတြနဲ႔ ကုတ္ေတြနဲ႔ မွာ space မျခားပါဘူး။ အားလံုးကပ္ျပီးေရးရပါမယ္။
MORE INFO ===> http://www.ipietoon.com/2009/03/automatic-thumbnail-and-readmore.html

My Brute လက္ရွိ အေျခအေန

Jan 8, 2010

LavaLamp for jQuery lovers

ဒီေန႔ http://www.barcampyangon.org/ ကုိ ၀င္ၾကည့္ျဖစ္ပါတယ္။ Myanmar-Info Tech 2010,January 23rd-24th 9am to 5pm မွာ က်င္းပမယ့္ နည္းပညာဆုိင္ရာ ေဆြးေႏြးပဲြေလးပါ။ အဲဒီမွာ ၾကည့္ရင္းနဲ႔ အေပၚက menu bar ေလးက အရမ္းကုိလွတာေတြ႔ ရပါတယ္။ menu bar မွာ mouse hover ျဖစ္တဲ့ေနရာကုိ background image ေလးက ဘယ္ဘက္ထိပ္ကေနျပီး ေရြ႕လာတာျဖစ္ပါတယ္။

flash နဲ႔ လုပ္ထားတာ ျဖစ္မယ္ဆုိျပီးေတာ့ ကုတ္ေတြကုိ လုိက္ရွာၾကည့္တဲ့ အခါမွာ သူက javascript နဲ႔ jQuary ကုိ အသံုးျပဳျပီး ေရးထားတာ ေတြ႔ရပါတယ္္။ အဲဒီမွာ လာျပီ jQuary ????

What is jQuery?
jQuery is a new kind of JavaScript Library.
jQuery is great library for developing ajax based application. jQuery is great library for the JavaScript programmers, which simplifies the development of web 2.0 applications. You can use jQuery to develop cool web 2.0 applications. jQuery helps the programmers to keep code simple and concise. The jQuery library is designed to keep the things very simple and reusable.
jQuary ဆုိတာ javascript အတြက္ အသင့္ေရးထားတယ့္ Library file ေတြပါ။ website ေတြမွာ javascript code ေတြကုိ နည္းနည္းနဲ႔ effect ေကာင္းေကာင္း ေရးႏုိင္ဖုိ႔ အတြက္လုပ္ထားတာပါ။ jQuary နဲ႔ ေရးထားတယ့္ website ေတြမွာ ကုတ္ေတြက နည္းနည္းေလးပဲပါတာေတြ႕ ရပါတယ္။ jQuary အေၾကာင္းကုိ http://jquery.com/ မွာ ေလ့လာႏုိင္ပါတယ္။ အခုေတာ့ ဒီ LavaLamp အေၾကာင္းပဲ ဆက္ပါဦးမယ္။

LavaLamp
ဒီ jQuary ကုတ္ေလးက ၇၀၀ ဘုိက္ပဲ ရွိပါတယ္။ ေရးသားသူကေတာ့ Guillermo Rauch ပါ။ LavaLamp လုိ႔ အမည္ေပးသူကေတာ့ Stephan Beal ပါ။ User Interface developers ေတြအေနနဲ႔ သိရမွာက website visitors ေတြ အေနနဲ႔ ပထမဆံုး အသံုးျပဳတဲ့ widget က MENU BAR ပါ။ menu bar ကုိ အာရံုစုိက္သြားေအာင္ လုပ္ျခင္းက visitors ေတြကုိ ဆဲြေဆာင္ႏုိင္ပါတယ္။ ပံုမွန္ HTML widget တစ္ခုမွာ (၃) ပုိင္းပါပါတယ္။
* A semantically correct HTML markup
* A CSS to skin the markup
* An unobstrusive javascript that gives it a purpose
အဲဒီ အဆင့္တုိင္းပဲ ေလ့လာသြားပါမယ္။

Step 1: The HTML
User Interface developer အမ်ားစုက Menu တုိ႔ Navbar တုိ႔ ေတြလုပ္ရာမွာ unordered list(ul) ကုိအသံုးျပဳတာ အေကာင္းဆံုးလုိ႔ ေျပာၾကပါတယ္။ အဲလုိပဲ စလုိက္ၾကစုိ႔။ အခုေရးမယ့္ဟာေတြကုိ < body &gy နဲ႔ < /body > ၾကားထဲမွာထည့္ရပါမယ္။ ေနာက္ကေန ဆက္ေရးေပးမယ့္ CSS နဲ႔ javascript link ေတြကုိေတာ့ < head > နဲ႔ < /head > ၾကားမွာ ထည့္ရပါမယ္။

< ul class="lavaLamp" >
< li > < a href="#" > Home < /a > < /li >
< li > < a href="#" > Plant a tree < /a > < /li >
< li > < a href="#" > Travel < /a > < /li >
< li > < a href="#" > Ride an elephant < /a > < /li >
< /ul >

အေပၚမွာ ul ဆုိတာ menu ကုိေဖာ္ျပျပီး li ကေတာ့ menu-item ေတြကုိ ေဖာ္ျပတာပါ။ ဒီကုတ္မွာ menu-item ေတြကုိ ဘာ background မွ မထည့္ထားပါဘူး။ ထည့္ဖုိ႔ရာ ေအာက္ပါအတုိင္း ျပင္ေရးရ ပါလိမ့္မယ္။ # ကေတာ့ link ေတြထည့္ဖုိ႔ပါ။

< li class="back" > < div class="left" > < /div > < /li >

Step 2: The CSS
CSS skin ကုိ ကုိယ့္ဟာကုိယ္ ၾကိဳက္သလုိ ေရးလုိ႔ ရပါတယ္။ အခုဟာက ျဖစ္ႏုိင္တဲ့ တစ္ခု ကုိေရးျပထားတာပါ။ ကုိယ့္ဟာကုိယ္ ထြင္ျပီးေရးၾကည့္ပါ။ CSS ကုိ link နဲ႔ ထုတ္ျပီး သပ္သပ္ထားႏုိင္သလုိ < head > ထဲမွာလည္းေရးႏုိင္ပါတယ္။

/* Styles for the entire LavaLamp menu */
.lavaLamp
{
position: relative;
height: 29px; width: 421px;
background: url("../image/bg.gif") no-repeat top;
padding: 15px; margin: 10px 0;
overflow: hidden;
}
/* Force the list to flow horizontally */
.lavaLamp li
{
float: left;
list-style: none;
}
/* Represents the background of the highlighted menu-item. */
.lavaLamp li.back
{
background: url("../image/lava.gif") no-repeat right -30px;
width: 9px; height: 30px;
z-index: 8;
position: absolute;
}
.lavaLamp li.back .left
{
background: url("../image/lava.gif") no-repeat top left;
height: 30px;
margin-right: 9px;
}
/* Styles for each menu-item. */
.lavaLamp li a
{
position: relative; overflow: hidden;
text-decoration: none;
text-transform: uppercase;
font: bold 14px arial;
color: #fff; outline: none;
text-align: center;
height: 30px; top: 7px;
z-index: 10; letter-spacing: 0;
float: left; display: block;
margin: auto 10px;
}

အရင္ဆံုး ul မွာ background-image ကို bright orange background image ကုိထားလုိက္ပါတယ္။ က်န္တာကေတာ့ menu-item ေတြကုိ ၾကည့္ျပီး height,width,padding,margin ထားလုိက္တာပါပဲ။ relative position ထားပါတယ္။ ဘာလုိ႔လဲဆုိေတာ့ li ရဲ့ background ကုိ ul ထဲမွာ လြတ္လပ္စြာ ေျပာင္းလဲႏုိင္ေအာင္လုိ႔ပါ။
ေနာက္ li ကုိ horizontal ထားပါတယ္။ default က vertical ပါ။ "float:left " က ေျပာင္းလဲေပးပါတယ္။
ေနာက္ li ကုိ highlighted-background ေၾကညာေပးပါတယ္။ hover အတြက္ရယ္၊ သာမန္အေျခအေန အတြက္ရယ္ပါ။
ေနာက္ဆံုးအေနနဲ႔ menu-item တစ္ခုစီအတြက္ click လုိက္ရင္ ျဖစ္မယ့္ font အမ်ိဳးအစား၊ color၊ text-decoration စသည္တုိ႔ေၾကညာပါတယ္။

Step 3: The Javascript
ဒီအပုိင္းကေတာ့ လြယ္သြားပါျပီ။ javascript file ေတြကုိ ေၾကညာတဲ့ အပုိင္းပါ။

< script type="text/javascript" src="path/to/jquery.js" > < /script >
< script type="text/javascript" src="path/to/jquery.lavalamp.js" > < /script >
< !-- Optional -- >
< script type="text/javascript" src="path/to/jquery.easing.js" > < /script >

< script type="text/javascript" >
$(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })});
< /script>

နမူနာ လုပ္ထားတဲ့ဖုိင္မွာ ေအာက္ကကုတ္ေလးကုိ ျပင္ရပါမယ္။ false ျဖစ္ေနတာကုိ true လုိ႔ျပင္ေပးရပါမယ္။

$(function() {
$("#1, #2, #3").lavaLamp({
fx: "backout",
speed: 700,
click: function(event, menuItem) {
return true;
}
});
});

လုိအပ္တဲ့ ဖုိင္ေတြကုိ ေဒါင္းျပီး link ထုတ္ေပးရပါမယ္။ jQuery here, Easing plugin here, and the LavaLamp plugin here.
You have the option to supply an easing “fx” , the “speed” with which the animation happens and a callback to be executed when a menu-item is clicked. They are optional, the default “fx” being “linear” and the default “speed” being “500″ ms.
နမူနာဖုိင္ကုိ ဒီမွာေဒါင္းႏုိင္ပါတယ္။
MORE INFO ==> http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/

How To Add A Related Post Widget in BLOGGER

ဘေလာ့ေတြကုိ လုိက္ၾကည့္ရင္းနဲ႔ Related Post ဆုိတာေလးကုိေတြ႔ပါတယ္။ ကုိယ့္ဘေလာ့ေလးမွာလည္း လုပ္ခ်င္လာတာနဲ႔ ရွာၾကည့္လုိက္တာ ေအာက္က ကုတ္ေလးကုိေတြ႕တာပါပဲ။ ဒီကုတ္ေလးက လက္ရွိဖြင့္လုိက္တဲ့ post ရဲ႕ post label ကုိ ၾကည့္ျပီး သူနဲ႔ တူတဲ့ တျခား post ေတြကုိ ေအာက္မွာ ေဖာ္ျပေပးတာပါပဲ။ ကုတ္ကေတာ့ ကၽြန္ေတာ္ေရးထားတာ မဟုတ္ပါ။ :P ေအာက္မွာ မူရင္းပုိ႔စ္ ကုိေပးထားပါတယ္။ လုပ္နည္းကေတာ့ ..

၁။http://smartboy.googlecode.com/files/related-post.htm မွာကုတ္ေလးကုိ ေဒါင္းပါ။
၂။Layout ကေန Edit HTML ကုိ ၀င္ပါ။
၃။Download Full Template လုပ္ျပီး အေဟာင္းကုိ backup အရင္လုပ္ပါ။
၄။ျပီးရင္ Expand Widget Templates ကုိ အမွတ္ျခစ္ေပးပါ။
၅။ေအာက္က ကုတ္ကုိရွာပါ။

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

၆။လက္ရွိ ေဒါင္းထားတဲ့ ကုတ္ေတြကုိ < data:post.body/ > ရဲ႕ ေအာက္မွာ ကပ္ထည့္ေပးပါ။ ဒါဆုိရင္ျပီးပါျပီ။
အကယ္လုိ႔ အရင္ကတည္းက blog မွာ Read More function ကုိ ထည့္ျပီးသားဆုိရင္ေတာ့ ေအာက္ပါအတုိင္း ကုတ္ကုိ ထည့္ေပးပါ။
MORE INFO ==> http://www.blogspottutorial.com/2008/11/how-to-add-related-post-widget.html

< b:if cond='data:blog.pageType == "item"'>
< style > .fullpost{display:inline;} < /style >
< p > < data:post.body/ > < /p >

< b:else/ >
< style > .fullpost{display:none;} < /style >
< p > < data:post.body/ >
< a expr:href='data:post.url'> < strong > Read more...< /strong > < /a > < /p >
< /b:if >

Downloading the whole picasa web album of other

ဒီေန႔လုပ္ျဖစ္တာေလးပါ။Google ကေန Photo ေတြကုိ လုိက္ၾကည့္ရင္းနဲ႔ blogspot ကေန host လုပ္ျပီးတင္လုိက္တဲ့ blog ေတြမွာ ရွိတဲ့ photo ေတြအားလံုးဟာ Picasa Web Album မွာ အားလံုးရွိေနတာေတြ႔ ရပါတယ္။ အဲမွာ လုိက္ၾကည့္ လုိက္ၾကည့္ ရင္းနဲ႔ လုိခ်င္တာေလးေတြ ေတြ႔လာေတာ့ Album တစ္ခုလံုးကုိ ေဒါင္းခ်င္လာတယ္။ ကုိယ့္စက္မွာ Picasa 3 program ကုိ Run ထားရင္ေတာ့ ေအာက္က ပံုေလးအတုိင္း ႏွိပ္လုိက္တာနဲ႔ Album တစ္ခုလံုးကုိ သူ႔ဟာသူ ခ်ေပးသြားမွာပါ။ အရင္ဆံုး Download to Picasa ဆုိတာကုိ ေရြးရပါမယ္။ ျပီး program ကုိေရြးေပးရပါမယ္။ ဒါဆုိရပါျပီ။

အကယ္လုိ႔ ကိုယ့္စက္ထဲမွာ Picasa 3 မရွိဘဲနဲ႔ Download ခ်ခ်င္တယ္ဆုိရင္ေတာ့ Album ရဲ႕ ေဘးဘက္ sidebar မွာ RSS link ရွိပါတယ္။ အဲဒါေလးကုိ click လုိက္တာနဲ႔ Subscribe Page ၾကီးေပၚလာပါမယ္။ အဲဒီမွာ Right click ျပီး Download all links with IDM ဆုိတာကုိ ေရြးလုိက္ရင္ download က်လာပါျပီ။

ေနာက္တနည္းအေနနဲ႔ IDM(Internet download manager) ရွိရင္လည္း ခ်လုိ႔ရပါတယ္။ ပံုေတြရဲ့ ေဘးဘက္နားမွာ right click လုပ္ျပီးေတာ့ Download all links with IDM ကုိေရြးေပးပါ။ ျပီးရင္ File အမ်ိဳးအစားလုိက္စီျပီး checked ေပးပါ။ ျပီး OK ပါ။ ျပီးရင္ Start Queue ကုိႏွိပ္ျပီး ေဒါင္းလုိ႔ရပါျပီ။

Jan 7, 2010

Rollover buttons & icons with CSS(2)

Button background behaviour & colour
အခု အဲဒီ button ကုိ :link , :visited , :hover , :active states of links စတဲ့ behavior ေတြ ျဖည့္ပါမယ္။

a.button:link, a.button:visited {
color: #002577;
}
a.button:hover, a.button:active {
background-position: 0 -36px;
color: #FF7200;
}

:link နဲ႔ :visited တုိ႔ကုိ အရင္ က click လုပ္ခဲ့ခဲ့၊ မလုပ္ခဲ့ခဲ့ font-color အတူတူပဲလုိ႔ ထားလုိက္ပါမယ္။ အဲဒီမွာ button ရဲ႕ background-position ကုိ မသတ္မွတ္ပါဘူး။ ဒီေတာ့ background-position အေနနဲ႔ default က image ရဲ႕ top-left point ကုိ ယူပါမယ္။ စိတ္၀င္စားဖုိ႕ေကာင္းတာက :hover နဲ႔ :active မွာပါ။ သူ႕မွာ လဲ font-color ကုိ အတူတူပဲ orange ထားပါတယ္။ ဒါေပမယ့္ background-position ကုိ yellow background ေရာက္တဲ့အထိ point ကုိ ေရႊ႕သြားပါတယ္ ။ (x=0,y=-36)
Disabled button လုပ္ဖုိ႔အတြက္ကေတာ့ button state အားလံုးကုိ အတူတူပဲ ထားပါမယ္။background-position ကုိေတာ့ (x=0,y=-72) ထားလုိက္ပါတယ္။ font-color ကုိ gray ထားလုိက္ပါတယ္။

a.buttonDis:link, a.buttonDis:visited, a.buttonDis:hover, a.buttonDis:active {
background-position: 0 -72px;
color: #5F5F5F;
cursor: default;
}

ေအာက္က ကုတ္ကေတာ့ Disabled button အတြက္ ေရးထားတာပါ။ button အတြက္ buttonDis class ကုိ သံုးပါတယ္။ icon အတြက္ကေတာ့ icon class ကုိ သံုးပါတယ္။ ေနာက္ အပုိင္းမွာ icon class အေၾကာင္းကုိ ေျပာသြားပါမယ္။

< a href="javascript:return false;" class="buttonDis" id="buttonImport" title="You can’t use this button" > < span class="icon" > Import < /span > < /a >

Shopping Cart သေဘာတရား

Shopping Carts ဆုိတာကေတာ့ ေစ်း၀ယ္တဲ့ျခင္း ေလးပါပဲ။ သူကေတာ့ Online shop ေတြမွာ ေစ်း၀ယ္တဲ့ အခါ user က ၀ယ္လုိက္တဲ့ ပစၥည္းစာရင္းကုိ temporary မွတ္တဲ့ေနရာမွာ သံုးပါတယ္။ Online shop ေတြကေန user ေတြကုိ purchase မလုပ္ခင္(မ၀ယ္ခင္) အခ်ိန္အထိ အဲဒီပစၥည္းစာရင္းကုိ လုိအပ္သလုိ ေပါင္းထည့္ျခင္း၊ ျပင္ဆင္ျခင္းမ်ား လုပ္ႏုိင္ပါတယ္။ တစ္ခါ ၀ယ္ယူျပီးတာနဲ႔ အဲဒီ Shopping Cart ထဲက ပစၥည္းစာရင္းကုိ ဖ်က္ပစ္လုိက္ပါတယ္။
ေအာက္ကပံုကေတာ့ Shopping Cart အေျခခံကုိ ျပထားတာျဖစ္ပါတယ္။ အဲဒီမွာ ျပထားတာက Online shop ဟာ user တစ္ေယာက္က ေရြးထားတဲ့ ပစၥည္းစာရင္း (Shopping Cart) ကုိ အဲဒီ user ရဲ႕ identification code နဲ႔ အတူ အဲဒီ computer ထဲမွာပဲ cookie အေနနဲ႔ save လုိက္ပါတယ္။ ဒါေၾကာင့္ user ဟာ browser ကုိ ပိတ္ျပီး ထြက္သြားသိတုိင္ ေနာက္တခါ အဲဒီ Online shop ကုိ ျပန္၀င္တဲ့ အခါမွာ Shopping Cart ဟာ မူလအတုိင္းျပန္ရိွ ေနမွာ ျဖစ္ပါတယ္။

MORE INFO ==> http://www.emarketingdictionary.com/Internet_Marketing_dictionary_Shopping_Cart_definition.html

Storing multiple languages in MSSQL server 2005

အခုေလးတင္မွ စဥ္းစားမိတာေလးပါ။ ခ်က္ခ်င္းအေျဖကုိ ရွာလုိက္ေတာ့ေတြ႕တယ္။ Microsoft SQL server 2005 မွာ ရုရွား text ေတြ save လုိ႔ ရ မရ ပါ။ အေျဖက ရပါတယ္။ unicode Datatype ကုိအသံုးျပဳျပီး သိမ္းရမွာ ျဖစ္ပါတယ္။ ပုံမွာၾကည့္ပါ။ ပံုမွန္သိမ္းေနၾက varchar ကုိ nvarchar အစားထုိးလုိက္ရမွာ ျဖစ္ပါတယ္။

The difference is that nvarchar is used to store unicode data, which is used to store multilingual data in your database tables. Other languages have an extended set of character codes that need to be saved and this datatype allows for this extension. If your database will not be storing multilingual data you should use the varchar datatype instead. The reason for this is that nvarchar takes twice as much space as varchar, this is because of the need to store the extended character codes for other languages

Differences between varchar and nvarchar in SQL Server
By Serdar Yegulalp
Rating: -4.34- (out of 5)

The broad range of data types in SQL Server can sometimes throw people through a loop, especially when the data types seem to be highly interchangeable. Two in particular that constantly spark questions are VARCHAR and NVARCHAR: what's the difference between the two, and how important is the difference?

VARCHAR is an abbreviation for variable-length character string. It's a string of text characters that can be as large as the page size for the database table holding the column in question. The size for a table page is 8,196 bytes, and no one row in a table can be more than 8,060 characters. This in turn limits the maximum size of a VARCHAR to 8,000 bytes.

The "N" in NVARCHAR means uNicode. Essentially, NVARCHAR is nothing more than a VARCHAR that supports two-byte characters. The most common use for this sort of thing is to store character data that is a mixture of English and non-English symbols — in my case, English and Japanese.
MORE INFO ==> http://www.dotnetspider.com/forum/33336-Difference-Between-varchar-nvarchar.aspx and http://searchsqlserver.techtarget.com/tip/0,289483,sid87_gci1266201,00.html

Jan 5, 2010

Rollover buttons & icons with CSS(1)

ဒီ tutorial ကေတာ့ CSS နဲ႔ Button ေလးတစ္ခုကုိလုပ္တာပါပဲ။ button မွာ background image, icon and label ဆုိျပီးပါပါမယ္။ ေနာက္ျပီး သူ႔ရဲ႕ flexibility နဲ႔ save bandwidth အတြက္ button အတြက္ background-image ကုိတစ္ခုပဲသံုးပါမယ္။ icon အတြက္လည္း background-image တစ္ခုပဲသံုးပါမယ္။ အရင္က ပုိ႔စ္ ရဲ့ ေနာက္ဆက္တဲြေပါ့။

mouse မတင္မီ

mouse တင္လုိက္ေသာအခါ
http://sophie-g.net/jobs/css/buttonsTest.htmမွာ ရွင္းရွင္းလင္းလင္း ၾကည့္ႏုိင္ပါတယ္။

Button shape

button တစ္ခုကုိ ဖန္တီးဖုိ႔အတြက္ < a href > html tag ကုိအသံုးျပဳပါမယ္။

< a href="javascript:return false;" class="button" id="buttonOK" > < span class="icon"> Ok < /span > < /a >

ဒီမွာ javascript:return false; ေနရာမွာ link ဒါမွမဟုတ္ javascript function တစ္ခုခုကုိ ထည့္သြင္းႏုိင္ ပါတယ္။ button ရဲ႕ ID ကုိေတာ့ buttonOK လုိ႔ေပးထားပါတယ္။ < span > ကုိေတာ့ အမွန္ျခစ္ icon ေလးထည့္ဖုိ႔ အသံုးျပဳပါမယ္။ ဒီကုတ္ေတြအားလံုးကုိ html ရဲဲ႕ CSS file နဲ႔ သာအလုပ္လုပ္သြားမွာ ျဖစ္ပါတယ္။ ဘာ flash button မွ မသံုးပါဘူး။

a.button, a.buttonDis {
display: block;
background-color: transparent;
background-image: url(buttonBackground.gif);
background-repeat: no-repeat;
width: 132px;
height: 28px;
margin: 5px auto;
padding: 5px 0 0 0;
text-align: center;
font-family: Helvetica, Calibri, Arial, sans-serif;
font-size: 100%;
font-weight: bold;
text-decoration: none;
}

အဲဒီမွာ ေဖာ္ျပထားတဲ့ link ကေတာ့ background image (132*28 pixels) ရွိတဲ့ ေဘးနားက ပံုေလးကုိ ညႊန္းတာပါ။ ဒီ image ေလးမွာ အသင့္ျပဳလုပ္ထားတဲ့ button ပံုစံေလး ၃ ခုပါ ပါတယ္။ for button states: normal, hover, disabled တုိ႔ျဖစ္ပါတယ္။ ဒီမွာ margin setting က button ေလးရဲ႕ ပတ္လည္ space ကုိေျပာပါတယ္။ padding ကေတာ့ button အတြင္းက icon နဲ႔ OK စာသားကုိ ခ်ိန္ေပးပါတယ္။

My Little Notebook