பிலாக்கரில் போட்டோவிற்கு எப்படி "Opacity Blured Hover Effect" கொண்டு வருவது

பிலாக்கரில் போட்டோவிற்கு எப்படி "Opacity Blured Hover Effect" கொண்டு வருவது என்று பார்ப்போம். கீழே உள்ள படத்தின் மீது உங்கள் கர்சரை நகர்த்தி படம் மாறுவதை காணுங்கள்.





தலைப்ப பார்த்தவுடனே என்னடா இவன் பிலாக்கரில் போடுற அருவையே தாங்கல இதுல போட்டோஷாப் வேற நடத்த போறனா என்று திட்டினா அது எனக்கு சேராது அந்த திட்டு எல்லாம் உங்களுக்கே. ஏனென்றால் இதுக்கும் போட்டோஷாப்புக்கும் எந்த சம்பந்தமும் கிடையாது.    இந்த எபக்ட்டை உங்களுடைய படத்தை கொண்டு வர கீழே உங்கள் பிலாக்கர் அக்கௌண்டில் நுழைந்து DASSBORD - LAYOUT - EDIT HTML - என்ற பகுதிக்கு சென்று கீழே உள்ள கோடினை கண்டுபிடிக்கவும். (CTRL+F அழுத்தி வரும் விண்டோவில் இந்த கோடிங் டைப் செய்தால் சுலபமாக கண்டுபிடிக்கலாம்)



]]></b:skin>


கண்டுபிடித்த பின்பு கீழே உள்ள கோடிங்கை காப்பி செய்து கண்டுபிடித்த கோடிற்கு முன்பு/மேலே பேஸ்ட் செய்யவும்.



.hovereffect img {

opacity:0.5;

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);

-moz-opacity:0.5;

-khtml-opacity:0.5;

}

.hovereffect:hover img {

opacity:1.0;

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);

-moz-opacity:1.0;

-khtml-opacity:1;

}
பேஸ்ட் செய்த உடன் உங்கள் விண்டோ கீழே இருப்பதை போல இருக்கும்





இது போல் வந்தால் நீங்கள் இதுவரை செத்து சரியே தைரியமாக கீழே உள்ள SAVE TEMPLATE என்பதை கொடுக்கவும். அடுத்து இன்னும் ஒரு சிறிய வேலை உள்ளது நீங்கள் எந்த படத்திற்கு "Opacity Blured Hover Effect" கொண்டு வர நினைக்கிறீர்களோ அந்த படத்தில் class="hovereffect" என்ற வரியை மட்டும் உங்களுடைய படத்தின் html mode ல் சேர்க்க வேண்டும்.    உதாரணமாக 


நீங்கள் அப்லோட் செய்த படத்தின் html code இப்படி இருக்கும்   


<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbqLChWNrshYLMnV7LwuSlTRayDjWN55t69q7c23kAkAMbG_s6-sHTgnqu54x85ADarcuNJnKqUQSCjC_Y_3I8mGyH1796SmKkMF63rR_ATc6zEUeAb8eaLx43XLUvGthcp-m39OuEw-Zg/s1600/Beauchamp+Falls,+Victoria,+Australia+pictures.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbqLChWNrshYLMnV7LwuSlTRayDjWN55t69q7c23kAkAMbG_s6-sHTgnqu54x85ADarcuNJnKqUQSCjC_Y_3I8mGyH1796SmKkMF63rR_ATc6zEUeAb8eaLx43XLUvGthcp-m39OuEw-Zg/s400/Beauchamp+Falls,+Victoria,+Australia+pictures.jpg" width="400" /></a></div>





இப்பொழுது இந்த படத்தில் நாம் எபெக்ட் சேர்க்க விரும்பினால்



<a class="hovereffect"href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbqLChWNrshYLMnV7LwuSlTRayDjWN55t69q7c23kAkAMbG_s6-sHTgnqu54x85ADarcuNJnKqUQSCjC_Y_3I8mGyH1796SmKkMF63rR_ATc6zEUeAb8eaLx43XLUvGthcp-m39OuEw-Zg/s1600/Beauchamp+Falls,+Victoria,+Australia+pictures.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbqLChWNrshYLMnV7LwuSlTRayDjWN55t69q7c23kAkAMbG_s6-sHTgnqu54x85ADarcuNJnKqUQSCjC_Y_3I8mGyH1796SmKkMF63rR_ATc6zEUeAb8eaLx43XLUvGthcp-m39OuEw-Zg/s400/Beauchamp+Falls,+Victoria,+Australia+pictures.jpg" width="400" /></a></div>





அந்த வரியை மட்டும் குறிப்பிட்ட இடத்தில் சேர்த்து விட்டு publish செய்தால் போதும் நம்முடைய படத்தில் "Opacity Blured Hover Effect" வந்திருப்பதை காண்பீர்கள்.



Note:-  ஒவ்வொரு முறையும் class="hovereffect" என்பதை எழுத முடியாது  மறந்து விடும் என்று தோன்றினால் Settings - Formatting - Post Template சென்று இந்த வரியை பேஸ்ட் செய்து save செய்து விட்டால் நம்முடைய போஸ்ட் எடிட்டரில் Edit html பகுதியில் அந்த வரி வந்து இருக்கும் தேவைபட்டால் நம்முடைய பதிவில் சேர்த்து கொள்ளலாம். 



டுடே லொள்ளு  





world cup வருதுல்ல அதான் மச்சான் பிராக்டிஸ் பண்றான் 


நண்பர்களே பதிவு பிடித்திருந்தால் உங்கள் கருத்தையும், வோட்டையும் மறந்துடாம போடுங்க   

by சசிகுமார் · 26

