Blog template ပြင်ခြင်း

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

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
datesystem ရဲ့ date ကိုပြပါတယ်(သို့)သတ်မှတ်လို့ရပါတယ်။
timesystem ရဲ့ time ကိုပြပါတယ်(သို့)သတ်မှတ်လို့ရပါတယ်။
verလက်ရှိသုံးနေတဲံ MS-DOS version ကိုပြပါတယ်။
dirပေးထားတဲ့ directory(folder)တစ်ခုအတွင်းမှာ ရှိတဲ့ subdirectories(subfolder) (သို့) files တွေရဲ့ list ကိုပြပါတယ်။
clsClear the screen
mkdir,md directorydirectory ဆိုတဲ့ နာမည်နဲ့ 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
chkdskCheck a disk and show a status report
memလက်ရှိအသုံးပြုနေတဲ့ memory amount နဲ့ free amount ကိုပြပေးပါတယ်။
rename, ren source destfile နာမည်ကိုပြောင်းပေးပါတယ်။ ဥပမာ။ ren oldname newname
copy source destCopy one or more files to another location ဥပမာ။ copy c:\tools\myfile.txt c:\temp
move source destfiles များကိုရွှေ့ပေးပါတယ်။ ဥပမာ။move c:\tools c:\temp
type filetext file မှာ စာရေးပေးပါတယ်။ဥပမာ။ type c:\tools\myfile.txt
more fileDisplay the information screen by screen ဥပမာ။ more c:\tools\myfile.txt
delete,del filenamedelete one or more files ဥပမာ။ del c:\tools\myfile.txt

Tools
ping hostPing 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 hostTracert 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 နာမည်ကို မဖော်ပြရန်။
ipconfigIpconfig ဒီ 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 printRouting table ကို ဖော်ပြပေးပါတယ်။ command “route” ဟာ routes တွေကိုသတ်မှတ်ပေးတယ်။ routes တွေကိုဖျက်ပေးတယ်။ ဒါမှမဟုတ် route တွေရဲ့ အခြေအနေကို ဖော်ပြပေးတယ်။သူ့ရဲ့ တခြား option လေးတွေကတော့
Print : to show the list of routes
Delete : to delete a route
Add : to add a route
netstatRemote 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
pwdDisplay the name of the current directory
hostnameDisplay the name of the local host (the computer which you are currently using)
finger user Display information on the user “user” Example: finger root
lsList the content of the directories Example: ls -la
cd directoryChange 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 fileDelete 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 >> fileRedirect 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.

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 နဲ့ မကိုက်လို့ မတပ်တော့ပါဘူး။

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 .
domain
domain1
domain2
domain3
domain4
အပေါ်ကပုံမှာ မြှားပြထားတဲ့နေရာမှာ အခုလက်ရှိသုံးနေတဲ့ blog or website ရဲ့ လင့်ကိုထည့်ပေးပါ။ ဒါတွေပြီးရင် ကိုယ့်မေးထဲကို password နဲ့ ကုတ်တွေပါတဲ့ စာပို့လိုက်ပါမယ်။ အဲဒါနဲ့ ၀င်ပြီး activate လုပ်လိုက်ရင် ရပါပြီ။ ဒါဆိုရင် ခုနက လက်ရှိသုံးနေတဲ့ website လိပ်စာအတိုင်းလဲ ၀င်နိုင်သလို . အခုလို co.nr နဲ့ ဆုံးတဲ့ လိပ်စာအတိုင်းလည်း ၀င်လို့ရသွားပါပြီ။ သူ့ feature က FREE ပါ။

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

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/post.jpg) repeat-x;
border:1px solid #ddd;
}

#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}

.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}
-->
</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

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

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 အဲဒီမှာ ပုံတွေလည်းတင်လို့ရပါတယ်။

Read more (Blogger Buildin)

ဒါက နောက်တနည်းပါ။ Blog မှာ Read more ကိုတပ်တာပါပဲ။ ဒါက Blogger မှာ ပါပြီးသားပါ။ ဒါပေမယ့် သူက အရင်က Read more နဲ့ မတူတာက ဒီ Read more ကို နှိပ်လိုက်ရင် အရင်လို ၀ှက်ထားတဲ့ စာလေးတွေပဲ အောက်မှာဆက်ပေါ်လာတာ မဟုတ်ဘဲ ပိုစ့် တစ်ခုလုံးကို အစအဆုံးပေါ်စေမှာ ဖြစ်ပါတယ်။ သိပ်တော့ မကြိုက်ပါဘူး ။ အခုပုံလေးတွေက လုပ်ကြည့်တုန်းက ဟာတွေပါ။  လုပ်နည်းက  Settings ==> Basic ==> အောက်ဆုံးက Globle setting မှာ update editor လို့ ပြင်ရပါမယ်။

အောက်ကလိုပေါ်လာပါမယ်။ အစွန်ဆုံးက Insert jump break ကို နှိပ်ပြီး Read more ဖြစ်စေမယ့် စာတွေကို line ရဲ့ အောက်မှာ ရေးရပါမယ်။


တစ်ချို့ Template တွေဆိုရင် ချက်ချင်းပေါ်ပါပြီ။ တစ်ချို့ ကိုတော့ အောက်ပါအတိုင်း ဆက်ပြင်ရပါဦးမယ်။ Layout => Edit HTML => Expand Widget Templates ကို check လုပ်ပါ။ data:post.body ကုတ်ကို ရှာပါ။ အဲဒီဟာ ရဲ့ နောက်မှာ အောက်ပါအတိုင်းထည့်ပေးပါ။

< b:if cond='data:post.hasJumpLink' >
< div class='jump-link'>
< a expr:href='data:post.url + "#more"'> < data:post.jumpText/ > < /a >
< /div >
< /b:if >
ဒါဆိုရင် ရပါပြီ။ အောက်မှာ Read more မနှိပ်ခင်ပုံ နဲ့ နှိပ်ပြီးပုံ ကို ပြထားပါတယ်။

Read more ကို မနှိပ်ခင်ပုံ

Read more ကို နှိပ်ပြီးပုံ

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 လက်ရှိ အခြေအနေ

LavaLamp for jQuery lovers

ဒီနေ့ 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 ကိုနှိပ်ပြီး ဒေါင်းလို့ရပါပြီ။


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

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 စာသားကို ချိန်ပေးပါတယ်။

powered by Blogger