பிலாக்கரில் போட்டோவிற்கு எப்படி "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/AVvXsEjk59iaA-NgxSkgCRQn5Ib-6Dz_gsr8za6IxD3Ek-YmboDWgrjJ18YX3-K6kmWE5OnFYx4qW1E395-_8nBfkSWnYiqS0dZy-ReMQtSDNaR_-ZZ9r94a6aCrAyQoAYQxRu5WfGDDM6ufJql6/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/AVvXsEjk59iaA-NgxSkgCRQn5Ib-6Dz_gsr8za6IxD3Ek-YmboDWgrjJ18YX3-K6kmWE5OnFYx4qW1E395-_8nBfkSWnYiqS0dZy-ReMQtSDNaR_-ZZ9r94a6aCrAyQoAYQxRu5WfGDDM6ufJql6/s400/Beauchamp+Falls,+Victoria,+Australia+pictures.jpg" width="400" /></a></div>





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



<a class="hovereffect"href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk59iaA-NgxSkgCRQn5Ib-6Dz_gsr8za6IxD3Ek-YmboDWgrjJ18YX3-K6kmWE5OnFYx4qW1E395-_8nBfkSWnYiqS0dZy-ReMQtSDNaR_-ZZ9r94a6aCrAyQoAYQxRu5WfGDDM6ufJql6/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/AVvXsEjk59iaA-NgxSkgCRQn5Ib-6Dz_gsr8za6IxD3Ek-YmboDWgrjJ18YX3-K6kmWE5OnFYx4qW1E395-_8nBfkSWnYiqS0dZy-ReMQtSDNaR_-ZZ9r94a6aCrAyQoAYQxRu5WfGDDM6ufJql6/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 வருதுல்ல அதான் மச்சான் பிராக்டிஸ் பண்றான் 

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