சென்ற வார ஐரோப்பாவின் நிலைமை - படங்கள்





 


































டுடே லொள்ளு  
Photobucket
ஹா ஹா என்னதான் நீங்க அறிவியலில் ஆயிரம் சாதித்தாலும் இயற்க்கைக்கு முன்னாடி உங்களால் ஒன்றும் கிழிக்க முடியாது. 

by சசிகுமார் · 22

பிலாக்கரில் நம்முடைய பதிவின் கீழ் Divider Image கொண்டுவர

பிலாக்கரில் நம்முடைய பதிவின் கீழ்  Divider Image கொண்டுவருவது எப்படி என்று இங்கு காணபோகிறோம். இது போடுவதனால் நம்முடைய பதிவு முடிந்தது என்பதயும் பதிவிற்கு கீழே இருக்கும் பகுதிகளை பிரிப்பதற்கும் இது உதவுகிறது. 





இங்கு கீழே பல IMAGE மற்றும் அதனுடைய URL கொடுத்துள்ளேன்.  
  ............................................................................................................................................................



Divider Pictures, Images and Photos
URLhttp://i866.photobucket.com/albums/ab230/Daantje_2010/b4zwp6F4s1.gif




Divider Pictures, Images and Photos
URL: http://i866.photobucket.com/albums/ab230/Daantje_2010/rubyheartdivider.gif






Silver Divider Pictures, Images and Photos
URL: http://i980.photobucket.com/albums/ae289/Lady-Dani_2010/divider-4.gif




Divider Pictures, Images and Photos
URL: http://i655.photobucket.com/albums/uu275/FaulcoGal/Dividers/divider3108a3.gif




green divider
URL: http://i655.photobucket.com/albums/uu275/FaulcoGal/Dividers/divider3108a3.gif




Flower Divider Pictures, Images and Photos
URL: http://i980.photobucket.com/albums/ae289/Lady-Dani_2010/9gwqyfjpg.gif




Divider Pictures, Images and Photos
URL:  http://i866.photobucket.com/albums/ab230/Daantje_2010/thumb_divider20351.gif






Divider Pictures, Images and Photos
URL:   http://i866.photobucket.com/albums/ab230/Daantje_2010/glitter-rose13.gif






Divider Pictures, Images and Photos
URL:  http://i866.photobucket.com/albums/ab230/Daantje_2010/thumb_divider20223.gif






DIVIDER Pictures, Images and Photos
URL:  http://i215.photobucket.com/albums/cc263/ladyblue68/LadyKimberly68/Dividers/0133.gif






DIVIDER Pictures, Images and Photos
URL:  http://i215.photobucket.com/albums/cc263/ladyblue68/LadyKimberly68/Dividers/72.gif






DIVIDER Pictures, Images and Photos
URL:  http://i215.photobucket.com/albums/cc263/ladyblue68/LadyKimberly68/Dividers/15.gif


...............................................................................................................................................................
(இது போல் இன்னும் நிறைய மாடல்கள் தேவை பட்டால் http://photobucket.com/images/divider/ சென்று பார்த்து கொள்ளுங்கள் )


இதை எப்படி நம் பிலாக்கரில் சேர்ப்பது என்று பார்ப்போம். இதற்க்கு நீங்கள் உங்கள் பிலாக்கர் அச்குதில் நுழைந்து கொள்ளுங்கள். DASSBOARD - LAYOUT - EDIT HTML - EXPAND WIDGET TEMPLATE சென்று <data:post.body/>   என்ற வரியை கண்டுபிடிக்கவும். கண்டுபிடித்த பின் கீழே உள்ள கோடிங்கை காப்பி செய்து கண்டுபிடித்த கோடிற்கு கீழே/பின்னே சேர்க்கவும்.

   


<center><img border="0" src='PLACE YOUR IMAGE URL HERE'/></center>
இதில் நீங்கள் ஒரு சிறு மாற்றம் செய்ய வேண்டும். PLACE YOUR IMAGE URL HERE என்ற இடத்தில் உங்களுக்கு தேவையான படத்தின் URL கொடுக்கவும். அடுத்து கீழே உள்ள SAVE TEMPLATE என்பதை கிளிக் செய்தால் போதும் உங்களுடைய பதிவின் கீழே நீங்கள் செலக்ட் செய்த படம் வந்திருக்கும்.



டுடே லொள்ளு  


என்ன ஆச்சரியம் இந்த மரத்தில் ஆடுகள் காய்க்கிறது 


by சசிகுமார் · 25

இன்னிக்கி எல்லாமே லொள்ளு தான்

ஏண்டீ கண்ணு தெரியலையா உனக்கு 

Photobucket



இவ்ளோ பெரிய ரோடு காலியா இருக்கும் போது உனக்கு எதுக்கு இந்த விபரீத விளையாட்டு 
Photobucket



டே நடிக்கருதுக்கும் ஒரு டைமிங் இருக்கு டா 



Photobucket



டே நான் சும்மா தானே போனேன் எதுக்குடா என்ன தள்ளி உடுற 


Photobucket



எவன்டா இந்த டேபுள இப்டி போட்டது. வலிக்குதுடா  


Photobucket



யார் கிட்ட வந்து டான்ஸ் ஆடிகிட்டு இருக்கே 
Photobucket


பால மட்டும் போடுடா இன்னா எதுக்குடா அத புடிச்சி தொங்குற 
Photobucket


வா கராத்தே கத்து தரேன் 
Photobucket



டே பால ஒதைடா ன்னா என்ன ஏண்டா ஒதக்கற 
Photobucket



மொதலுக்கே மோசமாகிவிட்டதே 
Photobucket

by சசிகுமார் · 42

All Rights Reserved Blogger tips | Blogger Template by Bloggermint