වචන වල පාට , පසුබිමෙ පාට වගෙ දෙවල් වෙනස් කරකොට අපිට HTML වර්ණ මාලාව නැතුවම බැරි වෙනවා.
Showing posts with label අලංකරනය. Show all posts
Showing posts with label අලංකරනය. Show all posts
HTML වර්ණ මාලාව
HTML වර්ණ මාලාව අපිට බ්ලොගින් වල ඉදිරියට යනකොට , HTML Edit කරන කොට ඕනි වෙනවා. මෙන්න දැන් තියෙනවා HTML වර්ණ මාලාව.
වචන වල පාට , පසුබිමෙ පාට වගෙ දෙවල් වෙනස් කරකොට අපිට HTML වර්ණ මාලාව නැතුවම බැරි වෙනවා.
වචන වල පාට , පසුබිමෙ පාට වගෙ දෙවල් වෙනස් කරකොට අපිට HTML වර්ණ මාලාව නැතුවම බැරි වෙනවා.
චැට් බොක්ස්
/
Labels:
HTML,
Java Script එකතු කිරීම,
Page Elements එකතු කිරීම,
අලංකරනය,
චැට් බොක්ස්
/
Comments: (7)
චැට් බොක්ස් එකක් කියන්නෙ ඔයගෙ බ්ලොග් එකෙ ඔන්ලයින් ඉන්න කියවන්නන්ට කතා කරන්න පුලුවන් වෙන ගැජට් එකක්. මම කතා කරන්න කිව්වෙ කටහධින් නෙමෙයි , ටෙක්ස්ට් චැට්. ඒ කියන්නෙ වචන ටයිප් කරලා.....
මෙම චැට් බොක්ස් එකක් දා ගැනීමෙන් ඔයාටත් වාසියක් තියෙනවා , මොකද ඔයාට පුලුවන් නෙ ඔයගෙ බ්ලොග් එක කියවන අයත් එක්ක කතා කරල , ඔයාගෙ බ්ලොග් එක ගැන ඒ අයගෙ අදහස් දැන ගන්න.
මේ චැට් බොක්ස් එක දාගන්න වැඩෙ කිරි කජු වගෙ ලේසියි. මොකද මේ වගෙ හදපු චැට් බොක්ස් නිකම් , නොමිලයෙ හැමෝටම ලබාදෙන වෙබ් අඩවි තියෙනවා. ඇත්තටම මේ වගෙ සේවා සපයන ආයතන බලාපොරොත්තු වෙන්නෙ ඒගොල්ලො සපයන සේවාව සඳහා එක දෙයයි. ඒ ඔව්න්ගෙ වෙබ් අඩවිය සඳහා ලින්ක් එකක්.
බොහෝවිට මෙම ලින්ක් එක ඔවුන්ගෙ චැට් බොක්ස් එකෙම අන්තර්ගත කරලා තියෙනවා. අපි සමහරු මේ ලින්ක් එක මකලා දානවා.ඒත් මම නම් කියන්නෙ ඔව්න් සපයන එම නොමිලයෙ සේවාවට උදව්වක් වශයෙන් ඒ ලින්ක් එක තියන්න.
හොඳයි , දැන් අපි බලමු චැට් බොක්ස් එකක් දාගන්නා විදිහ.
ShoutMix
මේ තියෙන්නෙ ඉතාමත් හොඳ , චැට් බොක්ස් සපයන සේවාවක්. ඔබ මෙම වෙබ් අඩවියෙ රෙගිස්ටර් උන වහා ඔබට ඔබෙ චැට් බොක්ස් එක නිර්මාණය කෙරීම.
ඒ වගෙම තමා ඔබට අවශ්ය වන විදිහට ඔබෙ චැට් බොක්ස් එක වෙනස් කර ගැනීමට සෙට්න්ස් පවා ඔව්න් විසින් ලබා දෙනු ලබනවා.
මේ තියෙන්නෙ එම චැට් බොක්ස් එකයි.
ඒවගෙම තමා ඔබෙ බ්ලොග් අඩවියෙ කවුරුන් හෝ ස්පෑම් කරනවා නම් ඔවුන් නවත්වා දැමීමද මෙම චැට් බොක්ස් එක මගින් කල හැකියි.
මෙම චැට් බොක්ස් එක නිර්මාණය කර ලැබෙන codes ඔබ HTML\Java Script ගැජට් එකෙ Save කර ගත යුත්යි. ( මේ සඳහා මුල සිට පියවරවල් දැන ගැනීමට අවශ්ය නම් මෙතන ක්ලික් කරන්න. )
ගූග්ල් චැට් බොක්ස් එක
මෙයද ඉහත සඳහන් ආකාරයටම ඇතුලත් කර ගත යුතු වේ. මෙය ලබා ගැනීම සඳහා මෙතන ක්ලික් කරන්න.මෙම ලිපිනයට ගොස් ඔබට අවශ්ය ආකාරයට චැට් බොක්ස් එකෙහි උස , පළල සකස් කර ගන්න. ඉන්පසු ඉහත චැට් බොක්ස් එකෙහි ආකාරයටම HTML\Java Script ලෙස ඇතුල් කර ගන්න.
මෙම චැට් බොක්ස් එකක් දා ගැනීමෙන් ඔයාටත් වාසියක් තියෙනවා , මොකද ඔයාට පුලුවන් නෙ ඔයගෙ බ්ලොග් එක කියවන අයත් එක්ක කතා කරල , ඔයාගෙ බ්ලොග් එක ගැන ඒ අයගෙ අදහස් දැන ගන්න.
මේ චැට් බොක්ස් එක දාගන්න වැඩෙ කිරි කජු වගෙ ලේසියි. මොකද මේ වගෙ හදපු චැට් බොක්ස් නිකම් , නොමිලයෙ හැමෝටම ලබාදෙන වෙබ් අඩවි තියෙනවා. ඇත්තටම මේ වගෙ සේවා සපයන ආයතන බලාපොරොත්තු වෙන්නෙ ඒගොල්ලො සපයන සේවාව සඳහා එක දෙයයි. ඒ ඔව්න්ගෙ වෙබ් අඩවිය සඳහා ලින්ක් එකක්.
බොහෝවිට මෙම ලින්ක් එක ඔවුන්ගෙ චැට් බොක්ස් එකෙම අන්තර්ගත කරලා තියෙනවා. අපි සමහරු මේ ලින්ක් එක මකලා දානවා.ඒත් මම නම් කියන්නෙ ඔව්න් සපයන එම නොමිලයෙ සේවාවට උදව්වක් වශයෙන් ඒ ලින්ක් එක තියන්න.
හොඳයි , දැන් අපි බලමු චැට් බොක්ස් එකක් දාගන්නා විදිහ.
ShoutMix
මේ තියෙන්නෙ ඉතාමත් හොඳ , චැට් බොක්ස් සපයන සේවාවක්. ඔබ මෙම වෙබ් අඩවියෙ රෙගිස්ටර් උන වහා ඔබට ඔබෙ චැට් බොක්ස් එක නිර්මාණය කෙරීම.
ඒ වගෙම තමා ඔබට අවශ්ය වන විදිහට ඔබෙ චැට් බොක්ස් එක වෙනස් කර ගැනීමට සෙට්න්ස් පවා ඔව්න් විසින් ලබා දෙනු ලබනවා.
මේ තියෙන්නෙ එම චැට් බොක්ස් එකයි.
ඒවගෙම තමා ඔබෙ බ්ලොග් අඩවියෙ කවුරුන් හෝ ස්පෑම් කරනවා නම් ඔවුන් නවත්වා දැමීමද මෙම චැට් බොක්ස් එක මගින් කල හැකියි.
මෙම චැට් බොක්ස් එක නිර්මාණය කර ලැබෙන codes ඔබ HTML\Java Script ගැජට් එකෙ Save කර ගත යුත්යි. ( මේ සඳහා මුල සිට පියවරවල් දැන ගැනීමට අවශ්ය නම් මෙතන ක්ලික් කරන්න. )
ගූග්ල් චැට් බොක්ස් එක
මෙයද ඉහත සඳහන් ආකාරයටම ඇතුලත් කර ගත යුතු වේ. මෙය ලබා ගැනීම සඳහා මෙතන ක්ලික් කරන්න.මෙම ලිපිනයට ගොස් ඔබට අවශ්ය ආකාරයට චැට් බොක්ස් එකෙහි උස , පළල සකස් කර ගන්න. ඉන්පසු ඉහත චැට් බොක්ස් එකෙහි ආකාරයටම HTML\Java Script ලෙස ඇතුල් කර ගන්න.
චලනය වෙන වචන
එහාට මෙහාට චලනය වෙන වචන ටිකක් තිබ්බොත් මරු නෙද ?
දැන් අපි බලමු මේ වගෙ එකක් දාගන්නෙ කොහොමද කියල.
ඒ සඳහා මෙම codes ටික බ්ලොග් එක ලියන තැන Edit HTML පැතෙතෙ Paste කරගන්න.
<marquee behavior="alternate" width="80%" bg>ඔයාට ඕනි වාඛ්යය මෙතන ට්යිප් කරන්න.</marquee>
දැන් අපි බලමු මේ වගෙ එකක් දාගන්නෙ කොහොමද කියල.
<marquee bgcolor="#ffffcc">ඔයාට ඕනි වාඛ්යය මෙතන ට්යිප් කරන්න.</marquee>
දැන් අපි බලමු මේ වගෙ එකක් දාගන්නෙ කොහොමද කියල.
<marquee scrolldelay="150" direction="up" width="300px" height="100px" bgcolor="#ffffcc">ඔයාට ඕනි වාඛ්යය මෙතන ට්යිප් කරන්න.</marquee>
දැන් බලමු මේක Edit කර ගන්න හැටි.
[ scrolldelay="150" ] මෙකෙන් කරන්නෙ වචනය උඩට යන වෙලාව වෙනස් කරල හදාගන්න එක.මෙම ගනන වැඩිනම් වචනය උඩට යන වේගය අඩුයි. මෙම ගනන අඩුනම් වචනය උඩට යන වේගය වැඩියි.
[ width="300" ] වචන සහිත කොටුවෙ පළල
[ height="50" ] වචන සහිත කොටුවෙ දිග
[ direction="up" ] වචන යායුතු ගමන් මාර්ගය. ( direction="left" , direction="right" , direction="up" , direction="down" මෙය මෙම codes භාවිතයෙන් කැමති ආකාරයට වෙනස් කර ගත හැක. )
දැන් කැමති ආකාරයට ඔබෙ බ්ලොග් අඩවිය අලංකාර කරගන්න.
දැන් අපි බලමු මේ වගෙ එකක් දාගන්නෙ කොහොමද කියල.
ඒ සඳහා මෙම codes ටික බ්ලොග් එක ලියන තැන Edit HTML පැතෙතෙ Paste කරගන්න.
<marquee behavior="alternate" width="80%" bg>ඔයාට ඕනි වාඛ්යය මෙතන ට්යිප් කරන්න.</marquee>
දැන් අපි බලමු මේ වගෙ එකක් දාගන්නෙ කොහොමද කියල.
<marquee bgcolor="#ffffcc">ඔයාට ඕනි වාඛ්යය මෙතන ට්යිප් කරන්න.</marquee>
දැන් අපි බලමු මේ වගෙ එකක් දාගන්නෙ කොහොමද කියල.
<marquee scrolldelay="150" direction="up" width="300px" height="100px" bgcolor="#ffffcc">ඔයාට ඕනි වාඛ්යය මෙතන ට්යිප් කරන්න.</marquee>
දැන් බලමු මේක Edit කර ගන්න හැටි.
[ scrolldelay="150" ] මෙකෙන් කරන්නෙ වචනය උඩට යන වෙලාව වෙනස් කරල හදාගන්න එක.මෙම ගනන වැඩිනම් වචනය උඩට යන වේගය අඩුයි. මෙම ගනන අඩුනම් වචනය උඩට යන වේගය වැඩියි.
[ width="300" ] වචන සහිත කොටුවෙ පළල
[ height="50" ] වචන සහිත කොටුවෙ දිග
[ direction="up" ] වචන යායුතු ගමන් මාර්ගය. ( direction="left" , direction="right" , direction="up" , direction="down" මෙය මෙම codes භාවිතයෙන් කැමති ආකාරයට වෙනස් කර ගත හැක. )
දැන් කැමති ආකාරයට ඔබෙ බ්ලොග් අඩවිය අලංකාර කරගන්න.
පොප් අප් වෙන දැන්වීම කොටුවක් දාගමු.
ඔයගෙ බ්ලොග් එකට කවුරු හරි එනකොටම මොකක් හරි මැසෙජ් එකක් දැක ගන්න ලැබෙනවාට ඔයා කැමතිද ?
ඒ කියන්නෙ , ඔන්න ඔයගෙ බ්ලොග් එක තියෙන්නෙ හොල්මන් ගැන නම් , කවුරු හරි ඔයගෙ බ්ලොග් එකෙ නම ටයිප් කරල එනකොටම " ඔබ දැන් ඇතුල් වෙන්නෙ අති භයානක දෙවල් ඇති වෙබ් අඩවියකටය.ඔබ බිය යන්න හඳුනන්නෙ නැත්නම් පමනක් බලන්න. " වගෙ එකක්.
හ්ම්ම්..... කියවන කෙනාට එතකොට බ්ලොග් එක කියවන කම් ඉවසිල්ලක් නැති වෙයි නෙද ?
හොඳයි , දැන් අපි බලමු කොහොමද මේ වඩෙ කරන්නෙ කියල...
ඉස්සෙල්ලාම HTML \ Java script එකක් දාගන්න. ( HTML \ Java script එකක් දාගන්න හැටි මුල ඉඳන් දැන ගන්න ඔනි නම් මෙතන ක්ලික් කරන්න. )
දැන් මෙම codes ටික ඒකෙ paste කරන්න.
<script type="text/javascript"> alert('ඔයාට පෙන්වන්න ඕනි මැසෙජ් එක.') </script> <noscript>වෙබ් බ්රවුසරයෙ Java Script පෙන්වීම විසන්ධි කර ඇත්නම් එක ක්රියාත්මක කරන ලෙස දන්වන්න. ( මෙසෙ Java Script කිසිවක් පෙන්වන්නෙ නැත. )</noscript>
OK සහ Cancel යන බොත්තම් දෙකම සහිත මැසෙජ් එකක් පෙන්වීමට අවශ්ය නම් මෙම codes භාවිතා කරන්න.
<script type="text/javascript">
confirm('ඔයාට පෙන්වන්න ඕනි මැසෙජ් එක.');
if (confirm('ඔයාට පෙන්වන්න ඕනි මැසෙජ් එක.')) {
window.location = "ඔබෙ බ්ලොග් අඩවියෙ වෙබ් ලිපිනය";
}
else {
window.location = "ඔබෙ බ්ලොග් අඩවියට යාමට ප්රතික්ශෙප කලහොත් යායුතු වෙබ් අඩවියෙ වෙබ් ලිපිනය";
}
</script>
හොඳින් සතුටු වෙන්න.
ඒ කියන්නෙ , ඔන්න ඔයගෙ බ්ලොග් එක තියෙන්නෙ හොල්මන් ගැන නම් , කවුරු හරි ඔයගෙ බ්ලොග් එකෙ නම ටයිප් කරල එනකොටම " ඔබ දැන් ඇතුල් වෙන්නෙ අති භයානක දෙවල් ඇති වෙබ් අඩවියකටය.ඔබ බිය යන්න හඳුනන්නෙ නැත්නම් පමනක් බලන්න. " වගෙ එකක්.
හ්ම්ම්..... කියවන කෙනාට එතකොට බ්ලොග් එක කියවන කම් ඉවසිල්ලක් නැති වෙයි නෙද ?
හොඳයි , දැන් අපි බලමු කොහොමද මේ වඩෙ කරන්නෙ කියල...
ඉස්සෙල්ලාම HTML \ Java script එකක් දාගන්න. ( HTML \ Java script එකක් දාගන්න හැටි මුල ඉඳන් දැන ගන්න ඔනි නම් මෙතන ක්ලික් කරන්න. )
දැන් මෙම codes ටික ඒකෙ paste කරන්න.
<script type="text/javascript"> alert('ඔයාට පෙන්වන්න ඕනි මැසෙජ් එක.') </script> <noscript>වෙබ් බ්රවුසරයෙ Java Script පෙන්වීම විසන්ධි කර ඇත්නම් එක ක්රියාත්මක කරන ලෙස දන්වන්න. ( මෙසෙ Java Script කිසිවක් පෙන්වන්නෙ නැත. )</noscript>
OK සහ Cancel යන බොත්තම් දෙකම සහිත මැසෙජ් එකක් පෙන්වීමට අවශ්ය නම් මෙම codes භාවිතා කරන්න.
<script type="text/javascript">
confirm('ඔයාට පෙන්වන්න ඕනි මැසෙජ් එක.');
if (confirm('ඔයාට පෙන්වන්න ඕනි මැසෙජ් එක.')) {
window.location = "ඔබෙ බ්ලොග් අඩවියෙ වෙබ් ලිපිනය";
}
else {
window.location = "ඔබෙ බ්ලොග් අඩවියට යාමට ප්රතික්ශෙප කලහොත් යායුතු වෙබ් අඩවියෙ වෙබ් ලිපිනය";
}
</script>
හොඳින් සතුටු වෙන්න.
ටෙම්ප්ලේට් එක එඩිට් කිරීම
ටෙම්ප්ලෙට් එක එඩිට් කර සිදු කරනා වෙනස් කම් ගැන මෙම බ්ලොග් අඩවියෙ බොහෝ ස්තාන වල සඳහන් වේ.
මෙසේ ටෙම්ප්ලටෙ එක එඩිට් කෙරීම සඳහා Layout වල එඩිට් HTML යන ටබ් එකට යන්න.
දැන් ඔබට ඔබෙ බ්ලොග් අඩවියෙ ටෙම්ප්ලෙට් එකෙ codes දකින්න හැකි වේවි.

