Offline බ්ලොග් ලිපි ලියන්නට Windows Live Writer

අද මේ කියන්නට යන්නේ අපගේ පරිගණකයේ internet නොමැතිවුවත් Offline ලෙස බ්ලොග් ලිපි ලියා පසුව පළ කරන්නට Microsoft සමාගම විසින් නොමිලේ ලබාදී  ඇති මෘදුකාංගයක් පිළිබදවයි.

Windows Essential නම් මෘදුකාංග සමූහය සමග පැමිණෙන මෙම මෘදුකංගය Windows Live Writer නම් වනවා. මෙන්න මේ සබැඳියෙන් පුළුවන් එය Offline  ලෙසටම ඔබගේ පරිගණකය වෙතට ලබා ගන්නට.

http://windows.microsoft.com/en-us/windows-live/essentials-install-offline-faq

අවශ්‍ය බ්ලොග් ලිපියකදී පමණක් Read more පහසුකම යොදා ගන්නේ මෙලෙසයි...

මෙන්න කාලෙකට පස්සේ බ්ලොග් ඉඟියක්. සමහර වෙලාවට අපට බ්ලොග් ලිපියක මුළු ලිපියම පෙන්න පළ කරන්නේ නැතුව මුල් ඡේදය පමණක් පේන්න තබා ඉතිරිය Read more වගේ link එකක් click කරාම පේන්න තිබුනා නම් හොදයි කියලා හිතෙන අවස්ථා තිබෙනවා. ගොඩක් දිගු ලිපි වලදී මටත් එහෙම තිබුනා නම් හොදයි කියා සිතුන අවස්ථා තිබුනා. හැබැයි blogger සේවාවේම මෙයට පහසුකම තිබුනත් එය සෑම ලිපියකටම බලපාන නිසා අවශ්‍ය අවස්ථාවල පමණක් එය සිදුකරගන්නා ආකාරය තමයි මෙම ලිපියෙන් කියන්නට යන්නේ.

මුලින්ම සුපුරුදු ආකාරයට ලිපිය ලියා අවසන් කරන්න (කැමති නම් ලිපිය ලියා ගෙන යන අවස්ථාවේම මෙම සැකසුම් කරගන්නටත් පුළුවන්.) දැන් ඔබ Compose mode එකේ සිට HTML mode එකට මාරු වෙන්න.
Read more

දැන් ලිපියේ මෙම පහසුකම ආරම්භ විය යුතු ස්ථානයට (උදා: ලෙස මම Read more  වැකි දර්ශනය විය යුතු ස්ථානය තීරණය කළා සේ) මෙම කේතය මුලින්ම අලවා ගන්න.
<a href="#" class="read">Read more</a>

දැන් පසුව දර්ශනය විය යුතු ඡේදයන්ගේ ආරම්භකම ස්ථානයට මෙම කේතයත් අලවා ගන්න. <div class="more">

දැන් මෙම කේතයන් අඩුවක් නොකර අලවා ගන්න.

<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(e) { $('div.more').hide(); $('a.read').click(function(){ $('div.more').toggle('slow'); var $link = $(this); if($link.text()=='Read more'){ $link.text('Read less'); }else{ $link.text('Read more'); } return false; }); }); </script>

ලිපියේ අවසානයට මෙම කේතයත් අලවා ගන්න අමතක කරන්න එපා. </div>

මෙයට කළ හැකි තව තව වෙනස් කම් ඉදිරියේදී කියන්නම්...

ලේසියෙන්ම හා කාර්යක්‍ෂමව ධාවනය කළ හැකි සේ Video ඔබේ පෝස්ටුවට එක් කරගන්නේ මෙහෙමයි...

ඊයේ Audio file එකක් ඔබගේ බ්ලොග් පෝස්ටු සදහා එක් කරගන්න කියා දුන්නා වගේම අද ඔබට තවත් වටිනා බ්ලොග් ඉඟියක් කියලා‍ දෙන්නම් HTML 5 කියන තාක්‍ෂනයට අදාලව කොහොමද ඉතාම සරළව Video file එකක් ඔබගේ පෝස්ටුවක් තුළ play කරන්නේ කියලා. මෙම HTML 5 කියන ක්‍රමයේ තිබෙන වාසියක් තමයි flash player නැතිවුනාත් video එක play කර ගැනීමේ හැකියාවත් තිබෙනවා. ඔබට හිතෙන්න පුළුවන් ඒත් දැනටමත් Blogger වලදී video upload කරල ඒක හෝ youtube වල තියෙන Video එකක Embedded code එක අරගෙන Video එකක් පෝස්ටුවේ play කරන්නත් පුළුවන් නේද කියන කාරණය.

හැබැයි මම නම් අත්දැකීමෙන් දැක්ක කාරණයක් තමයි එසේ upload කරන හෝ youtube Video play කරන්න හෝ load කර ගන්න ගියාම විවිද තාක්‍ෂනික දෝශ මතුවෙලා තිබෙනවා. සමහර විට ඔබට එසේ නොවන්නටත් ඇති. ඒත් මටනම් ඒ ක්‍රමය සාර්ථක ක්‍රමයක් නොවුනා ගේම වෙහෙසකාරී ක්‍රමයක්ද වූවා. තවදෙයක් තමයි ඊයේ Audio file ගැන කිව්වා වගේම තවම හැම browser එකක්ම හැම video format එකක් play කිරීමේ පහසුකම ලබාදී නැහැ. මේ chart එකේ ඒ ගැන තිබෙනවා.

ඒ නිසා අපි video file එකක් වුනත් internet හරහා Play කරන්න ඕන නම් ඒ ඒ browser වලට ගැලපෙන පරිදි හැම ‍format එකකින්ම upload කරන පරිශිලකයාට කැමති browser එකකින් ඒ video එක Play කරන්න පහසුකම සලසා දෙන්න ඕන. මේ නිසා අපිට ඕන ‍වන video ‍format සකස් කරගන්න පුළුවන් නොමිලේම ලබා දෙන converter එකක් තමයි Any Video Converter. එය ඔබට filehippo අඩවියෙනුත් ලබා ගන්න පුළුවන්.

එම මෘදුකාංගය භාවිතයෙන් ඔබ සතුව තිබෙන ඕනෑම Video file එකක් .mp4, .webm සහ .ogg/.ogv යන format වලට convert කර ගෙන ඔබ දන්නා File sharing අඩවියක් වෙතට upload කර ගන්න. මම ඒ සදහා යොදා ගත්තේ archive.org කියන වෙබ් අඩවියයි.

Upload කරගත් පසුව එම ‍file ත්‍රිත්වයට අදාල link ලබාගන්න. එය තාවකාලිකව notepad ගොනුවකට paste කර තබා ගැනීම ඔබට පහසුවේවි. උදාහරණයක් ලෙස මෙන්න එයට අදාල වීඩියෝව පහත දැක්වේ.

දැන් ඔබ කළ යුතුවන්නේ ඔබ ලියමින් සිටිනා හෝ ඔබට අවශ්‍ය පෝස්ටුවේ HTML editor එකට ගොස් මෙන්න මේ කේතය Paste කර ගැනීමයි.

<video width="320" controls="controls" preload="none">
<source src="mp4 Video Link" type="video/mp4" />
<source src="webm Video Link" type="video/webm" />
<source src="ogv Video Link" type="video/ogg" />
</video>

මෙහි දක්වා ඇති ඒ ඒ Video Link සදහා ඔබ කලින් ලබා ගත් link නිවැරදි ලෙස එම ස්ථානයට paste කර ගන්න. උදාහරණයක් ලෙස එවිට කේතය මෙලෙස දිස්විය යුතුයි.

<video width="320" controls="controls" preload="none">
<source src="http://archive.org/download/VideoPlayingUsingHtml5/video2.mp4" type="video/mp4" />
<source src="http://archive.org/download/VideoPlayingUsingHtml5/video2.webm" type="video/webm" />
<source src="http://archive.org/download/VideoPlayingUsingHtml5/video2.ogv" type="video/ogg" />
</video>

අකුරු වෙනුවට ඔබේ හඬින්ම බ්ලොග් ලිවීම හෙවත් Audio Files ලේසියෙන්ම බ්ලොග් පෝස්ට් වලදී ධාවනය කරන්නේ මෙහෙමයි...

ඔබට කවදා හරි ඕනෑවුනාද Audio file එකක් ඔබගේ බ්ලොග් පෝස්ටුවක ධාවනය කරන්න. එහෙමත් නැත්නම් කිසියම් ලිපියක් විවෘත වන විට මිහිරි සංගීතයක් ඇසෙන්නට සලස්වන්න(දැනටමත් ඇ‍හෙනවා ඇතිනේ), එහෙමත් නැන්නම් ඔබ අකුරු වලින් ලියනවාට වඩා ඔබගේ ලස්සන කටහඩින්ම පාඨකයන්ට යමක් කියන්න ආසාවක් ඇතිවුනේ නැත්ද? ඇතිවුනත් ඒක කරන්නේ කොහොමද? කියල ගැටළුවක්වත්ද තිබෙන්නේ. මෙන්න බ්ලොග් ඉඟි යටතේ සරළව ඒ ආසාව ඉටු කරගන්න හැටි.

මුලින්ම කියන්න ඕන හැම Internet browser එකක හැම Audio format එකක් Play කරන්න හැකියාවක් තවම නැහැ. මෙන්න මේ වගුවෙන් පෙන්වා තිබෙනවා ඒ ඒ Browser එක මොන format එකකට හෝ කිහිපකටද Support කරන්නේ කියන එක.

ඒ අනුව ඔබ සතුව යම් Audio file එකක් තිබෙනවා නම් දුක්වෙන්න එපා අනේ මගේ ගාව තිබෙන file format එක එක browser එකක විතරයිනේ play වෙන්නේ කියලා. ඒකට විසදුමක් තිබෙනවා. මෙන්න මේ Free Mp3/Wma/Ogg Converter කියන මෘදුකාංගයෙන් අපි සතුව තියෙන ඕනෑම Audio file එකක් කැමති quality එකකට කැමති format එකකට convert කර ගන්න පුළුවන්.

නොමිලේ ලබා දෙන මේ මෘදුකාංගය Download කර ගැනීම සදහා වූ ගොනුව මෙන්න මේ http://free-mp3-wma-ogg-converter.en.softonic.com/ සබැඳියෙන් ලබා ගන්න පුළුවන්.

දැන් මේ convert කර ගත්තා කියමුකෝ ඒත් ඔබගේ පරිගණකය තුල තිබීමෙන් අන්තර්ජාලයේ නැරඹිය හැකි බ්ලොග් අඩවියකට හෝ වෙබ් අඩවියකට එය ඇතුලත් කිරීමට නම් එය කුමක් හෝ file share කරන අඩවියකට upload කර ගත යුතුයි. ඒ සදහා ගොඩක් අඩවි ති‍බුනත් මම භාවිතා කරන්නේ http://archive.org කියන අඩවියයි. ඔබත් කැමති නම් එම අඩවි‍යේම account එකක් හදාගෙන අවශ්‍ය Audio file ඒකට upload කර ගෙන upload කර ගත් පසුව එම file වලට අදාලව ලැබෙන web page එකට යන්න. එහි මෙන්න මේ ආකාරයට file දිස් වනු ඇති අතර රූපයේ දැක්වෙන ලෙස එම file වලට අදලා link වෙතට ගොස් right click කර copy link location එකින් එක ඒ ඒ file format එකට අදාලව ලබාගන්න.

