பதிவுகளில் படங்களை 360 டிகிரி சுழலச் செய்வது எப்படி?

உங்கள் பிளாக்கரில் உள்ள பதிவுகளில் நீங்கள் இணைத்துள்ள படங்களை  கணணி சுட்டி (MOUSE) யால் தொடும் போது அந்தப் படங்கள் 360 டிகிரி சுழன்றால் மற்றவர்களைவிட உங்கள் பிளாக்  வேறுபட்டு இருக்கும்

நண்பர்களே!  வலைதளங்களில் இருந்து நான் கற்றுக்கொண்ட மொத்த பிளாக்கர் வித்தைகளையும் இங்கே இறக்கி வைக்கப் போகிறேன் 

எதற்கும் முன் எச்சரிக்கையாக இந்த வித்தையை நீங்கள் உங்கள் பிளாக்கில் இணைக்கும் முன் உங்கள்  பிளாக் TEMPLET-யை

BACK-UP செய்து சேமித்து வைத்துக்கொள்ளுங்கள் ஏதும் பிரச்சனை என்றால் மீண்டும் RESTORE செய்து கொள்ள வசதியாக இருக்கும்


பதிவுகளில் படங்களை 360 டிகிரி சுழலச் செய்வது எப்படி? என்றால்.......
இப்படங்கள் CSS முறையில் சுழலுவதால் முதலில் சில BASIC CSS CODE-களை உங்கள் TEMPLET-ல் உள்ள CSS ADVANCED பகுதியில் இணைக்க வேண்டும் 

முதலில் நீங்கள் உங்கள் பிளாக் DASHBOARD பகுதிக்கு சென்று TEMPLET கிளிக் செய்தால் வரும் பகுதியில் Customize என்பதை கிளிக் செய்து திறந்தால்....

வரும் Blogger Template Designer  பகுதியில் Advanced என்பதை கிளிக் செய்து அதில் வரும் ADD CSS என்பதின்  உட்பகுதியில் உள்ள பெட்டியில் கீழ்க்கண்ட RED வண்ணத்தில் உள்ள CSS CODE-யை COPY&PASTE செய்யவும்

(குறிப்பு-முன்பாகவே அதில் CSS CODE இருககுமேயானால் அதன் இடையில் சொருகாமல் கடைசியில் PASTE செய்யவும்)

CSS CODE...........  


.rotate{
      -webkit-transition-duration: 0.8s;
      -moz-transition-duration: 0.8s;
      -o-transition-duration: 0.8s;
      transition-duration: 0.8s;
 
      -webkit-transition-property: -webkit-transform;
      -moz-transition-property: -moz-transform;
      -o-transition-property: -o-transform;
      transition-property: transform;
      overflow:hidden;
      }

 .rotate:hover
{
       -webkit-transform:rotate(360deg);
       -moz-transform:rotate(360deg);
       -o-transform:rotate(360deg);
}


PASTE-செய்தப் பிறகு Apply to Blog என்பதை கிளிக் செய்தால்  SAVE ஆகிவிடும்

(எச்சரிக்கை-எந்த CSS CODE ஆயினும் ஒருமுறை மட்டுமே உங்கள் பிளாக்கில் இணைத்தால் போதுமானது இந்தRED வண்ணத்தில் உள்ள  CSS CODE-ம் ஒரு முறை மட்டும் இணைத்தால் போதுமானது)

இனி நீங்கள் உங்கள் பிளாக் DASHBOARD வந்து......

நீங்கள் பதிவு செய்த (POST) பதிவில் உள்ள EDIT என்பதை கிளிக் செய்தால் 
உங்கள் பதிவின் COMPOSE-HTML பகுதிகள் தெரியும் அதில் HTML பகுதியை OPEN செய்தால்....... 
உங்கள் பதிவு HTML CODE-ஆக தெரியும் அதின் நீங்கள் இணைத்துள்ள படத்தின்  HTML CODE உள்ள பகுதியில் உள்ள......

 <div class="separator" style="clear: both; text-align: center;"> 

........என்பதில் separator என்பதிற்குப் பதிலாக rotate என்று எழுதுங்கள் 

உங்கள் பதிவில் உள்ள படங்கள் சுழலவேண்டும் என்றால் பதிவின் HTML பகுதிக்கு சென்று படத்தில் html code-ல் rotate என்று இப்படி மற்றம் செய்தால் போதுமானது
மற்றபடி ஒவ்வொரு முறையும் css code இணைக்க தேவையில்லை

உதாரணமாக மேலே இணைத்துள்ள படத்தின்  HTML CODE.........

<div class="separator" style="clear: both; text-align: center;">
<b><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjqDgyLEDN5HmFBJPDNy8v7ABm7ycgP0yJJWjkr0b_nMgHCLdKxwcbzS18ygwqNoWXTsu8TNFVBeooupV51IUNxoNyGaSnfg1ZZ5h9hEQFeenV9OKM91Zl4bPMkFncI7sEgdBYLiZCC38/s1600/1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjqDgyLEDN5HmFBJPDNy8v7ABm7ycgP0yJJWjkr0b_nMgHCLdKxwcbzS18ygwqNoWXTsu8TNFVBeooupV51IUNxoNyGaSnfg1ZZ5h9hEQFeenV9OKM91Zl4bPMkFncI7sEgdBYLiZCC38/s1600/1.jpg" height="320" width="320" /></a></b></div>

இப்படி இருக்கும் அதில் separator என்பதை மட்டும் rotate என்று மாற்றினால்....

<div class="rotate" style="clear: both; text-align: center;">
<b><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjqDgyLEDN5HmFBJPDNy8v7ABm7ycgP0yJJWjkr0b_nMgHCLdKxwcbzS18ygwqNoWXTsu8TNFVBeooupV51IUNxoNyGaSnfg1ZZ5h9hEQFeenV9OKM91Zl4bPMkFncI7sEgdBYLiZCC38/s1600/1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjqDgyLEDN5HmFBJPDNy8v7ABm7ycgP0yJJWjkr0b_nMgHCLdKxwcbzS18ygwqNoWXTsu8TNFVBeooupV51IUNxoNyGaSnfg1ZZ5h9hEQFeenV9OKM91Zl4bPMkFncI7sEgdBYLiZCC38/s1600/1.jpg" height="320" width="320" /></a></b></div>

இப்படி மாறும்போது......
  உங்கள் பதிவில் உள்ள படங்கள் மீது கணணி சுட்டி படும்போது படங்கள்  360 டிகிரியில் சுழலும் 

இப்பதிவில் ஏதேனும் பிரச்சனை இருந்தால் கருத்துப் பெட்டியில் தெரியப்படுத்துங்கள்உங்கள் பிரச்னைக்கு தீர்வு கிடைக்கும் ...நன்றி 

(எச்சரிக்கை-எந்த CSS CODE ஆயினும் ஒருமுறை மட்டுமே உங்கள் பிளாக்கில் இணைத்தால் போதுமானது)

*****************************************************************************

விரைவில்............

உங்கள் பதிவுகளில் உள்ள படங்கள் MORPH முறையில்  சுழலச் செய்வது எப்படி?

இப்பதிவு தங்களுக்குப் பிடித்திருந்தால்....
வலைதளங்களில் பகிருங்கள்....நன்றி!!! பதிவுகளை உடனுக்குடன் தெரிந்து கொள்ள.......
ட்விட்டரில் இணைந்து கொள்ளுங்கள்

Follow @PARITHITAMIL

வாருங்கள் வாழ்வோம் முகநூல் நண்பர்களாக...