එදා 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" />

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