මෙහි මා සඳහන් කර ඇති වෙනස් කම් කිරීමට Expand Widget යන්නට හරි ලකුන දැමිය යුතුය.


දැන් මම සඳහන් කර ඇති codes සෙවීමට නම් ඔබෙ යතුරු පුවරුවෙ Ctrl බොත්තමත් සමඟ F අකුර ඔබා එන තැන සෙවීමට දී ඇති code එක paste කර සෙවීම කරන්න.
වෙනස් කම් කර අවසානයෙ ඔබ මෙතනින් 
PREVIEW බොත්තම ඔබා සියල්ල නිවැරදි දැයි පරීක්ශාකර බලන්න.
වැරැද්දක් ඇත්නම් මෙවැනි දෙයක් ඔබට දකින්න ලැබෙවි.
එසේ උවොත් වහාම CLEAR EDITS බොත්තම ඔබා ඔබ කල වෙනස් කම් නැවත බලන්න.
නැවතත් PREVIEW බොත්තම ඔබා සියල්ල නිවැරදි දැයි පරීක්ශාකර බලන්න.
සියල්ල නිවැරදි නම්
බොත්තම ඔබන්න.

PREVIEW බොත්තම ඔබා සියල්ල නිවැරදි දැයි පරීක්ශාකර බලන්න.
වැරැද්දක් ඇත්නම් මෙවැනි දෙයක් ඔබට දකින්න ලැබෙවි.
එසේ උවොත් වහාම CLEAR EDITS බොත්තම ඔබා ඔබ කල වෙනස් කම් නැවත බලන්න.
නැවතත් PREVIEW බොත්තම ඔබා සියල්ල නිවැරදි දැයි පරීක්ශාකර බලන්න.
සියල්ල නිවැරදි නම්
බොත්තම ඔබන්න.බ්ලොගර් අයිකන් එක ඉවත් කරීම
ඔය ගොල්ලො දැකල ඇති එක එක වෙබ් අඩවි වලට ඒකටම ආවේනික අයිකන් එකක් වෙබ් අඩවි ලිපිනය ඉදිරියෙන් තිබෙනවා. මේ වගෙම ඔයගෙ බ්ලොග් අඩවියෙ ඉස්සරහෙනුත් "B" ලකුන සහිත තැඹිලි පාට ලකුනක් තියෙනවා.
මේ වෙනුවට අපිට කැමති එකක් දාගන්න පුලුවන් නම් අපෙ බ්ලොග් අඩවියට තවත් වැදගත් පෙනුමක් එනවා. දැන් අපි බලමු මෙම අයිකන් එක වෙනස් කරන හැටි.
මේ සඳහා 32*32 ප්රමානයට අයිකන් එකක් හදාගන්න.නැත්නම් මෙම
වෙබ් අඩවිය භාවිතා කර අයිකන් එකක් සදා ගෙන www.imageshack.us වෙබ් අඩවියට අප්ලෝඩ් කර ගන්න.
නැතහොත් වෙනත් පින්තූර අප්ලෝඩ් කල හැකි අඩවියකට අප්ලෝඩ් කර , එම අයිකන් එකෙ වෙබ් ලිපිනය ලබා ගන්න.
( මෙම ක්රියාවලිය ඔබට අමාරු නම් මා හට දන්වන්න. මම ඔබට අයිකන් එකක් සදා දෙන්නම්. )
මෙසේ අයිකන් එක එකතු කිරීමට මෙසේ කරන්න.
මේ සඳහා ඔබ ඔබෙ බ්ලොග් අඩවියෙ ටෙම්ප්ලේට් එක HTML වලින් Edit කර ගත යුතුයි. ඉන්පසු Widget Expand කල යුතුයි. ( මෙය කරන ආකාරය දැන ගැනීම සඳහා මෙතන ක්ලික් කරන්න. )
දැන් Ctrl+F ඔබා පහත සඳහන් codes පේලිය සොයා ගන්න.
<title><data:blog.pageTitle/></title>
දැන් එම පේලියට යටින් මෙම codes ටික paste කර ගන්න.
<link href='ඔබෙ අයිකන් එකෙ වෙබ් ලිපිනය මෙතන paste කරන්න' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
ඔබෙ අයිකන් එක png වර්ගයෙ එකක් නම් මෙම code එකද
<link href='ඔබෙ අයිකන් එකෙ වෙබ් ලිපිනය මෙතන paste කරන්න' rel='shortcut icon' type='image/png'/>
බෙ අයිකන් එක gif වර්ගයෙ එකක් නම් මෙම code එකද
<link href='ඔබෙ අයිකන් එකෙ වෙබ් ලිපිනය මෙතන paste කරන්න' type='image/gif'/>
පාවිච්චි කරන්න.
දැන්
ඔබන්න.
මේ වෙනුවට අපිට කැමති එකක් දාගන්න පුලුවන් නම් අපෙ බ්ලොග් අඩවියට තවත් වැදගත් පෙනුමක් එනවා. දැන් අපි බලමු මෙම අයිකන් එක වෙනස් කරන හැටි.
මේ සඳහා 32*32 ප්රමානයට අයිකන් එකක් හදාගන්න.නැත්නම් මෙම
නැතහොත් වෙනත් පින්තූර අප්ලෝඩ් කල හැකි අඩවියකට අප්ලෝඩ් කර , එම අයිකන් එකෙ වෙබ් ලිපිනය ලබා ගන්න.
( මෙම ක්රියාවලිය ඔබට අමාරු නම් මා හට දන්වන්න. මම ඔබට අයිකන් එකක් සදා දෙන්නම්. )
මෙසේ අයිකන් එක එකතු කිරීමට මෙසේ කරන්න.
මේ සඳහා ඔබ ඔබෙ බ්ලොග් අඩවියෙ ටෙම්ප්ලේට් එක HTML වලින් Edit කර ගත යුතුයි. ඉන්පසු Widget Expand කල යුතුයි. ( මෙය කරන ආකාරය දැන ගැනීම සඳහා මෙතන ක්ලික් කරන්න. )
දැන් Ctrl+F ඔබා පහත සඳහන් codes පේලිය සොයා ගන්න.
<title><data:blog.pageTitle/></title>
දැන් එම පේලියට යටින් මෙම codes ටික paste කර ගන්න.
<link href='ඔබෙ අයිකන් එකෙ වෙබ් ලිපිනය මෙතන paste කරන්න' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
ඔබෙ අයිකන් එක png වර්ගයෙ එකක් නම් මෙම code එකද
<link href='ඔබෙ අයිකන් එකෙ වෙබ් ලිපිනය මෙතන paste කරන්න' rel='shortcut icon' type='image/png'/>
බෙ අයිකන් එක gif වර්ගයෙ එකක් නම් මෙම code එකද
<link href='ඔබෙ අයිකන් එකෙ වෙබ් ලිපිනය මෙතන paste කරන්න' type='image/gif'/>
පාවිච්චි කරන්න.
දැන්
ඔබන්න.






