-->

Monday, September 17, 2012

එදා 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://lh5.googleusercontent.com/-zvPF0zA0p5A/UBJvL99LmgI/AAAAAAAAHBE/mDjj4QDjRUE/s800/7.jpg" width="200" /> <img src="https://lh4.googleusercontent.com/-nuQkX_hBphA/UBJvMCnV-HI/AAAAAAAAHBA/-Nw1trV44Ug/s800/9.jpg" width="200" />


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

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

<img src="https://lh4.googleusercontent.com/-nuQkX_hBphA/UBJvMCnV-HI/AAAAAAAAHBA/-Nw1trV44Ug/s800/9.jpg" width="200" />
<br />
<img src="https://lh6.googleusercontent.com/-Zx16Hi5ekYI/UBJvHZvG64I/AAAAAAAAHAQ/Yg4IqfHm5RA/s800/12.jpg" width="200" />

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

3 comments:

  1. මේ ලිපිය නම් මට හරි වටිනවා. මොකද භූ රූප විස්තර සහිතව පෙන්නන්න දාන ලොකු පිංතුර වෙලාවකට මට ම වදයක්. පොඩ්ඩක් පැහැදිලි කරන්න පුළුවන්ද අයියේ අදාල පිංතුරයට සබැදිය කියන්නේ මොකද්ද කියලා. ඒ කියන්නේ ලිපියක් ලියලා මං ඒකට අදාල රෑප ටික අන්තර්ජාලයෙන් අරන් මගේ පරිඝණකයේ සේව් කරගෙන බ්ලොග් එකට අප්ලොඩ් කරන්නේ. දැන් මං අදාල පිංතුරයට සබැදියක් විදිහට දාන්නේ මං සේව් කළ තැනද කියලා කියන්න පුළුවන්ද.

    ReplyDelete
    Replies
    1. ඒ කියන්නේ ඔයා Picassa භාවිතා කරන්නේ නැතුව කෙලින්ම පින්තූර upload කරන එක කරන නිසා ලේසි ක්‍රමයක් කියන්නම්. මුලින්ම ඕන කරන පින්තූර සාමාන්‍ය විදියට post එකට ගන්න. ඉන්පස්සේ HTML mode එකට යන්න එතන තියෙනවා ඔයා upload කරපු රූප වල link එක. එතනදී එක් එක් රූපයේ උදාහරනක් විදියට මේ වගේ code එකක් තියේවි‍.

      <div class="separator" style="clear: both; text-align: center;">
      <a href="http://2.bp.blogspot.com/-Z1nDR_8zjFs/UFf1eW9BpcI/AAAAAAAAH2c/JzS0KCiEIOQ/s1600/cover.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://2.bp.blogspot.com/-Z1nDR_8zjFs/UFf1eW9BpcI/AAAAAAAAH2c/JzS0KCiEIOQ/s320/cover.jpg" width="216" /></a></div>

      මෙතනදී src="http://2.bp.blogspot.com/-Z1nDR_8zjFs/UFf1eW9BpcI/AAAAAAAAH2c/JzS0KCiEIOQ/s320/cover.jpg" දී quotation ඇතුලේ තියෙන http සිට jpg යන කොටස තමයි මේ පින්තූරයේ link එක නැතිනම් සබැඳිය ඒ කොටස copy කරගත්තට පසුව මුලින් පෙන්වපු මුළු කොටසම delete කරල ඔයාට අවශ්‍ය effect එකට මේ link එක භාවිතා කරන්න. ගැටළුවක් තිබුනොත් අහන්න...

      Delete
  2. මොනාලිසාගේ පිංතුරේ එක්ක තියෙන ලිපිය ටිකක් මට බර වැඩියි වගේ. මුකුත් නොදන්නා කම නිසා. ඒත් ඒක කියෙව්වොත් පැහැදිලි වෙවි කියලා ලියලා තියෙන නිසා ඒක කියවන්නම්.

    ReplyDelete