(ඔබ කැමති නම් උදාහරණයක් ලෙස මෙලෙස ලැබෙන කේතය ඒ ඒ ස්ථානයට ඒ මොහොතේම මෙම link paste කිරීම හෝ notepad වැනි ස්ථානයකට පළමුව මෙම link Paste කර ගන්න. mp3 ‍‍ගොනුවට අදාල කේතය - http://archive.org/download/TeriMeri/Bodyguard-TeriMeri.mp3)

දැන් මෙන්න මේ කේතය ඔබ දැනටමත් ලියා ගෙන යන පෝස්ටුවකට හෝ අළුතින් මේ දැන් ආරම්භ කළ පෝස්ටුවේ HTML mode එකට paste කර ගන්න.

<audio autoplay="autoplay" controls="controls">
<source src="ඔබ ලබා ගත් mp3 ගොනුවට අදාල සබැඳිය" type="audio/mp3" />
<source src="ඔබ ලබා ගත් ogg ගොනුවට අදාල සබැඳිය" type="audio/ogg" />
<source src="ඔබ ලබා ගත් wma ගොනුවට අදාල සබැඳිය" type="audio/wma" />
</audio>

දැන් මෙහි රතු පාටින් දක්වා තිබෙන ඒ ඒ ගොනු සදහා ඔබ ලබා ගත් සබැඳිය කියන ස්ථානයට ඔබ ලබා ගත් සබැඳියන් ඇතුලළු කළ යුතුයි. ඒ අනුව අවසාන කේතය මෙන්න උදාහරණයක් අයුරින් මෙලෙස දිස්විය යුතුයි.

<audio autoplay="autoplay" controls="controls">
<source src="http://archive.org/download/TeriMeri/Bodyguard-TeriMeri.mp3" type="audio/mp3" />
<source src="http://archive.org/download/TeriMeri/songs.pkBodyguard-04-TeriMeri.ogg" type="audio/ogg" />
<source src="http://archive.org/download/TeriMeri/songs.pkBodyguard-04-TeriMeri.wma" type="audio/wma" />
</audio>

යම් හෙයකින් ඔබට සිතුනොත් පිටුව විවෘත වන වේලාවේ ඉබේම මේ ශබ්ද ඇසීම කරදරයක්. බලන කෙනාට ඕන වෙලාවට විතරක් Play කරගන්න තිබුනම ඇති කියලා මෙහි <audio autoplay="autoplay" controls="controls"> තුල ඇති autoplay="autoplay" කියන කොටස ඉවත් කරන්න.

‍එපමණයි කරන්න තියෙන්නේ. එහෙනම් අත්හදා බලලම ගැටළුවක් ආවොත් කියන්න... (ඔබගේ අන්තර්ජාල පහසුකමෙහි ඇති විය හැකි යම් යම් බාධාවන් නිසා මෙහි අඩංගු audio file එක ධාවනයේදී සුළු සුළු දෝශ ඇති විය හැකිය).

පසුබිම සදහා Textures කැමති වෙලාවට කැමති අයුරින් යොදගන්නා අයුරු

අදනම් මොනවත් ලියන්න හිතාගෙන නෙමෙයි හිටියේ. ඒත් පසුගිය දිනවල බ්ලොග් ඉඟි යටතේ HTML සහ CSS වගේ දේවල් එක දිගට ලියපු හින්දා ඒකාකාරි බවක් ඔබට දැ‍නේවි කියලා ඒ ගැන ගොඩක් දේවල් ලියන්න තිබුනත් අද නොලියන්නත් ඉදලා පස්සේ හිතුනා කවදා හරි මේවා ලියන එකේ අද ලිව්වොත් කාටහරි ප්‍රයෝජනවත් නම් බලල යොදා ගනී කියලා. අද කියන්න හදන්නේ ඉතාම පහසු ආකාරකට කැමති කැමති background Textures Post area එකට යොදා ගන්නේ කොහොමද කියලයි. ඔබට දැනටමත් පේනවා ඇතිනේ වෙනදාට වඩා වෙනස් කියලා මේ ලිපිය ලියල තියෙන තැන පසුබිම. මේ පසුබිම කැමති නම් Texture එකකින් වගේම කැමති නම් කැමති වර්ණයකින් (පසුගිය දිනක පළ කළ ස්වභාවික වර්ණ ලැයිස්තුවෙන් එකක් හරි යොදා ගන්න පුළුවන්) පසුබිම වෙන් වෙන් ලිපියට කැමති විදියට අලංකාර කර ගැනීමට පුළුවන්. මෙන්න මෙහෙමයි ලේසියෙන්ම ඒ දේවල් කරන්නේ.

මුලින්ම ඔබ කැමති Mode එකක අවශ්‍ය ලිපිය ලියන්න. හැබැයි මම දෙන උපදෙසක් තමයි මොනව හරි වෙනස් කමක් HTML mode එකේ කරනවා නම් ඉන්පසුව දිගටම ඒ mode එකේ ඉන්න. එහෙම නැත්නම් සියල්ල සාමාන්‍ය ආකාරයට ලියල අවසානයේ HTML mode එකේදි ඒ ඒ දේවල් කරන Preview එකෙන් බලල වෙනසක් තිබේ නම් කරල Publish කරන්න.

දැන් ඔබට යම් Texture එකක් යොදා ගන්න ඕන නම් ඔබ සතුව තිබෙන Texture එකක් හෝ අන්තර්ජාලයෙන් අලංකාර Texture එකක් ලබා ගන්න. ඔබට ඕනෑතරම් Textures අන්තර්ජාලයෙන් ලබා ගන්න වෙබ් අඩවි load කරගන්න පුළුවන් Google වලදී textures for html background කියන සෙවුම් වදන් ටයිප් කර සැනින්ම. ඔබ කැමති texture එකක් ලබා ගත්තයි කියල හිතමු. හැබැයි ඒ texture එක ගොඩක් විශාල නම් අදාල පෝස්ටුව සමග ඒකත් load වෙන්න කාලය යන නිසා ටිකක් කුඩාවට Texture එක සකස් කර ගන්න එක හොදයි. ඒ සදහා Photoshop හෝ වෙනයම් ඔබ සතුව ඇති මෙවලමකින් Texture එකේ width සහ height යන දෙකම 100px වගේ වෙන්න Crop කර ගෙන high quality එකෙන්ම save කර ගෙන picassa හෝ වෙනයම් ඔබ කැමති image upload කරන්න යොදා ගන්නා අඩවියකට upload කරගෙන ඉන්පසුව ලැබෙන අදාල link එක ලබා ගන්න.

දැන් ඔබගේ ලිපියේ මුලටම මේ කේතය අලවා ගන්න.

<div style="background-image:url(අදාල Texture එක upload කළ පසුව ලැබෙන එහි link එක)">

මෙහිදී ඉහත කේතයේ දක්වා ඇති පරිදිම "අදාල Texture එක upload කළ පසුව ලැබෙන එහි link එක" ඔබ Texture එක Upload කරනා ලද අඩවියෙන් ලබා ගත යුතු අතර එය සිදු කරගන්නා අයුරු පසුගිය බ්ලොග් ඉඟි ලිපි කිහිපයකම සටහන් කර ඇත.

දැන් ලිපියේ අවසානයටම

</div>

යනුවෙන් යොදන්න.

මෙන්න ඔබගේ තවදුරටත් පහසුවට ආරම්භයට මම කේතය යොදා තිබෙන අයුරු.

කැමති නම් අත්හදා බලන්න. ගැටළුවක් තිබුනොත් අහන්න...

දිග ඒවා ලේසියෙන් බැලීමට සකස් කිරීම

මේ ලිපියදී මුලින්ම වෙනදාට වඩා වෙනසක් ඔබට දැකගන්නට ලැබේවි. මුලින්ම ඔබට ඒ වෙනස දැකගැනීමට උදාහරණයක් ලෙස පසුගිය දිනක පළ කළ අතිබිහිසුණු, තෲර මරණීය දණ්ඩන ක්‍රම ලිපි‍ය සැකසීමට යොදා ගත් මුල් ඉංග්‍රීසි ඡේදයන් කිහිපයක් දක්වා තිබෙනවා. බලන්න ඔබට වෙනසක් දැනුනද තියා.

The Brutal Execution Methods in the History

Garrote
Scaphism
Lingchi
Breaking Wheel

Garrote

The garrote very common once, is no longer sanctioned by law in any country though training in its use is still carried out in the French Foreign Legion. The garrote is a device that strangles a person to death. It can also be used to break a person’s neck. The device was used in Spain until it was outlawed in 1978 with the abolition of the death penalty. It normally consisted of a seat in which the prisoner was restrained while the executioner tightened a metal band around his neck until he died. Some versions of the garrote incorporated a metal bolt which pressed in to the spinal chord, breaking the neck. The victim may pass into a state of severe and painful convulsions and then pass into death. This spiked version is known as the Catalan garrote. The last execution by garrote was José Luis Cerveto in October 1977. Andorra was the last country in the world to outlaw its use, doing so in 1990. However garroting is still common in India according Indian author and forensic expert Parikh.

Top

Scaphism

Scaphism, also known as the boats was an ancient Persian method of execution designed to inflict torturous death. The naked person was firmly fastened within a back-to-back pair of narrow rowing boats (or a hollowed-out tree trunk), with the head, hands, and feet protruding. The condemned was forced to ingest milk and honey to the point of developing severe diarrhea, and more honey would be rubbed on his body in order to attract insects to the exposed appendages. He or she would then be left to float on a stagnant pond or be exposed to the sun. The defenseless individual’s feces accumulated within the container, attracting more insects, which would eat and breed within his or her exposed and increasingly gangrenous flesh. The feeding would be repeated each day in some cases to prolong the torture, so that dehydration or starvation did not provide him or her with the release of death. Death, when it eventually occurred, was probably due to a combination of dehydration, starvation and septic shock. Delirium would typically set in after a few days. Death by scaphism was painful, humiliating, and protracted.

Top

Lingchi

Also known as slow slicing, Lingchi was reserved for crimes viewed as especially severe, such as treason and killing one’s parents. Also translated as slow process, lingering death or death by a thousand cuts, was a form of execution used in China from roughly AD 900 until its abolition in 1905. The process involved tying the person to be executed to a wooden frame, usually in a public place. The flesh was then cut from the body in multiple slices in a process that was not specified in detail in Chinese law and therefore most likely varied. In later times, opium was sometimes administered either as an act of mercy or as a way of preventing fainting. The punishment worked on three levels: as a form of public humiliation, as a slow and lingering death, and as a punishment after death. In variable forms, it also involved dismemberment i.e cutting, tearing, pulling, wrenching or otherwise removing, the limbs of the condemned.

Top

Breaking Wheel

Breaking wheel or the Catherine wheel was a torture device used for capital punishment in the Middle Ages and early modern times for public execution by cudgelling to death. It was used during the Middle Ages and was still in use into the 19th century. Breaking on the wheel was a form of torturous execution formerly in use in France, Germany, Denmark, Sweden, Romania, Russia, the US, and other countries. The wheel was typically a large wooden wagon wheel with many radial spokes, but a wheel was not always used. In some cases the condemned were lashed to the wheel and beaten with a club or iron cudgel, with the gaps in the wheel allowing the cudgel to break through. Alternatively, the condemned were spreadeagled and broken on a St Andrew’s cross consisting of two wooden beams nailed in an “X” shape, after which the victim’s mangled body might be displayed on the wheel.

Top

ඔබට දැන් පෙනුනද මොකක්ද කරල තිබෙන්නේ කියලා. මේ ලිපියේ මුලදීම අවශ්‍ය කොටසක් වෙත යාමට හා නැවත ලිපිය ආරම්භ කරන තැනට යාමට පහසු ක්‍රමයක් සතස් කර තිබෙන බව දකින්නට ඇති. මම ඔබටත් කියලා දෙන්නම් එය කොහොමද කරන්නේ කියලා. මේ ක්‍රමය නිසා දීර්ඝ ලිපි වලදී මුළු ලිපියම කියවන්නට අවශ්‍ය නැත්නම අවශ්‍ය තැනට පමණක් යන්න සහ නැවත ලිපියේ අන්තර්ගතය පිළිබදව දක්වා ඇති උපමාතාකා ඔස්සේ කැමති තැනකට යන්න ලිපියේ මුලටත් යාමට පහසුවක් වේවි කියා සිතනවා‍.

මුලින්ම සුපුරුදු පරිදි කැමති මාතෘකාවකට ඔබට අවශ්‍ය ලිපිය ‍සකස් කර ගන්න. එය ඔබ කැමති නම් Compose mode හෝ HTML mode යන කැමති ස්ථානයක සිට කර ගත්තාට දැනට ගැටළුවක් නැහැ. ඉන්පසුව අවශ්‍ය වෙනස් කිරීම්, රූප එකතු කිරීම් හෝ ඔබට අවශ්‍ය සියල්ල කර ගත්තට පස්සේ HTML mode එකට යන්න. හැබැයි මේ කියල දෙන උපක්‍රමය යෙදීමට HTML කේත දැම්මට පස්සේ නම් මේ ලිපියේ වෙනස් කම් කිරීමට Compose mode එකට යන්න එපා. එහෙමවුනොත් මේ දේවල් හරියට කරගන්න බැරි වෙනවා.

දැන් ලිපියේ ආරම්භයේදී මාතෘකාව හෝ වෙනයම් රූපයක් සදහා හෝ පළමු ඡේදයේ මුලට Top id එක දැමීමෙන් ලිපියේ මුලට අවශ්‍ය විටක පැමිණිමේ ක්‍රමය සකස් කර ගත යුතුයි. මම උදහරණයක් ලෙස මෙම ලිපියට යොදලා තියෙන මාතෘකාවට Top id එක එන විදියට සකස් කරනවා.

<h1 id="top">The Brutal Execution Methods in the History</h1>

දැන් ලිපියේ ඒ ඒ උපකොටස් සදහා යාමට Index එකක් ලෙස සකස් කරන්නේ මෙහෙමයි.

මෙම කේතය මෙම ලිපියේ උදාහරණය ලෙස Navigation Hyperlink හතරකට වුනාට ඔබට කැමති සංඛ්‍යාවකට ලබා දිය හැකි අතර කහ පාටින් highlight කර ඇති id name එක සදහා ඔබ කැමති, භාවිතා කිරීමට පහසු නමක් දෙන්න. යම් හෙයකින් වචන එකකට වඩා ඇති නමක් දෙනවා නම් වචන අතරට "_" සමග භාවිතා කරන්න. කොළ පාටින් දක්වා ඇත්තේ අදාල ඡේදයට වඩාත් ගැලපෙන උපමාතෘකාවලත් යොදන නාමයයි. එය එම ඡේදය අසලදී මෙන්ම මෙහිදීද එලෙසම භාවිතා කරන්න.

දැන් අදාල ඡේදයේදී මෙම index එක සමග සම්බන්ධතාවයන් සකස් කරන්නේ මෙසේමයි. අදාල ඡේදය ආරම්භයේදී මේ කේතය උචිත අයුරින් භාවිතා කරන්න.

<b id="garrote">Garrote</b>

ඔබට වඩාත් හොදින් වටහා ගනු පිණිස කලින් කහ සහ කොළ වලින් වර්ණ කරන ලද කේතය හා සසදා අවශ්‍ය ආකාරයට හැසිරවීමට මෙම රූප සටහනද ඉදිරිපත් කරමි.

දැන් ඒ ඒ ඡේදයේ අවසානයට මුලට (Top) යාමට සකස් කර ගත යුතුයි. ඒ සදහා මෙම කේතය අවශ්‍ය ස්ථානයන් හිදී භාවිතා කරන්න.

<p><a href="#Top">Top</a></p>

සමහර විට මේ ලිපියේදී සිදුකරන දේවල් අමතර වෙහෙසක් දැරිය යුතු දේවල් ලෙස පෙනුනත් මනාපයක් තිබේ නම් මෙම ක්‍රමයත් යොදා ගැනීමෙන් ලිපියට හොද පිළිවෙලක් සහ කියවන්නාට පහසුවක් ගෙන දෙනු ඇතැයි සිතමි. ඔබට මෙම ලිපියේදී පැවසූ කරුණු තවදුරටත් පැහැදිලි වනු පිණිස මා මෙය යොදා ගත් අයුරු මේ රූපසටහනේ දක්වා තිබේ...

අපිට අවශ්‍ය වර්ණ අපි දන්නා සාමාන්‍ය නමින්ම භාවිතා කිරීම

මේ ලිපිය ඔබට වැදගත් වේවි  වෙබ් අඩවි නිර්මාණයේදී හෝ බ්ලොග් ඉඟි වලදී ඇතැම් අවස්ථාවල වර්ණ සම්බන්ධයෙන් ඇති කරුණු වලදී.  වෙබ් අඩවි නිර්මාණයකදී වර්ණ භාවිතයේදී 147 ක් වූ වර්ණ ප්‍රමාණයක් සාමාන්‍ය නමින්ම භාවිතා කරන්න හැකියාවක් තිබෙනවා. ඒ කියන්නේ අපිට හුරුපුරුදු රතු (red), නිල් (blue), කහ (yellow) වගේ වර්ණ විතරක් නෙමෙයි හිම වල වර්ණය(snow)  එහෙමත් නැන්තම් අල ගෙඩියක තිබෙන වර්ණය (Tomato) වුනත් ඒ නමින්ම භාවිතා කරන්න පුළුවන්. උදාහරණයක් විදියට මේ කේතය බලන්න.

මෙහි රවුම් කර තිබෙන්නේ Hexadecimal ආකාරයෙන් වර්ණ යොදා ඇති ආකාරයයි. ඒත් ඔබට අවශ්‍ය නම් මේ සංකීර්ණ ක්‍රමය වෙනුවට ඔබ කැමති ඔබට හුරු වර්ණ ඔබ දන්නා නමින්ම දෙන්න පුළුවන්. 
Example : #cc66cc වෙනුවට පහත වගුවේ දැක්වෙන වර්ණයක් වන Gainsboro කියන වර්ණයේ නම ඒ සැටියෙන්ම භාවිතා කරන්න පුළුවන්.

මෙන්න මේ කේතයේ ඒ සම්පූර්ණ වර්ණ සමූහය සහ ඒවාට අදාල නම, එහි නියම වර්ණය සහ Hexadecimal ‍කේතය අඩංගුයි. අන්තර්ජාලයේ මේ සම්බන්ධයෙන් ඕනෑ තරම් තොරතුරු තිබුනත් මෙම වගුව ක්‍ෂනිකවම ඔබට පහසු ආකාරයෙන් භාවිතා කිරීමට ඉඩ සලසා දේවි.

https://developer.mozilla.org/en-US/docs/CSS/color_value
http://www.had2know.com/computers/html-css-color-names-chart.html
http://www.w3schools.com/tags/ref_colornames.asp

ඒ වගේම Visual Color Picker කියන මෙම කුඩා මෘදුකාංගය ආධාරයෙනුත් ඔබට කැමති ආකාර‍යේ වර්ණ තනා ගැනීමට හා එයට අදාල Hexadecimal සහ RGB කේතයන් ලබා ගැනීමට හැකියි.  මෙන්න මේ සබැඳි වලින් ඔබට එය download කර ගැනීමට පුළුවන්.

http://www.linxexplorer.com/colorpicker.html
http://visual-color-picker.en.softonic.com/

අකුරු ඇතුලේ රූප සැගවීම

ඔබට මතකද මීට වසරකට පමණ පෙර සත් සමුදුරේ පළවූවා Post එකේ කැමති වචන වලට CSS Tooltip එකක් දෙන ආකාරය කියන ලිපිය. මෙම ලිපියත් එයට ටිකක් සමානයි. ඒත් වෙනසක් තියෙනවා, ඒ තමයි එතනදී වචනය මතට mouse cursor එක ‍‍ගෙන ගියවට දකින්නට ලැබෙන්නේ තවත් වදන් කිහිපයක් වුනාට මෙහිදී ඒ වචනයට හෝ ඡේදයට නෑකම් කියන සේයාරූ එකක් හෝ කිහිපයක් වුනත් දර්ශනය වෙන්න සලස්වන්න පුළුවන්.

මෙන්න මීට කලින් පළ කළ හිට්ලර් ගැන නොදත් කතා හා පින්තූර ලිපියේ ඡේයක් එම ආකාරයට සකස් කළවිට.

ඒකාධිපතිවාදයේ ප්‍රතිමූර්තිය කුමක්ද කියලා‍ ඇසුවොත් බහුතර‍යකගේ අදහසවන්නේ හිට්ලර් පිළිබදවයි. ඒ තරමටම හිට්ලර් පිළිබදව ලෝකය පුරාම රටවල් රාශිකම වාසය කරන්නන් තුල ඇත්තේ බියකරු මතකයක්. ඒ ගැන දොසක් කියන්නත් බැහැ. මොකද ඔහුගේ ආර්යය ජාතිය පිළිබද සංකල්පය නැතහොත් එය තවත් විස්තරාත්මකව "One people, One Germany, One Führer” යන සංකල්පය නිසා ඔහු මෙන්ම ඔහුගේ මඟ ගත් හිට්ලර්ගේ මිනීමරු අනුගාමිකයන් පිරිස මෙන්ම මෙම වියරු අදහස උදෙසා ලෝකයේ රටවල් ගණනාවක අහිංසක මිනිසුන් මිලියන ගණනාවකට සිය ජීවිතයෙන් වන්දිගෙවන්න වුනා සේම එයින් සිදුවූ දේපල හානියත් අතිමහත් .

මෙන්න ඊට අදාල පියවරයන්.

මුලින්ම සුපුරුදු පරිදි Template Designer වල තියෙන Add CSS වලට මේ කේතය ඇතුළු කරන්න. ඊට අදාල පියවර පසුගිය බ්ලොග් ඉඟි ලිපි වල තිබේ.

<style>
.pictip
{
    position:relative;
    /*background:#eaeaea;*/
    display: inline-block;
    text-decoration:none;
    color:black;
    outline:none;
}
.pictip span
{
    visibility:hidden;
    position:absolute;
    top:30px;
    left:5%;
    z-index:999;
    margin-left:20px;
    padding:5px;
    border:2px solid #000;
    opacity:.9;
    background-color:#000;
    box-shadow:#666 1px 1px 1px;
    -moz-box-shadow:#666 2px 2px 2px;
    -webkit-box-shadow:#666 2px 2px 2px;
    -o-box-shadow:#666 2px 2px 2px;
    border-radius:8px;
    -moz- transition:all .5s ease-in;
          color:#fff;
}
.pictip:hover
{   
    border:0;
}
.pictip:hover span
{
    visibility:visible;
}
</style>

ඊට පසුව ඔබට කැමති බ්ලොග් ලිපියකට මෙය යොදා ගන්නා ආකාරය කියන්නම්.

ඔබට අවශ්‍ය ලිපියේදී සාමාන්‍ය ආකාරයට ලිපිය ටයිප් කර ගෙන යන්න. එහිදී යම් තැනකදී මේ ආකාරයෙන් පින්තූරය සඟව හෝ එම ලියූ දෙය වඩාත් තහවුරු වීම පිණිස පින්තූරයක් යෙදීමට අවශ්‍ය නම් HTML mode එක වෙතට යන්න.

(ඒ එක්කම යමක් කියන්න ඕන. මේ කේතයන් යෙදීම ආරම්භ කලාට පසුව ඔබ නැවත Compose mode එකට යන්නේ නැතුව HTML mode එකේ සිටම අදාල ලිපිය සුපුරුදු පරිදි ටයිප් කරන්න. මොකද ඔබ යම් හෙයකින් compose mode එකට ගියවිට ඇතැම් විට blogger වලදී එම html කේතයේ අප යෙදූ විනඥාසයන්ට වඩා වෙනස් දේවල් එකතු වීම හා සමහර කොටස් ඉවත් වීම සිදුවෙනවා. මෙය blogger වල විතරක් නෙ‍මෙයි Wordpress වලටත් පොදු කාරණයක්. ඒ නිසා wordpress වලදී Visual editor ඉවත් කර Text editor පමණක් භාවිතා කරන්න කියන එකත් කිව යුතුයි. එහෙම නැත්නම් සම්පූර්ණ ලිපිය අවශ්‍ය ආකාරයට Compose mode එකේදී ටයිප් කරාට පසුව අවසානයේ මෙවන් effect යොදන්න.)

ඉන්පසු එම වචනයට පෙර මේ කේතය paste කරන්න.

<a class="pictip" href="#">

මෙහිදී ඔබට එම රූපය කිසියම් වෙබ් පිටුවකට අදාල හා වෙබ් පිටුවකට එම වදන ඔස්සේ පිවිසීමටත් අවශ්‍ය නම් මෙහි දක්වා ඇති "#" වෙනුවට අදාල සබැඳිය දෙන්න.

<span> <img src="පින්තූරය සදහා සබැඳිය" width="525" /></span></a>.

width="525" දී ඔබට අවශ්‍ය අගය සටහන් කරන්න.

ඔබගේ වැඩිදුරටත් පහසුව පිණිස මෙහදී යොදාගත් සම්පූර්ණ කේතය නැවත සටහන් කරන්නම්.

<a class="pictip" #"> මෙම effect යෙදිය යුතු වචනය හෝ ඡේදය <span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7HkcpURaz5R2-GXws83tKKeI0CnaxF4BT7iIj5ff7Ymh6WSnFCBCrN5HeSpAeLyeaFTS666KSiSve-irX_hM6tagmcfFM_UdGkGQaSPZIEWrY9AGHt5xZSHg21qaZpuZroQfjkOEvWKE4/s1600/9-3-2011+3-51-29+PM.jpg" width="525" /></span></a>.

මීට කලින් ලියූ රූප තුළ අකුරු සැඟවීම හෙවත් "ඩාවින්ච් ‍කෝඩ්" අළුත් විදියකට - How to hide texts on image ... ලිපියේදී එහි සදහන් ක්‍රමයට අමතරව image එකක link එක ගැනීම පිළිබදව විමසා තිබුනා. එහිදී ලිපියේ සදහන් ක්‍රමයට අමතරව තවත් ක්‍රමයක් කමෙන්ටුවටද ඇතුලත් කරනු ලැබූ බවත් සදහන් කළ යුතුයි.

වෙනස් විදියේ අත්හදා බැලීම් වලට කැමති නම් ඔබ මෙම ක්‍රමයත් අනුගමනය කරල බලන්න. ගැටළු තිබුනොත් එයත් කියන්න...

එදා Photo Enlarge කළේ මෙහෙමයි...

ඔබට මතක ඇතිනේ මීට දින කිහිපයකට කලින් ඉතාලියේ සිටින මිතුරෙකු එවූ පින්තූර අවශ්‍ය වෙලාවට ලොකු කරළ බලන්න හදලා තිබුන හැටි.

මෙන්න ඒ පෝස්ටුව බලල නැත්නම් එයට මඟ  - http://sathsamudura.blogspot.com/2012/09/italy-newzealnd.html

මේ ලිපියෙන් කියන්න යන්නේ එම Effects කැමති නම් ඔබගේ බ්ලොග් අඩවියටත් යොදා ගැනීමට අවශ්‍ය ආකාරයයි.

මුලින්ම සුපුරුදු පරිදි Blogger Template Designer වලට ගිහිල්ල මේ කේතය එතන අලවා ගන්න. (ඒ සදහා අවශ්‍ය පියවර පසුගිය බ්ලොග් ඉඟි ලිපි වල ඇත).

<style> #theArt img { margin-top:20px; margin-left:20px; margin-right:20px; /*width:225px;*/ -moz-transition:all ease 1s; transition:all ease 1s; -o-transition:all ease 1s; -webkit-transition:all ease 1s; -ms-transition:all ease 1s; } #theArt img:hover{ transform: scale(2.75); -moz-transform:scale(2.75); -o-transform:scale(2.75); -webkit-transform:scale(2.75); -ms-transform:scale(2.75); -o-box-shadow: 3px 3px 5px #000000; -webkit-box-shadow: 3px 3px 5px #000000; -ms-box-shadow: 3px 3px 5px #000000; -moz-box-shadow:3px 3px 5px #000; box-shadow: 3px 3px 5px #000000; zoom: 150%; z-index:1; } </style>

දැන් ඔබට අවශ්‍ය ලිපියකදී, අවශ්‍ය පින්තූරයට මෙම පින්තූර ලොකු කර ගැනීමේ පහසුකම යොදා ගන්නා ආකාරය කියන්නම්. මෙහිදීත් සුපුරුදු පරිදි ලිපිය ලියන Compose mode සිට HTML mode ට මාරු වී පින්තූරය තිබිය යුතු තැන මෙම කේතය අලවන්න.

<div id="theArt"><img src="අදාල පින්තූරයේ සබැඳිය" width="මේ සදහා පින්තූරයේ නියම ප්‍රමාණයට වඩා දෙගුණයක් හෝ ඊට අඩුවෙන් විශාලත්වයක් යොදන්න " /></div>

මෙහි අදාල පින්තූරය සදහා සබැඳිය ලබා ගන්නා ආකාරය රූප තුළ අකුරු සැඟවීම හෙවත් "ඩාවින්ච් ‍කෝඩ්" අළුත් විදියකට - How to hide texts on image ... ලිපිය නැවත පරිශීලනයෙන් දැන ගත හැකිය. 

එසේම මෙහි නිල් පැහැයෙන් සදහන් කළ "‍මේ සදහා පින්තූරයේ නියම ප්‍රමාණයට වඩා දෙගුණයක් හෝ ඊට අඩුවෙන් " යන්නට පින්තූරයේ නියම පළලට වඩා කුඩා අගයක් යොදන්න. (උදා: පින්තූරයේ නියම පළල 720px  නම් 250px වැනි අගයක් යොදාගන්න.

එසේම මෙසේ කුඩා කළ පින්තූර කිහිපයක්ම එකම පේලියට යොදාගැනීමට <div id="theArt> හි </div> ‍ට පෙර තවත් image link එකක් ලබා 

මෙන්න මේ ආකාරයට 

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcWEcG2LTUBAHiNj54rQTaZgm67Ji_Omvqt54XSKQVMGtq7ZlnvkSy4Bw_CSsx8lo76CIZHDIU7OdoM9sKRSfu7hqPam2fEy69-6WwJA8GPY4mpZIOYehOzJBIS9yVEOg5-1g5AU82jbZK/s800/7.jpg" width="200" /> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAXI8IymsY0FQI3i1KssVeVi_RtE2rjH0wjyz8JvRvJaV39Drlctiln_Wkv14V0OLbJ92t2Pwi2clSKcmW7EeYEHYWtWQOvVR0bhH9j1F1HSGf9WiRCNqVRVRJf2ci13_AkuPo0dWxzucY/s800/9.jpg" width="200" />

 

දෙන්න. ඔබට මෙය පේලි දෙකකට ‍එසේත් නැත්නම් එක පින්තූරයකට පහළින් අනෙක් ලබා ගැනීම image link එකට පෙර
ලබා දෙන්න.

මෙන්න මේ ආකාරයට

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAXI8IymsY0FQI3i1KssVeVi_RtE2rjH0wjyz8JvRvJaV39Drlctiln_Wkv14V0OLbJ92t2Pwi2clSKcmW7EeYEHYWtWQOvVR0bhH9j1F1HSGf9WiRCNqVRVRJf2ci13_AkuPo0dWxzucY/s800/9.jpg" width="200" />
<br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZd2tCV3QHf9tfAOd8YINNGDcbbzbzMWh5N3_oaIQU3VFlMRCwGhMUvc6uS4u4-o5Q891Y1r23lYlL9VteqD2XsiHOF5FgWnpQcr-cA1_nHuAC_Z88qx4diuggVfDZtaW-1kGBjhUZeUen/s800/12.jpg" width="200" />

ඔබට සමහර විට ගැටළු තිබෙන්නට පුළුවන්. ඒවා විමසන ලෙසද ඉල්ලමින් ලිපිය අවසන් කරමි...

රූප තුළ අකුරු සැඟවීම හෙවත් "ඩාවින්ච් ‍කෝඩ්" අළුත් විදියකට - How to hide texts on image ...

වචනයෙන් විස්තර කළ නොහැකි හා මිළ කළ නොහැකි මෙම සිතුවම කුතුහලය දනවන්නකි. කෙනෙකුට එය අඬන ස්ත්‍රීයකගේය.තවත් කෙනෙකුට ඇය සිනහවෙනවා සේ පෙනේ.තවත් අයෙකු ඇයට දරුවෙකු ලැබෙන්නට සිටින ගැබිනියක බව පවසති.තවත් අයෙකු ඒ ලියනාඩෝ විසින් ඇදි තමන්ගේම චිත්‍රයක් බව පවසති.තවත් අය මෙහි කිසියම් රහස් කේතයන් වගයක් සැගවී පවතිනවායයි පැවසේ. නුතන විසිවන සියවසේදී ප්ලාස්ටික ශල්‍යකර්මයන් සිදුකර ගැනීමට හැකිවීමත් සමග දියුණු බටහිර රටවල ඇතැම් කාන්තාවන් මොනාලිසා රුවට සමාන රුවක් ලබා ගැනීමට ප්ලාස්ටික් ශල්‍ය‍ වෛද්‍යවරුන්ගේ සහය පැතූ බවද විරල පුවත් ඇතැම් විට අසන්නට ලැබුනි. ඒ තරමටම මොනාලිසා මිනිස් සිත වශිකෘත කළාය. ඇතමෙක් මොනාලිසා ගැන කතා ලිවූහ. තවකෙක් මොනාලිසා මෙන් රුව ඇති යුවතියක සිය පෙම්වතිය කරගැනීමට සෙවූහ. තවකෙකු මොනාලිසා ගැන ගීත ලියූහ, ගැයූහ, එම ගී වලට සම්මානද දිනා ගත්තෝය. 1800 මැද භාගය වන විට මොනාලිසා පුරාවෘත්තයකි. 

ලොව අග්‍රණ්‍යම සිතුවම වන මෙය මිල කිරීම පවා එයට කරන අගෞරවයක් වූවත් 2010 දී එහි වටිනාකම ආසන්න වශයෙන් ඇමරිකානු‍ ඩොලර් මිලියන 720 ක් වත් වේ යයි පැවසේ. වර්ථමානයේ පැරිසියේ ලූවර් කෞතුකාගාරයේ තැන්පත්ව ඇති මෙය එහිදී හදුන්වනුයේ Painting No. INV 779 යන කේතයෙනි. 

ලියනාඩෝගේ මරණයෙන් පසුව මෙම මොනාලිසා සිතුවම අයිති වුයේ එවකට ප්‍රං‍ශයේ රජකම් කළ I වන ෆ්‍රාන්සිස් රජු හටයි. ඔහු මෙය තමන්ගේ නානකාමරයේ එල්ලා තැබූ බව පැවසේ. සෑහෙන්න කාලයක් මෙසේ නානකාමරයේ බිත්තියේ එල්ලා තැබුන අතර රජුගේ ස්නානයට භාවිතා කළ උණු ජලයේ දුම වැදීමෙන් පින්තූරයේ ඇතැම් ස්ථානවල ඇති සුළු හානිවීම් සිදුවීමට හේතුවිනැයි ප්‍රවීණයෝ පවසති.

ඔබට බැළු බැල්මට පේ‍න්නේ මෙතන මොනාලිසාගේ රූපය විතරක් නේද? ඒත් ඒ පින්තූරයේ වම් පසටවන්නට mouse pointer ගෙනගිය විට ඒ පින්තූරයට අදාල විස්තර රැසක් දැන ගැනීමට හැකි බව පෙනේවි. මෙන්න මේ දෙය ඔබගේ බ්ලොග් අඩවියේ අවශ්‍ය විටක කර ගන්න ආකාරය තමයි මම අද කියලා දෙන්න යන්නේ.

මුලින්ම මෙන්න මේ කේතය Blogger Temple Designer වල දී Add CSS වලට එකතු කරගන්න. (මේ ගැන අවශ්‍ය පියවර පසුගිය "බ්ලොග් ඉඟි" ලිපි වලින් දැක ගත හැකියි.)

<style> .details { position:absolute; top:10px; opacity:0; transition-delay: 1s; transition-timing-function: ease-in-out; -moz-transition-timing-function:ease-in-out; -moz-opacity:0;transition-delay:1s; } .details:hover { margin-left:10px; opacity:.75; background-color:yellow; text-align:left; color:black; } .details.size { width:40%; height:92%; padding : 5px 5px 5px 5px; overflow:scroll; } .pic { position:relative; } </style>

දැන් තියෙන්නේ අපි යම් පින්තූරයක් සදහා මේ විදියට අවශ්‍ය අවස්ථාවේදී පමණක් තොරතුරු දිස් වන සේ ලබා ගැනීමට සැකසීමයි.

ඒ සදහා සුපුරුදු පරිදි Post Editor  එකේදී HTML mode  එකට ගිහිල්ල මෙන්න මේ කේතය එම පින්තූරය අවශ්‍ය තැන අලවා ගන්න.

<div class="pic"> <img src="link of the image" width="Suitable width for you image" /> <br /> <div class="details size">අදාල පින්තූරය හා සම්බන්ද විස්තරය</div></div>

දැන් ඔබට ටිකක් මහන්සිවෙන්න වෙනවා මේ වැඩේ කරගන්න. මුලින්ම මෙහි දක්වාතිබෙන link of the image සදහා අපි මුලින්ම picasa වලට image එකක් upload කරල ඒකේ link එක අරගෙන මේ මෙතනට Paste කර ගමු.

ඒක කරගන්නේ මුලින්ම https://picasaweb.google.com/home වෙත යන්න.ඉන්පසුව upload හරහා ගොස් දැන් තිබෙන album එකකට හෝ අළුතින් album එකක් හදා ගෙන එය තුලට image එක upload කරගන්න/ මේ සදහා භාවිතා කරන පින්තූරය ටිකක් විශාල එකක් වෙන එක හොදයි. ඉන්පසු එම Album එකේ Actions වලින් Album Properties තෝරන්න.

මෙහිදී ලැබෙන Window එකේදී Visibility සදහා Public on the web තෝරා Save Changes තෝරන්න.

දැන් එම album එකෙහි තිබෙන ඔබ upload කරන ලද පින්තූරය මත click කර එහිදී වම් පසින් තිබෙන link to this photo යන්න select කළ විට මෙම මෙනුව ලැබේවි.

දැන් මෙහි Hide album link යන්න ටික් කොට select size යන්නට විශාලතම අගය තෝරා Embedded image යන්නට අදාල link එක තෝරා එය copy කර ගන්න. එය notepad හෝ ඔබ කැමත ස්ථානයකට paste කර එහිදි මෙම රූපයේ කහපාටින් සලකුණු කර තිබෙන කොටස උදාහරණයක් ලෙස සැලකිල්ලට  ගෙන ඔබ ලබා ගත් කේතයේදීද මෙම කොටස Copy කර මෙහි දක්වා ‍link of the image තිබෙන සදහා යොදා ගන්න.

ඉන්පසු ඔබගේ බ්ලොග් එකේ පෝස්ටු ලිවීමට ලබා දී ඇති පළලට සරලන පරිදි රූපයේ පළලද මෙහි දක්වා ඇති Suitable width for you image තැනට සුදුසු අගයක් යොදන්න. එවිට උස එයට ගැලපෙන සේ ඉබේම සතස් වේ.

ඉන්පසු අදාල පින්තූරය හා සම්බන්ද විස්තරය සදහා ඔබට අවශ්‍ය තොරතුරු ලබා දෙන්න. දැන් ‍ඔබ මෙම පෝස්ටුව publish කර එහි ඔබ මෙම උපක්‍රමය යෙදූ රූපයේ වම්පසට වන්නට mouse cursor  ගෙන ගිය විට ඔබ සගවා තිබෙන තොරතුරු දිස්වේවි.

එසේ නම් මෙම ලිපිය අවසන් කරන්නම්. සමහර විට ඔබට මෙම ලිපියට ටිකක් ව්‍යාකූල වගේ පෙනේවි. යම් ගැටළුවක් ආවොත් කියන්න. ඒවාට විසදුම් සහ මෙහි යම් යම් වෙනස් කම් කිරීමට හැකි නමුත් ඒවාද සදහන් කළහොත් ඔබට තවත් මෙම ලිපිය සංකීර්ණ වෙන නිසා ඒවාද අවශ්‍ය වුවහොත් සදහන් කරන්නම්...

කතා ඇතුලේ තවත් කතාවක් ලිවීම - Writing thinsgs insidide another things -

අද ලිපියත් ඔබට බ්ලොග් ලිවීමේදී ප්‍රයෝජනවත් වේ යයි අදහස් කරනවා. මුලින්ම අද මේ හදුන්වාදෙන්න යන දෙය ඔබට යොදාගත හැකි අවස්ථාවක් සදහන් කරනවා නම්,  අප ලියන බ්ලොග් පෝසට් එකක් ඇතුළේ එම ගලාගෙන යන කතාව හෝ යම් සිද්ධියට බලපෑමක් නොවන අයුරින් ප්‍රධාන ලිපියට ඍජුව හෝ වක්‍රව හෝ යම් ඔබගේ අදහසක් හෝ විස්තරාත්මක සටහන් කිරීමේ පහසුකම ලැබෙනවා. මේ භාවිතයට අමතරව තවත් ඔබට විවිද භාවිතයන් සමහර විට සිතේවි. ඒවා ඉතින් අවස්ථානෝචිතව භාවිතය ඔබට භාරයි.

මෙන්න මේකයි කරන්නේ. ඔබට මතක ඇතිනේ මීට කලින් බ්ලොග් ලිපියක යම් අවශ්‍ය තැනකට Box එකක් යොදාගන්න ආකාරය පැවසුවා.

ඒත් මෙහිදී අප යොදාගන්නා Box එකට අසුරාගත හැකි ප්‍රමාණයට වඩා වචන තිබුනොත් Box එකට පිටතටත් ඒවා පැමිණෙනවා. ඉතින් අද කරන්නේ මේ Box එකට Scroll Bar එකක් එකතු කිරීම මගින් කලින් යොදගත් ප්‍රායෝගික අවස්ථාවන්ට වඩා වෙනස් ආකාරයෙන් භාවිතා කිරීමයි.

මෙම උපයෝගීතායත් ක්‍රම දෙකකට කර ගන්න පුළුවන්. පළමු ක්‍රමය තමයි Add CSS වලට එකතු කිරීම.නැත්නම් අවශ්‍ය ස්ථානයේදී HTML mode වලදී එම box එක ලබා ගැනීමට අවශ්‍ය කේතය ඒ ඒ වෙනස්කම් ඇතිව ලිවීම.

මුලින්ම Add CSS වලට CSS කේතය එකතු කරන හැටි කියන්නම්. මෙයට අවශ්‍ය මූලික පියවරයන් පසුගිය

බ්ලොග් ඉඟි

ලිපි වලින් දැන ගැනීමට පුළුවන්.

මෙන්න කේතය

<style> #box2{ background-color:#CCFFFF; overflow:auto; width:500px; height:200px; border:double; border-bottom-style:outset; padding-left:5px; padding-right:5px; text-align:justify; } </style>

ඉන්පසුව කරන්නට තියෙනනේ අපි ලිපියක් ලියන විට එහි HTML mode එකට ගිහිල්ලා. මෙන්න මේ විදියට කේතයන් හා අවශ්‍ය ඡේදයන් භාවිතා කරන්න

<div id="box2"><p>ලිපියට බලපෑමක් නොවන අයුරින් එකතු කළ යුතු ඡේදය</p></div> 

මෙන්න මේ වගේ දෙයක් ඔබට දැක ගැනීමට ලැබේවි.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

මේ දැක්වෙන Properties ඔබට අවශ්‍ය නම වෙනස් කර ගැනීමට පුළුවන්. එසේම දක්වා නැතත් border සහ border-bottom-style කැමති නම් වෙනස් කිරීමට හෝ ඒවා ඉවත් කර ‍මුල් කේතය භාවිතා කිරීමත් පුළුවන්.

දැන් ඔබට ADD CSS වලට කේතය ඇතුළු කරන්නේ නැතුව අවශ්‍ය ස්ථානයේදී CSS code එකම ලිවීමෙන් මෙය කරන හැටි දක්වමි.

<div id box style="overflow: scroll; width:520px; height:200px; background-color:#CCFF99; padding-left:10px; padding-right:10px; border:thin; border-style:ridge;"><p>අවශ්‍ය ඡේදය</p></div>

මේ කැමති ආකාරයකට ඔබ භාවිතා කර බලන්න...

කුරුමිණි අඩු ලොකු කර පෙන්වීම - Zooming Effect

ඔබගේ බ්ලොග් එකේ අකුරු විශාලනය කර තිබෙන ප්‍රමාණය ඒ ඒ අවස්ථාවල ප්‍රමාණවත් නොවන්නේ නම් ඒ සෑම විටකම අකුරු ප්‍රමාණය වෙනස් කිරීම එක් බ්ලොග් ලිපියකට හොද ප්‍රතිඵල ගෙන දුන්නට සමහර විට අනෙක් ලිපි වලට එය එතරම් සුදුසු නොවෙන්න පුළුවන්. මේ නිසා අවශ්‍යනම් කෙනෙකුට ලිපියක් කියවන අවස්ථාවේම අකුරු ආයාසයකින් තොරවම ලොකු කරල බලන්න පුළුවන් නම් ඒක පහසුවක් වේවි. මේ ලිපියෙන් ඒ කාර්යය කර ගන්නා ආකාරය ඔබට දැන ගැනීමට හැකියාව ලැබේවි. ඒ වගේම යම් වැදගත් සබැඳියක් ව‍ගේ දෙයක් ටිකක් අවධාරණයෙන් ඒ මතට Mouse pointer එක ගෙන ගිය විට පෙන්වන්නත් මෙම ක්‍රමය යොද ගන්නට පුළුවන්.

සුපුරුදු ආකාරයටම මේ CSS code එකත් Blogger Template Designer හිදී Add CSS වලට එකතු කර ගන්න ඕන. ඉතින් මේ ‍මොහොතේත් කියන්නේ කලින් ලියන ලද බ්ලොග් ඉඟි තේමාව යටතේ ලිපි පරිශීලනයෙන් එම කාර්යයට ඇවසි මූලික පියවරයන් දැනගැනීමට හැකියි.

මෙන්න මේ කේතය තමයි ඉහත කී ස්ථානයට අලවා ගන්න ඕන.

<style> #text:hover{ font-size:2em; } </style>

මෙහිදී 2em ලෙස දක්වා ඇත්තේ පවතින අකුරු ප්‍රමාණයට වඩා දෙගුණයක් විශාලත්වයෙන් අකුරු පෙන්වන ලෙසයි. ඔබ කැමති නම් එම අගයට කැමති අගයක් දී අත්හදා බලන්න.
දැන් මෙන්න මේ ආකාරයට එය ඔබට අවශ්‍ය ලිපියේ අවශ්‍ය කැනට යොදාගන්න. එය සදහා සුපුරුදු පරිදි HTML mode එකේදී මේ කේතය ඇලවීමෙන් එම ජේදයක් මතට Mouse pointer එක ගෙන ගිය විට විශාල කර බැලිමට හැකියි.

<div id="text"><p>අවශ්‍ය ඡේදය</p></div>

මෙන්න එවිට දිස්වන ආකාරය :

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

ඔබට යම් සබැඳියක් මේ ආකාරයෙන් විශාලනය කර පෙන්වීමට මේ ආකාරයට කේතය  HTML mode එකේදී භාවිතා කරන්න.

<div id="text"> <a href="httt://www.google.lk">Google</a></div> <div id="text">

මෙන්න එවිට :

Google

<a href="httt://www.google.lk">Google</a> වෙනුවට ඔබ කැමති සබැඳිය ලබා දෙන්න.

බලන්න මේ උපක්‍රමත් ඔබගේ බ්ලොග් ලිවීමේ කාර්යයට ප්‍රයෝජනවත් වේවිද කියා...

බ්ලොග් පෝස්ට් එකක අකුරු අවශ්‍ය විට Blink වීමට සකසා ගැනීම - How to Blink Your Blog Text -

මේ පෝස්ට් එකත් බ්ලොග් එකේ අකුරු සම්බන්ධවයි. මෙහිදී කරන්නේ අපිට අවශ්‍ය ස්ථානයක්, උදාහරණයක් විදියට කියනවා නම් යම් මාතෘකාවක්, කැපී පෙනෙන සේ යමක් හැඟවිය යුතු තැනක් හෝ යම් සබැඳියක් වඩා කැපී පෙනෙන සේ මෙන්න මේ ආකාරයට blink කර ගැනීමේ ක්‍රමය තමයි කියලා දෙන්න යන්නේ.

මේකත් ක්‍රම දෙකකට කර ගන්නට පුළුවන්. අවශ්‍ය නම් ඕනෑම අවස්ථාවක ප්‍රයෝජනයට ගත හැකි ආකාරයෙන් class එකක් Blogger Template Designer වලදී Add CSS වලට එකතු කිරීමෙන් හෝ පෝස්ට් එකේ අවශ්‍ය ස්ථානයේදී HTML Mode එකේදී CSS code එකක් භාවිතයෙන් මේ කාර්යය කර ගැනීමට සැකසිය හැකියි.

පළමුවෙන්ම Add CSS වලට class එකක් එකතු කරන විදිය බලමු. සුපුරුදු පරිදි මෙයට අවශ්‍ය මූලික පියවරයන් වන අදාල ස්ථානයට පිවිසීම
බ්ලොගයේ අකුරු ලොකු පොඩි කරගන්න ලේසියි කියල හිතෙන උපක්‍රමයක්...

සහ 

පින්තූර වලට Bump Effect එකක් දෙන්න කැමතිද?

යන පෝස්ට් වලින් දැන ගැනීමට පුළුවන්. 

ඉන්පසු එම ස්ථානයට මෙන්න මේ කේතය අලවන්න.

<style> .blink_Text{ text-decoration:blink; } </style>

ඉන්පසුව යම් ස්ථානය අකුරු blink කර ගන්න ඕන නම් මෙන්න මේ විදියට HTML Mode එකේදී භාවිතා කරන්න.

<span class="blink_Text">මෙන්න Blink විය යුතු අකුරු</span>

මෙන්න Blink විය යුතු අකුරු

ඔබට යම් සබඳැයික් මේ විදියට Blink කර ගන්න ඕන නම්; උදාහරණයක් ලෙස Google.lk සබැඳිය භාවිතා කර ඇත.

<span class="blink_Text"><a href="httt://www.google.lk">Google</a></span>

Google

ඔබට යම් මාතෘකාවක් මේ විදියට Blink කර ගන්න ඕන නම්;

<span class="blink_Text"><h1>මාතෘකාව</h1></span>

‍
එතකොට මෙන්න මේ විදියට ලැබේවි -

මාතෘකාව

ඒ වගේම ලිපියේ ආරම්භයේ කියන ලද දෙවන ක්‍රමය වන Class එකක් භාවිතා කරන්නේ නැතුව අවශ්‍ය ස්ථානයේදී blink කර ගන්නෙ මේ විදියටයි.

<span style="text-decoration: blink;"><a href="https://www.google.lk/">https://www.google.lk/</a></span>

ප්‍රතිඵලය කලින් පරිදිමයි -
https://www.google.lk/
(මෙහි <a href="https://www.google.lk/">https://www.google.lk/</a> යන්න දක්වා ඇත්තේ උදාහරණයක් ලෙස වන අතර එයට ඔබට මුලින් පැවසූ ආකාරයට යම් වචනයක්, මාතෘකාවක් හෝ කැමති ස්ථානයකට උචිත ආකාරයෙන් උපයෝගී කරගන්න).
දැන් ඔබට මේ දේවල් අත්හදා බැලීමේ අවස්ථාවයි...

ඔබ බ්ලොග් එකේදී භාවිතා කරන අකුරු ලස්සන කර ගන්න කැමතිද? How to change default Unicode font for you blog post area -

ඔබ බ්ලොග් පෝසට් එකක් ලියන අවස්ථාවල සිංහල යුනිකෝඩ් වලදී භාවිතා වෙන්නේ "Iskoola pota" කියන Font වර්ගය නේද? ඒත් ඒ අකුරු එතරම් ලස්සන නැහැ කියල ඔබට කවදා හෝ හිතිලා තිබෙනවාද? මට නම් කිහිප වතාවක්ම සිතුනා.

"Iskoola pota" Font එකට අමතරව තවත් සිංහල යුනිකෝඩ් සම්මත අකුරු වර්ග කිහිපයක් තිබෙනවා. මේ ලිපියේදිත් එම අකුරු වර්ගය වෙනුවට දැනට සිංහල සම්මත යුනිකෝඩ් අකුරු වලදී ලස්සනම අකුරු වර්ගය සේ සැලකෙන "Malithi web" කියන අකුරු වර්ගය භාවිතා කර තිබෙනවා.මෙන්න ඒවා ගැන විස්තර සහ ඒවා ඔබට ලබා ගැනීමට යායුතු වෙබ් අඩවිය.

http://www.siyabas.lk/downloads
http://www.icta.lk/en/programmes/pli-development/104-local-languages-initiative-/1090-sinhala-stylized-fonts.html

මුලින්ම ඔබ මෙතනින් කැමති Font එකක් හෝ කිහිපයක් බාගත කරගෙන එය ඔබගේ පරිගණකයට ස්ථාපනය කර ගන්න. Control Panel ඔස්සේ ඒ කාර්යය කර ගැනීමෙන් අනතුරුව පෙර ලිපි කිහිපයකම කියූ පරිදි Template Designer වල Add CSS වලදී CSS කේතයක් අලවා ගැනීම තමයි මෙතනදිත් කරන්නේ. එවිට පෙර සහ ඉදිරියේ ලියන ලිපි සියල්ලේදීම පොස්ට් එකේ ලියන අකුරු පමණක් වෙනස් වී තිබේවි. මේ සදහා CSS code Add CSS තුලට කේතය යෙදවීම සදහා ‍එම ස්ථානයට යන ආකාරය පහත පෝස්ට් නැවත බැලීමෙන් ඔබට දැනගැනීමට හැකි නිසා ඒ පියවරයන් නැවත මෙහි කියන්නට යන්නේ නැහැ.

බ්ලොගයේ අකුරු ලොකු පොඩි කරගන්න ලේසියි කියල හිතෙන උපක්‍රමයක්...

සහ 

පින්තූර වලට Bump Effect එකක් දෙන්න කැමතිද?

දැන් කරන්න තියෙන්න මේ පහතින් දැක්වෙන කේතය මෙහි ඇලවීමයි (paste). තව දෙයක් කියන්න ඕන මෙතනදී අපි  Malithi web කියන Font නම භාවිතා කළාට ඔබට ඕන නම් ඊට වඩා වෙනස් අකුරු වුනත් භාවිතා කරන්නට පුළුවන්. ඒ සදහා එම අකුරු වර්ගයට අදාල නම පමණයි වෙනස් කරන්න ඕන.

<Style> .post { font-family: Malithi web; } </style>

ඒවගේම මේ අකුරු වර්ගයෙන් ටයිප් කරගෙන යන අතරතුරේ ඔබට වෙනත් සිංහල අකුරු වර්ගයක් යම් ස්ථානයක පමණක් වෙනස් කරන්න ඕන නම් ඒකටත් ක්‍රමයක් තියෙනවා. මෙන්න ඒකට මඟ ඔබ ලියන ලිපියේදී Compose mode එකේ සිට HTML mode එකට යන්න. දැන් ඔබට අකුරු වෙනස් කිරීමට අවශ්‍ය ස්ථානයේ ආරම්භය වෙත ගොස් පහත දැක්වෙන අයුරින් කටයුතු කරන්න.

<span style="font-family: Dinamina;">ඔබට අකුරු වෙනස් කිරීමට අවශ්‍ය ඡේදය හෝ වාක්‍ය </span>

මෙහි Dinamina යන අකුරු වර්ගය යොදා ගෙන ඇත්තේ මෙම නිදර්ශනය පෙනවීමටයි. එයට ඔබ කැමති සහ ඔ‍බගේ පරිගණකයේ ස්ථාපනය කර ඇත යුනිකෝඩ් අකුරු වර්ගයක නමක් යොදන්න. දැන් ඔබටම පෙනේවි ඔබ කළින් භාවිතා කළ එතරම් හැඩවැඩ නැති "Iskoola pota" Font ට වඩා කොයිතරම් වෙනසක් ඇති වෙලාද කියන එක.

ඔබගේ පහසුව සදහා ඒ කියන්නේ තවත් මේ අකුරු පිළිබදව දැන ගැනීමට උපකාරී විය හැකි වෙබ් අඩවි කිහිපයකම ලිපිනයන් පහත දක්වා තබන්නම්....

http://www.wideshaseva.com/home/free_sinhala_fonts.html

http://blog.indranama.com/2009/08/sinhala-font-smoothing/

https://groups.google.com/forum/#!topic/sinhala-unicode/NwyIphu0CLc%5B1-25%5D

http://lankanthoughts.blogspot.com/2009/07/unicode.html

http://blog.indranama.com/2009/09/sinhala-unicode-fonts/

http://www.wazu.jp/gallery/Fonts_Sinhala.html

http://www.kaputa.com/uniwriter/

http://blog.gishan.net/archives/2011/04/how-to-type-sinhala.aspx

 

අවශ්‍ය වූ විට පෙට්ටියක් තුලට අකුරු කොටු කිරීම

මේ ලිපියෙන් කියන්නට යන්නේ අපගේ බ්ලොග් ලිපි නිර්මාණයේදී ප්‍රයෝජනවත් වෙන කරුණක් පිළිබදවයි. ඔබට මතකද කලින් ලිපියේ සුළු වෙනසක් තිබුන බව. ඒ ගැන එතරම් මතකයක් හෝ දැනීමක් නැතිනම් මෙන්න ඒ ලිපිය නැවත පහසුවෙන්ම බැලීමට එහි සබැඳිය http://sathsamudura.blogspot.com/2012/07/blog-post_09.html.

ඔබ දැක්කද වෙනදා දකින පසුබිමට වඩා වෙනස් පැහැයකින් අකුරු කොටු කර තිබෙන බව. මේ කොටුවකට අකුරු කොටු කිරීම CSS පිළිබදව දන්නා අයට නම් මහ දෙයක් නොවෙයි. ඒත් ඒ ගැන වැටහීමක් නැතිනම් මෙහි දැක්වෙන සරළ ක්‍රියාකාරකම් ඔස්සේ ඔබගේ ලිපියේ යම් කැපී පෙනෙන තැනක අකුරු මේ වගේ කොටුවක දැක්වීම ටිකක් වෙනස් අත්දැකීමක් වේවි.

මේක ක්‍රම දෙකකට කරගන්නා ආකාරය කියන්නම්. මුල්ම ක්‍රමය තමයි Template Designer වල Add CSS වලදී CSS කේතය paste කර එම කේතයේ ක්‍රියාකාරීත්වය බ්ලොග් ලිපියේ අවශ්‍ය ස්ථානයේදී HTML editor mode එකේදී තවත් සුළු HTML කේතයක් තුලට අකුරු රැගෙන ඒමෙන් සිදුකිරීම. මේ සදහා CSS code Add CSS තුලට කේතය යෙදවීම සදහා ‍එම ස්ථානයට යන ආකාරය
බ්ලොගයේ අකුරු ලොකු පොඩි කරගන්න ලේසියි කියල හිතෙන උපක්‍රමයක්...

සහ 

පින්තූර වලට Bump Effect එකක් දෙන්න කැමතිද?

යන ලිපිවල තිබෙන නිසා එම මූලික පියවර මෙහිදීත් කියන්නට යන්නේ නැහැ. එම ස්ථානයට ඇලවිය යුතු කේතය සදහන් කරන්නම්. මෙම කේතය CSS class එකක් විදියට තියෙන නිසා ඕනෑම විටක නැවත නැවත ප්‍රයෝජනයට ගන්න පුළුවන්. හැබැයි එක අවාසියක් තිබෙනවා ඒ තමයි  ඒ සෑම අවස්ථාවකම ලැබෙන කොටුවේ තිබෙන්නේ එකම වර්ණය, රාමුවේ ඝනකම වගේ Properties ඒ ආකාරයෙන්මයි. ඔබට වෙනස් ආකාරයේ Box කිහිපයක් ලබා ගන්න නම් Box 1, Box 2 ලෙස සුළු සුළු වෙනස්කම් Properties වල සිදුකරන ලද කේත කොටස් කිහිපයක් අලවා ගන්නට සිදුවේවි මේ ක්‍රමයෙන් මෙම Box එක නිර්මාණය කරන විටදී නම්. මෙන්න කේතය ;

.box{
padding:5px 5px 5px 5px;/*Border සිට අකුරු වලට ඇති දුර*/
background-color:#FFFFCC;/*පසුබිම් වර්ණය*/
border: 2px double #336600;/*Border ඝනකම එහි ස්වභාවය හා වර්ණය*/
width:520px; /*මෙම Box එකේ පළල*/
}

මින් පසුව තිබෙන්නේ යම් ලිපියකදී ඔබට මෙම පෙට්ටිය තුලට අකුරු කොටු කරන්න ඕන ස්ථානයේදී මෙන්න මේ පියවර අනුගමනය කිරීමයි.

• අදාල ලිපියේදී Compose mode සිට HTML mode වෙත ගොස් අදාල ඡේදය ඇති ස්ථානයේ මුලට යන්න.

• එතනදී මෙම කේතය පිටපත් කරන්න‍.
  <div class="box"> මෙහිදී අවශ්‍ය ඡේදය සම්පූර්ණයෙන්ම paste කරන්න.</div>

‍

• මෙහි රතු පැහැයෙන් දිස්වන වචන වෙනුවට ඔබට අවශ්‍ය ජේදය අලවන්න. 

• දැන් Preview කළ විට ඔබගේ එම අවශ්‍ය ඡේදය හෝ කොටස ‍කොටුව තුල දිස්වනු ඇත.

මේ ක්‍රමය නැතුව ඔබට අවශ්‍ය මොහොතේදී ඒ ඒ අවස්ථාවට සුදුසු ආකාරයේ වෙනස් කම් ඇති box එකක් නිර්මාණය කර ගැනීමේ හැකියාවකුත් තිබෙනවා.

මෙන්න ඒ ක්‍රමයත්, මෙහිදී මුල් පියවරයන් වූ Add CSS සදහා කේතයක් එකතු කිරීම සිදුකරන්නේ නැහැ. මුලින්ම අදාල ලිපියේදී Compose mode සිට HTML mode වෙත ගොස් අදාල ඡේදය ඇති ස්ථානයේ මුලට යන්න.

දැන් මෙම කේතය එම ස්ථානයේ Paste කරන්න.

<div id="box" style="background-color: #cc66cc; border-color: #009900; color: #330066; padding: 5px 5px 5px 5px; width: 550px;">The text</div>

ඔබට අවශ්‍ය ආකාරයට රතු පැහැහෙන් දක්වා තිබෙන අගයන් වෙනස් කිරීම කළ හැකියි. ඒ වගේම The text ලෙස දම් පැහැයෙන් යුතු වචන වෙනුවට ඔබට කොටුව තුලට රැගෙන ඒමට අවශ්‍ය වචන යොදන්න.

Post එකේ කැමති වචන වලට CSS Tooltip එකක් දෙන ආකාරය

ඔබ සමහර වෙලාවට වෙබ් අඩවි වල දැක ඇති සමහර වචන සාමාන්‍ය ආකාරයට වඩා වෙනස් ආකාරයට කරල තියෙන highlight මෙයින් විස්තර කෙරන දෙය වචනය උඩට රැගෙන ගියාම එයින් තව විස්තරයක් පේනවා ඔබ දැක ඇති. උදාහරණයක් විදියට ඉස්සෙල්ලා සදහන් කල highlight කියන වචනය උඩට යන්න එවිට මේ පැවසූ දෙය පැහැදිලිවම පෙනේවි.

මේක කරගන්නේ මෙහෙමයි. මෙන්න මේ කේතය Design ----> Template Designer ----> Advanced -----> ADD CSS වලට paste කර ගන්න.

.tooltip
{
position: relative;
background: #eaeaea;
cursor: help;
display: inline-block;
text-decoration: none;

color: #222;

outline: none;
}

.tooltip span
{
visibility: hidden;
position: absolute;
bottom: 30px;
left: 50%;
z-index: 999;
width: 230px;
margin-left: -127px;
padding: 10px;

border: 2px solid #ccc;

opacity: .9;

background-color: #ddd;

background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
-moz-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
text-shadow: 0 1px 0 rgba(255,255,255,.4);
}

.tooltip:hover
{
border: 0; /* IE6 fix */
}

.tooltip:hover span
{
visibility: visible;
}

.tooltip span:before,
.tooltip span:after
{
content: "";
position: absolute;
z-index: 1000;
bottom: -7px;
left: 50%;
margin-left: -8px;

border-top: 8px solid #ddd;

border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 0;
}

.tooltip span:before
{

border-top-color: #ccc;

bottom: -8px;
}

මේ කේතයේ කහපාටින් දක්වා ඇත්තේ ඔබට අවශ්‍ය ආකාරයට මෙම tooltip එකට අදාල වර්ණයන් වෙනස් කර ගත හැකි ස්ථාන. ඔබට එම වර්ණයන්ට අදාල කේතයන් දැන ගැනීම සදහා මෙම RGB වර්ණයන් සදහා http://www.seoconsultants.com/css/colors/rgb වෙබ් අඩවියටද hex color values සදහා http://www.theodora.com/html_colors.html වෙබ් අඩවියටද පිවිසීමෙන් දැනගන්න පුළුවන්. ඒ වගේම ඔබට CSS පිළිබද යම් දැනුමක් තිබෙනවා නම් මෙම කේතයේ අගයන් වල තවත් වෙනස් කම් කිරීමෙන් තමන්ට ගැලපෙන විදියට මෙය සකස්කරගන්නත් හැකියි.

මෙන්න මේ කේතය තමයි Edit HTML ගිහිල්ල අපි type කරපු වචනයට tooltip එක ගන්න දෙන්න අවශ්‍ය

<a href="#" class="tooltip">
Tooltip එක යෙදිය යුතු වචනය
<span>මෙයින් විස්තර කෙරන දෙය</span>
</a>

දැන් පෙර පෙන්වපු highlight කියන වචනයට tooltip එකක් ගන්න භාවිතා කලේ මෙන්න මේ විදියටයි.
ඔබ සමහර වෙලාවට වෙබ් අඩවි වල දැක ඇති සමහර වචන සාමාන්‍ය ආකාරයට වඩා වෙනස් ආකාරයට කරල තියෙන <a href="#" class="tooltip">highlight <span>මෙයින් විස්තර කෙරන දෙය</span></a> වචනය උඩට රැගෙන ගියාම එයින් තව විස්තරයක් පේනවා ඔබ දැක ඇති.

මේ දෙය කරගන්නා ආකාරය ටිකක් සංකීර්ණවගේ පෙනුනත් එය අවධානයෙන් කලොත් අමාරුවෙන එකක් නැහැ...

බ්ලොග් එකට slide show presentation එකක් එකතු කර ගන්නා ආකාරය..

අපේ බ්ලෝග් පෝසට් එකකට සමහර වේලාවට මෙන්න මේ වගේ slideshow presentation එකක් එකතු කර ගන්න අවශ්‍යවුවිට එය කරගන්නා ආකාරය තමයි අද පෙන්වන්න බලාපොරොත්තුවෙන්නේ.




මුලින්ම Slideshow එකට ගන්න බලාපොරොත්තුවෙන පින්තූර ඔබලාගේ Picassa ගිණුමට අදාල https://picasaweb.google.com/home වෙත Upload කර ගත යුතු අතර එයට සුදුසු Album නමක් ලබා දී එය සිදුකරගන්න.

ඉන් පසුව එම album එක select කර එය තුලට ගොස් එහි "link to this album" යන්න select කරන්න.

දෙවනුව එහිදී ලැබෙන "Embed Slideshow" යන්න Select කරන්න.

මෙහිදී පහත දැක්වෙන window එක දක්නට ලැබෙන අතර එහි ඊත‍ලයෙන් පෙන්වා ඇති Slideshow option කැමති ආකාරකට සකස් කර ‍ගෙන රවුමෙන් දක්වා ඇති කේතය පිටපත් කර ගෙන Done Button එක click කරන්න.

දැන් මෙම පිටපත් කරගත් කේතය ඔබගේ බ්ලොග් පෝස්ටයේ අවශ්‍ය තැනට paste කර ගැනීමට පෝස්ටයේ Edit HTML වෙත ගොස් paste කරගන්න. නැවත Compose mode එකට පැමිනි පසු අදාල slideshow එක ක්‍රියාත්මක වන අයුරුද ඔබට දැක ගත හැක.

වැඩියෙන්ම කමෙන්ටු ආවේ මොන posts වලටදැයි Sidebar එකේ පෙන්වමු...

අපේ බ්ලොග් එකේ ජනප්‍රියම බ්ලොග් සටහන් මොනවද කියල Sidebar එකේ පෙන්වන්න Gadget එකක් තියෙනවානේ. මෙන්න වැඩියෙන්ම කමෙන්ටු වැටිල තියෙන්නේ මොන post වලටදැයි පෙන්වන්නත් Gadget එකක්.

මෙන්න ඒකට ඕන කේතය. මේක Design -----> Add Gadget-------> HTML/JAVA  Script කියන එක අ‍රගෙන paste කරගන්න.

home_page කියන එකට ඉදිරියෙන් රතුපාටින් දක්වල තියෙන url එක වෙනුවට ඔයගොල්ලන්ගේ blog එකේ url එක දෙන්න.

numposts කියන එක ඉදිරියෙන් කහපාටින් දක්වා ඇති අගයට කොපමණ බ්ලොග් පෝස්ට් සංඛ්‍යාවකින් මෙයය ගණනය කරන්න ඕනද යන්න ඔබට කැමති අගයක් දෙන්න.

maxshowresult කියන තැනට ඉදිරියෙන් තැඹිලි පාටින් ඇති අගය සදහා ඔබගේ බ්ලොගයේ sidebar එකේ කොපමණ post ගණනක් පෙන්වන්න ඕනද කියන එකටත් කැමති අගයක් දෙන්න පුළුවන්.


<script language='javascript'>
aBold = true;
numposts=200;
maxshowresult=10;
home_page = "http://sathsamudura.blogspot.com/";
</script>
<script type='text/javascript'>
//<![CDATA[
var postTitlear=new Array();var postUrlar=new Array();var postCommentar=new Array();var totalpost;document.write("<ul>");function showrecentposts(j){var a=j.feed.entry.length;totalpost=a;for(var f=0;f<a;f++){var h=j.feed.entry[f];var c=h.title.$t;var b;var g;if(f==j.feed.entry.length){break}for(var d=0;d<h.link.length;d++){if(h.link[d].rel=="alternate"){g=h.link[d].href;break}}for(var d=0;d<h.link.length;d++){if(h.link[d].rel=="replies"&&h.link[d].type=="text/html"){b=h.link[d].title.split(" ")[0];break}}c=(aBold)?"<b>"+c+"</b>":c;postTitlear.push(c);postUrlar.push(g);postCommentar.push(b)}sortPosts();for(var f=0;f<maxshowresult;f++){var e='<li><a href="'+postUrlar[f]+'" class="recent-link">'+postTitlear[f]+" ("+postCommentar[f]+" comments)</a>";document.write(e)}}function sortPosts(){function c(d,f){var e=postTitlear[d];postTitlear[d]=postTitlear[f];postTitlear[f]=e;var e=postUrlar[d];postUrlar[d]=postUrlar[f];postUrlar[f]=e;var e=postCommentar[d];postCommentar[d]=postCommentar[f];postCommentar[f]=e}for(var b=0;b<postTitlear.length-1;b++){for(var a=b+1;a<postTitlear.length;a++){if(parseInt(postCommentar[b])<parseInt(postCommentar[a])){c(b,a)}}}}document.write('<script src="'+home_page+"feeds/posts/default?max-results="+numposts+'&orderby=published&alt=json-in-script&callback=showrecentposts"><\/script>');
//]]>
</script>

පසුබිම Transparent විදියට Image එකක් Save කර ගන්නේ කොහොමද???

සත් සමුදුරේ 50 වන බ්ලොග් සටහන වෙනුවෙන් පල කෙරෙන සිව්වන බ්ලොග් සටහන.


මේකත් ඉතා සරල බ්ලොග් සටහනක් මතකද සත් සමුදුරේ 50 වන බ්ලොග් සටහනේ මුලින්ම දාල තිබුන Logo එක. මෙන්න ඒ logo එක මුලින්ම බලන්නෙකෝ...

ඒකේ පසුබිම ඉවත් කරල  Transparent විදියට තමයි තියෙන්නේ. හැබැයි මේක jpeg වලින් save කරාම අයිත් පාරක සුදුපාටට පසුබිම ඇවිත් තිබුනා මෙන්න මේ විදියට...

මේකට විසදුම තමයි මේ  jpeg වලින් save කරන ලද image  එක save as හරහා .png extention එකෙන් save කර ගැනීම. එච්චරයි...


මෙන්න සත් සමුදුරේ 50 වන බ්ලොග් සටහන වෙනුවෙන් කලින් දාපු ලිපි...

• • බ්ලොගයේ අකුරු ලොකු පොඩි කරගන්න ලේසියි කියල හිතෙන උපක්‍රමයක්..

•      බ්ලොග් එක ඇතුලට ‍Document එකක් ඔබ්බමු...

•      බ්ලොග් එකේ Tutorial එකක් විදියට දාන්න හිතාගෙන ඉන්න HTML කේතයක් කොහොමද දාන්නේ...

බ්ලොග් එකේ Tutorial එකක් විදියට දාන්න හිතාගෙන ඉන්න HTML කේතයක් ‍කොහොමද දාන්නේ???

මෙන්න අද දවසේ සත් සමුදුරේ 50 වන බ්ලොග් සටහන වෙනුවෙන් පල කෙරෙන තෙවන බ්ලොග් සටහන.

බ්ලොග් එකට දාගන්න පුළුවන්  Gadget  එකක් හරි Optimize කරන්න හරි තියෙන HTML code එකක් බ්ලොග් සටහනකට ඇතුළු කරගන්න ගියාට ඒක එක පාරටම Paste කරල හරි type කරල හරි කරගන්න බැහැ නේද?

මටනම් මීට කලින් දාපු බ්ලොග් එක ඉක්මනට Load කර ගන්න උපක්‍රමයක් සටහනේදී ආවා පස්සේ මට ක්‍රමයක් හම්බවුනා. මුලින්ම මම HTML Parse කියන html code එක අපේ වැඩේට ඕනවිදියට convert කරගන්න Tool එකක් සොයාගත්තා. මෙන්න ඒ link එක - HTML Parse

ඊට පස්සේ අදාල කේතය ඒකට paste කරල convert කර ගත්තා. මෙන්න මුල් කේතය සහ convert කර ගත්තට පස්සේ ලැබුන කේතය;

මුල් කේතය :

Convert කර ගත්තට පස්සේ ලැබුන කේතය :

මේ convert කර ගත්තට පස්සේ ලැබුන කේතය අපේ බ්ලොග් ලියන Compose Mode එකටම Paste කර ගන්න එක තමයි ඊලගට තියෙන්නේ. කරලම බලන්නකෝ...
 මෙන්න මීට කලින් අද දවසේ දමාපු බ්ලොග් සටහන් දෙක - 
 බ්ලොගයේ අකුරු ලොකු පොඩි කරගන්න ලේසියි කියල හිතෙන උපක්‍රමයක්..."
 බ්ලොග් එක ඇතුලට ‍Document එකක් ඔබ්බමු...