பிலாக்கரில் போட்டோவிற்கு எப்படி "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 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
டுடே லொள்ளு
ஹா ஹா என்னதான் நீங்க அறிவியலில் ஆயிரம் சாதித்தாலும் இயற்க்கைக்கு முன்னாடி உங்களால் ஒன்றும் கிழிக்க முடியாது.
by சசிகுமார் · 22
பிலாக்கரில் நம்முடைய பதிவின் கீழ் Divider Image கொண்டுவருவது எப்படி என்று இங்கு காணபோகிறோம். இது போடுவதனால் நம்முடைய பதிவு முடிந்தது என்பதயும் பதிவிற்கு கீழே இருக்கும் பகுதிகளை பிரிப்பதற்கும் இது உதவுகிறது.
இங்கு கீழே பல IMAGE மற்றும் அதனுடைய URL கொடுத்துள்ளேன்.
............................................................................................................................................................URL: http://i866.photobucket.com/albums/ab230/Daantje_2010/b4zwp6F4s1.gif
URL: http://i866.photobucket.com/albums/ab230/Daantje_2010/rubyheartdivider.gif
URL: http://i980.photobucket.com/albums/ae289/Lady-Dani_2010/divider-4.gif
URL: http://i655.photobucket.com/albums/uu275/FaulcoGal/Dividers/divider3108a3.gif
URL: http://i655.photobucket.com/albums/uu275/FaulcoGal/Dividers/divider3108a3.gif
URL: http://i980.photobucket.com/albums/ae289/Lady-Dani_2010/9gwqyfjpg.gif
URL: http://i866.photobucket.com/albums/ab230/Daantje_2010/thumb_divider20351.gif
URL: http://i866.photobucket.com/albums/ab230/Daantje_2010/glitter-rose13.gif
URL: http://i866.photobucket.com/albums/ab230/Daantje_2010/thumb_divider20223.gif
URL: http://i215.photobucket.com/albums/cc263/ladyblue68/LadyKimberly68/Dividers/0133.gif
URL: http://i215.photobucket.com/albums/cc263/ladyblue68/LadyKimberly68/Dividers/72.gif
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/> என்ற வரியை கண்டுபிடிக்கவும். கண்டுபிடித்த பின் கீழே உள்ள கோடிங்கை காப்பி செய்து கண்டுபிடித்த கோடிற்கு கீழே/பின்னே சேர்க்கவும்.
இதில் நீங்கள் ஒரு சிறு மாற்றம் செய்ய வேண்டும். PLACE YOUR IMAGE URL HERE என்ற இடத்தில் உங்களுக்கு தேவையான படத்தின் URL கொடுக்கவும். அடுத்து கீழே உள்ள SAVE TEMPLATE என்பதை கிளிக் செய்தால் போதும் உங்களுடைய பதிவின் கீழே நீங்கள் செலக்ட் செய்த படம் வந்திருக்கும்.<center><img border="0" src='PLACE YOUR IMAGE URL HERE'/></center>
டுடே லொள்ளு
என்ன ஆச்சரியம் இந்த மரத்தில் ஆடுகள் காய்க்கிறது
by சசிகுமார் · 25
ஏண்டீ கண்ணு தெரியலையா உனக்கு
இவ்ளோ பெரிய ரோடு காலியா இருக்கும் போது உனக்கு எதுக்கு இந்த விபரீத விளையாட்டு
டே நடிக்கருதுக்கும் ஒரு டைமிங் இருக்கு டா
டே நான் சும்மா தானே போனேன் எதுக்குடா என்ன தள்ளி உடுற
எவன்டா இந்த டேபுள இப்டி போட்டது. வலிக்குதுடா
யார் கிட்ட வந்து டான்ஸ் ஆடிகிட்டு இருக்கே
பால மட்டும் போடுடா இன்னா எதுக்குடா அத புடிச்சி தொங்குற
வா கராத்தே கத்து தரேன்
டே பால ஒதைடா ன்னா என்ன ஏண்டா ஒதக்கற
மொதலுக்கே மோசமாகிவிட்டதே
by சசிகுமார் · 42
Subscribe to:
Posts (Atom)