Monday, June 13, 2011

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

අපේ බ්ලොග් වලට එකතු කරන පින්තූරවලට අපිට ඕන නම් පින්තූරය උඩට mouse pointer එක ගෙනගියාම Bump වෙනවා වගේ Effect එකක් දෙන්න පුළුවන්. මෙන්න මේ පහල මෙම රූපය උඩට mouse pointer ගෙන යන්න පින්තූරය උඩට  mouse pointer  එක ගෙනයන්න එතකොට මේ මොකක්ද කියන්නේ කියල වැටහේවි.

මේක කරගන්න එච්චර අමාරු නැහැ. මුලින්ම කරන්න ඕන මෙන්න මේ code එක Design --> Template Designer ---> Advanced ----> Ad CSS වලට paste කර ගන්න.





.gobump img{
border: 5px solid #ccc;
float: left;
margin: 15px;
-webkit-transition: margin 0.5s ease-out;
-moz-transition: margin 0.5s ease-out;
-o-transition: margin 0.5s ease-out;
border-radius: 5px 5px 5px 5px;
}

.gobump img:hover {
margin-top: 2px;
}


මෙහි border ට යොදාගෙන තිබෙන වර්ණයට අදාල #ccc වෙනුවට ඔබ කැමති වර්ණයක් යොදාගන්නත් පුළුවන්.



දැන් මේක තව වෙනස් කමක් කරන්න නැතුව අපට අවශ්‍ය පින්තූරයට පමණක් bump effect  එක දෙන එක විතරයි කරන්න ඕන. ඒක කරන්නේ මෙහෙමයි.


මුලින්ම අදාල පින්තූරය Compose editor එකට ගන්න. ඉන්පසුව Edit HTML ගියාම උදාහරණයක් විදියට මේවගේ code එකක් ඇවිල්ල තියෙනවානේ.

<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-qLjGXaAPovI/TcEtt5CfcHI/AAAAAAAABwE/qivAiJpicjk/s1600/5-4-2011+4-07-57+PM.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="216" src="http://4.bp.blogspot.com/-qLjGXaAPovI/TcEtt5CfcHI/AAAAAAAABwE/qivAiJpicjk/s320/5-4-2011+4-07-57+PM.jpg" width="320" /></a></div>

දැන් එම කේතයේ දෙවන පේලියට මෙහි පෙන්වා ඇති පරිදි class="gobump" කියන කොටස ඇතුළු කරන්න.

<div class="separator" style="clear: both; text-align: center;">
<a class="gobump" href="http://4.bp.blogspot.com/-qLjGXaAPovI/TcEtt5CfcHI/AAAAAAAABwE/qivAiJpicjk/s1600/5-4-2011+4-07-57+PM.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="216" src="http://4.bp.blogspot.com/-qLjGXaAPovI/TcEtt5CfcHI/AAAAAAAABwE/qivAiJpicjk/s320/5-4-2011+4-07-57+PM.jpg" width="320" /></a></div>

මේක ඔබට අවශ්‍ය ඕනෑම  image එකක html code එකට එකතු කිරීමෙන් Bump effect එක අර ගන්න හැකියි.

10 comments:

  1. හික් හික්...ගැජ මැටික් දාන්න නම් මම ආයෙම යන්නේ නෑ..මගේ බ්ලොගේ අවුලට හේතුවත් ඔන්න ඕක තමා...

    ReplyDelete
  2. @රත්ගමයා - ඒක නම් ඇත්ත කාරණයක් තමයි. හැබැයි මේ Gadget එක නම් අහිංසක එකක්...

    ReplyDelete
  3. ඔය ගැජමැටික් දාගන්න ආසයි බයයි වගේ නම් වෙන පරීක්ෂණ බ්ලොග් එකක් පටන්ගන්නයි තියෙන්නේ... අතින් ගාණක් යනවයැ ;-)

    ReplyDelete
  4. @hare :-) - ඒක හරි, අත්හදාබැලීම් වලට බියක් තියෙනවා නම් ඒක තමයි හොදම විසදුම...

    ReplyDelete
  5. ස්තූතියි බෙදාගත්තට... එළ කොල්ලේක්නේ...

    ReplyDelete
  6. මටත් ඉතින් ඕවට ආසයි බයයි තමයි . ඔය template වෙනස් කම් කීපයක් කරන්න ගියා එකක් වත් හරි ගියේ නැහැ.

    ReplyDelete
  7. @බස්සා - ස්තූතියි බස‍්සෝ...

    ReplyDelete
  8. @Bindi - ඒ බිය නම් සාධාරණයි. මොකද මගේ බ්ලොග් එක තව පොඩ්ඩෙන් ඉතිහාසයට එක්වන්නෙත් template එකේ අවුලක් නිසා තමයි. කොහොමවුනත් දැන් වෙනස් කමක් කරනවා නම් කරන්නේ ADD CSS වල හා අපේ individual post වල පමණයි...

    ReplyDelete
  9. ඔච්චර හිතන්න දෙයක් නෑ අප්පා. backup XML එකක් අරන් තියාගෙන කොරන දෙයක් කොරලා හරිගියේ නැත්නම් ආයෙත් අර backup එකම දාගත්තම හරිනේ. මම නම් ආසයි අළුත් වැඩ කරල බලන්න. ඒක හොඳ අත්දැකීමක්. අළුත් අළුත් වැඩ ඉගෙන ගන්නෙ නැතිවුනාම ජීවිතේම පල් වෙනවා වගේ.

    දැන් ඔයාගේ ගවේෂනාත්මක ලිපි නතර කරලද ? අපි ආසයි ඒ වගේ ලිපි බලන්න. ගොඩක් මහන්සි වෙන්න වෙනවා තමයි. මම අත්දැකීමෙන්ම ඒක දන්නවා. ඒත් ඉතින් ඔයාගේ බ්ලොග් එක මෙච්චර ජනප්‍රියත් ඒ නිසාම තමයි. දිගටම ලියන්න... ජයවේවා !!!

    ReplyDelete
  10. @චතුරංග පෙරේරා | chathuranga Perera - ඔව් අළුත් අළුත් දේ අත්හදානොබලන්නේ නම් අපි එක තැන පල් වෙනවා තමයි. ගවේෂනාත්මක ලිපි නතර කරලා නැහැ. ඒවා හැකි‍සෑම අවස්ථාවකම පල කරන්න බලාපොරොත්තුවෙන් සිටිනවා. දැන් වෙලා තියෙන්නේ කාලවේලා මදිකම හා ඒ නිසා එකම තැනක දීර්ඝවෙලාවක් සීටීමට ඇති අපහසුතා, කොන්දේ අමාරුවකින් පෙලීම වගේ කාරණා තමයි. කොහොමවුනත් ඉදිරියේදිත් එවැනි ලිපි පල කරනවා...

    ReplyDelete