உங்கள் பிளாக்கரில் உள்ள பதிவுகளில் நீங்கள் இணைத்துள்ள படங்களை கணணி சுட்டி (MOUSE) யால் தொடும் போது அந்தப் படங்கள் 360 டிகிரி MORPH முறையில் சுழன்றால் மற்றவர்களைவிட உங்கள் பிளாக் வேறுபட்டு இருக்கும்
எதற்கும் முன் எச்சரிக்கையாக இந்த வித்தையை நீங்கள் உங்கள் பிளாக்கில் இணைக்கும் முன் உங்கள் பிளாக் TEMPLET-யை
BACK-UP செய்து சேமித்து வைத்துக்கொள்ளுங்கள் ஏதும் பிரச்சனை என்றால் மீண்டும் RESTORE செய்து கொள்ள வசதியாக இருக்கும்
பதிவுகளில் படங்களை மேலே உள்ளது போல் 360 டிகிரி MORPH முறையில்சுழலச் செய்வது எப்படி? என்றால்.......
இப்படங்கள் CSS முறையில் சுழலுவதால் முதலில் சில BASIC CSS CODE-களை உங்கள் TEMPLET-ல் உள்ள CSS ADVANCED பகுதியில் இணைக்க வேண்டும்
முதலில் நீங்கள் உங்கள் பிளாக் DASHBOARD பகுதிக்கு சென்று TEMPLET கிளிக் செய்தால் வரும் பகுதியில் Customize என்பதை கிளிக் செய்து திறந்தால்....
வரும் Blogger Template Designer பகுதியில் Advanced என்பதை கிளிக் செய்து அதில் வரும் ADD CSS என்பதின் உட்பகுதியில் உள்ள பெட்டியில் கீழ்க்கண்ட RED வண்ணத்தில் உள்ள CSS CODE-யை COPY&PASTE செய்யவும்
(குறிப்பு-முன்பாகவே அதில் CSS CODE இருககுமேயானால் அதன் இடையில் சொருகாமல் கடைசியில் PASTE செய்யவும்)
BASIC CSS CODE
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;}body { background: #333;}.pic { border: 10px solid #fff; float: left; height:500px; width: 500px; margin: 20px; overflow: hidden; -webkit-box-shadow: 5px 5px 5px #111; box-shadow: 5px 5px 5px #111; }இந்த BASIC CSS CODE-யை paste செய்தப் பிறகு கீழே வரும்
red வண்ணத்தில் உள்ள MORPH CSS CODE-யை copy செய்து....
/*MORPH*/.morph { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease;}.morph:hover { border-radius: 50%; -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg);}PASTE-செய்யவும் பிறகு Apply to Blog என்பதை கிளிக் செய்தால் SAVE ஆகிவிடும்
(எச்சரிக்கை-இந்தRED வண்ணத்தில் உள்ள BASIC CSS CODE -ம் MORPH CSS CODE-ம் ஒருமுறை மட்டுமே உங்கள் பிளாக்கில் உள்ள add css-ல் இணைத்தால் போதுமானது )
நீங்கள் பதிவு செய்த (POST) பதிவில் உள்ள EDIT என்பதை கிளிக் செய்தால் உங்கள் பதிவு HTML CODE-ஆக தெரியும்
அதில் நீங்கள் எந்த இடத்தில் உங்கள் MORPH படத்தை இணைக்க வேண்டுமோ அங்கே கீழ் கண்ட RED வண்ணத்தில்.....
MORPH HTML CODE
<div class="morph pic"> <img src="..........." alt="baby"></div>உள்ள HTML CODE-யை COPY செய்து உங்கள் பதிவின் compose அருகில் இருக்கும் html பகுதியில் PASTE செய்யவும் ..........
நீங்கள் பதிவிடும் படம் உயரம்
500px அகலம் 500px (height:500px; width:500px)(இது முக்கியம் ஏன்? என்றால்....basic css code-ல் நாம் இந்த அளவுதான் கொடுத்துள்ளோம்) இருக்கும் படி மாற்றம் செய்து அதை ONLINE-ல் SAVE செய்து அதன் DIRECT LINK-கை COPY செய்து RED வண்ணத்தில் .........உள்ள பகுதியில் PASTE செய்யவும் baby என்பதில் உங்கள் படத்தை பற்றிய TAG எழுதவும்
இந்த வேலையை ONLINE-ல் கிடைக்கும் நிறைய வலைத்தளங்களை உபயோகப்படுத்தி நீங்கள் செய்யலாம் நான் உபயோகிக்கும் http://www.freeonlinephotoeditor.com/ நீங்களும் உபயோகித்து படத்தை எளிதில் அதன் BASIC பகுதியில் உள்ள RESIZE,CROP TOOLS உபயோகபடுத்தி விரைவில் படத்தை மற்றம் செய்யலாம் அப்படியே அதில் உள்ள FILE பகுதிக்கு சென்று SHARE/SAVE ONLINE மூலம் உங்கள் படத்தின் DIRECT LINK-கை பெறலாம் அதைக் COPY செய்து உபயோகிக்கலாம்
இது மேலே உள்ள படத்தின் MORPH HTML CODE......
<div class="morph pic">
<img alt="baby" src="http://imagizer.imageshack.com/img912/5416/DOGtnH.jpg" />
</div>
(மேலே red வண்ணத்தில் உள்ளது இந்தப் படத்தின் direct link ஆகும்)
இப்படி செய்யும் போது......
உங்கள் பதிவில் உள்ள படங்கள் மீது கணணி சுட்டி படும்போது படங்கள் 360 டிகிரியில் MORPH முறையில் சுழலும்
இப்பதிவில் ஏதேனும் பிரச்சனை இருந்தால் கருத்துப் பெட்டியில் தெரியப்படுத்துங்கள்உங்கள் பிரச்னைக்கு தீர்வு கிடைக்கும் ...நன்றி
(எச்சரிக்கை-இந்தRED வண்ணத்தில் உள்ள BASIC CSS CODE -ம் MORPH CSS CODE-ம் ஒருமுறை மட்டுமே உங்கள் பிளாக்கில் இணைத்தால் போதுமானது ஆனால்...MORPH HTML CODE ஒவ்வொரு முறையும் உங்கள் பிளாக் POST-ல் இணைக்க வேண்டும் )
விரைவில்..........
வலைதளங்களில் பகிருங்கள்....நன்றி!!!
| Follow @PARITHITAMIL |