Blogger tips

Tweet

பிலாக்கரில் போட்டோவிற்கு எப்படி "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;

}

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



<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 பகுதியில் அந்த வரி வந்து இருக்கும் தேவைபட்டால் நம்முடைய பதிவில் சேர்த்து கொள்ளலாம். 

Tweet

Tweet

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

  ............................................................................................................................................................

<center><img border="0" src='PLACE YOUR IMAGE URL HERE'/></center>

இதில் நீங்கள் ஒரு சிறு மாற்றம் செய்ய வேண்டும். PLACE YOUR IMAGE URL HERE என்ற இடத்தில் உங்களுக்கு தேவையான படத்தின் URL கொடுக்கவும். அடுத்து கீழே உள்ள SAVE TEMPLATE என்பதை கிளிக் செய்தால் போதும் உங்களுடைய பதிவின் கீழே நீங்கள் செலக்ட் செய்த படம் வந்திருக்கும்.

Tweet