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

ඔබට මතකද මීට වසරකට පමණ පෙර සත් සමුදුරේ පළවූවා 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 එක ගැනීම පිළිබදව විමසා තිබුනා. එහිදී ලිපියේ සදහන් ක්‍රමයට අමතරව තවත් ක්‍රමයක් කමෙන්ටුවටද ඇතුලත් කරනු ලැබූ බවත් සදහන් කළ යුතුයි.

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