Wednesday, December 23, 2009

கிறிஸ்துமஸ் பிலாக்கர் டெம்ப்லேட்டுகள்

கிறிஸ்துமஸ் டெம்ப்லேட்களின் தொகுப்பு இங்கே...
http://www.anshuldudeja.com/2009/12/blogger-templates-for-christmas.html

மேலும் ஒன்று...
http://www.allblogtools.com/blogger-templates/2-columns/xmas/


நண்பர்களுக்கு கிறிஸ்துமஸ் மற்றும் புத்தாண்டு வாழ்த்துக்கள்.

Tuesday, December 8, 2009

பனி விழும் வலைதளம்

டிசம்பர் என்றதும் ஞாபகத்துக்கு வருவது என்ன என்றால் என்ன சொல்லுவீர்கள்? கிறிஸ்துமஸ்? புத்தாண்டு? ரஜினி பிறந்தநாள்? வேட்டைக்காரன்? (இது கொஞ்சம் ஓவரா இருக்கோ?) நமக்கு ஞாபகத்துக்கு வருவது இந்த பனி விழும் திரைதான். இந்த மாதம் மட்டும் தங்களுடைய தளத்தில் இந்த பனி விழும் எபக்டை சேர்க்குமாறு சில வாடிக்கையாளர்கள் கேட்பதுண்டு. எங்கிருந்தாவது இலவசமாகக் கிடைக்கும் ஸ்கிரிப்டை எடுத்துப் போட்டுவிடுவேன்.

இந்த முறை அதை உங்களுக்கும் கிடைக்கச்செய்யலாம் என ஒரு எண்ணம் தோன்றியது. விளைவு இதோ...

வழக்கம்போல, Dashboard -> Layout -> Edit HTML செல்லவும். டெம்ப்லேட் கட்டத்திற்குள் </head> என்பதைத் தேடிப்பிடித்து அதற்கு முன்பாக, கீழே இருப்பதை சேர்த்துவிடவும். save பண்ணவும். அவ்வளவுதான். இப்போது உங்கள் வலைப்பூவில் பனி கொட்டும். டிசம்பர் முடிந்தவுடன் இதை அழித்துவிட்டால் பனி விழுவது மறைந்துவிடும்.

<!-- Thanks to http://www.schillmania.com/projects/snowstorm/ -->
<script type='text/javascript'>
//<![CDATA[
var snowStorm=null;function SnowStorm(){this.flakesMax=128;this.flakesMaxActive=64;this.animationInterval=33;this.flakeBottom=null;this.targetElement=null;this.followMouse=true;this.snowColor='#fff';this.snowCharacter='&bull;';this.snowStick=true;this.useMeltEffect=true;this.useTwinkleEffect=false;this.usePositionFixed=false;this.flakeLeftOffset=0;this.flakeRightOffset=0;this.flakeWidth=8;this.flakeHeight=8;this.vMaxX=5;this.vMaxY=4;this.zIndex=0;var 
addEvent=(typeof(window.attachEvent)=='undefined'?function(o,evtName,evtHandler){return 
o.addEventListener(evtName,evtHandler,false)}:function(o,evtName,evtHandler){return 
o.attachEvent('on'+evtName,evtHandler)});var removeEvent=(typeof(window.attachEvent)=='undefined'?function(o,evtName,evtHandler){return 
o.removeEventListener(evtName,evtHandler,false)}:function(o,evtName,evtHandler){return 
o.detachEvent('on'+evtName,evtHandler)});function rnd(n,min){if(isNaN(min)){min=0}return(Math.random()*n)+min}function 
plusMinus(n){return(parseInt(rnd(2),10)==1?n*-1:n)}var s=this;var storm=this;this.timers=[];this.flakes=[];this.disabled=false;this.active=false;var 
isIE=navigator.userAgent.match(/msie/i);var isIE6=navigator.userAgent.match(/msie 
6/i);var isOldIE=(isIE&&(isIE6||navigator.userAgent.match(/msie 5/i)));var 
isWin9X=navigator.appVersion.match(/windows 98/i);var isiPhone=navigator.userAgent.match(/iphone/i);var 
isBackCompatIE=(isIE&&document.compatMode=='BackCompat');var noFixed=((isBackCompatIE||isIE6||isiPhone)?true:false);var 
screenX=null;var screenX2=null;var screenY=null;var scrollY=null;var vRndX=null;var 
vRndY=null;var windOffset=1;var windMultiplier=2;var flakeTypes=6;var 
fixedForEverything=false;var opacitySupported=(function(){try{document.createElement('div').style.opacity='0.5'}catch(e){return 
false}return true})();var docFrag=document.createDocumentFragment();if(s.flakeLeftOffset===null){s.flakeLeftOffset=0}if(s.flakeRightOffset===null){s.flakeRightOffset=0}this.meltFrameCount=20;this.meltFrames=[];for(var 
i=0;i<this.meltFrameCount;i++){this.meltFrames.push(1-(i/this.meltFrameCount))}this.randomizeWind=function(){vRndX=plusMinus(rnd(s.vMaxX,0.2));vRndY=rnd(s.vMaxY,0.2);if(this.flakes){for(var 
i=0;i<this.flakes.length;i++){if(this.flakes[i].active){this.flakes[i].setVelocities()}}}};this.scrollHandler=function(){scrollY=(s.flakeBottom?0:parseInt(window.scrollY||document.documentElement.scrollTop||document.body.scrollTop,10));if(isNaN(scrollY)){scrollY=0}if(!fixedForEverything&&!s.flakeBottom&&s.flakes){for(var 
i=s.flakes.length;i--;){if(s.flakes[i].active===0){s.flakes[i].stick()}}}};this.resizeHandler=function(){if(window.innerWidth||window.innerHeight){screenX=window.innerWidth-(!isIE?16:2)-s.flakeRightOffset;screenY=(s.flakeBottom?s.flakeBottom:window.innerHeight)}else{screenX=(document.documentElement.clientWidth||document.body.clientWidth||document.body.scrollWidth)-(!isIE?8:0)-s.flakeRightOffset;screenY=s.flakeBottom?s.flakeBottom:(document.documentElement.clientHeight||document.body.clientHeight||document.body.scrollHeight)}screenX2=parseInt(screenX/2,10)};this.resizeHandlerAlt=function(){screenX=s.targetElement.offsetLeft+s.targetElement.offsetWidth-s.flakeRightOffset;screenY=s.flakeBottom?s.flakeBottom:s.targetElement.offsetTop+s.targetElement.offsetHeight;screenX2=parseInt(screenX/2,10)};this.freeze=function(){if(!s.disabled){s.disabled=1}else{return 
false}for(var i=s.timers.length;i--;){clearInterval(s.timers[i])}};this.resume=function(){if(s.disabled){s.disabled=0}else{return 
false}s.timerInit()};this.toggleSnow=function(){if(!s.flakes.length){s.start()}else{s.active=!s.active;if(s.active){s.show();s.resume()}else{s.stop();s.freeze()}}};this.stop=function(){this.freeze();for(var 
i=this.flakes.length;i--;){this.flakes[i].o.style.display='none'}removeEvent(window,'scroll',s.scrollHandler);removeEvent(window,'resize',s.resizeHandler);if(!isOldIE){removeEvent(window,'blur',s.freeze);removeEvent(window,'focus',s.resume)}};this.show=function(){for(var 
i=this.flakes.length;i--;){this.flakes[i].o.style.display='block'}};this.SnowFlake=function(parent,type,x,y){var 
s=this;var storm=parent;this.type=type;this.x=x||parseInt(rnd(screenX-20),10);this.y=(!isNaN(y)?y:-rnd(screenY)-12);this.vX=null;this.vY=null;this.vAmpTypes=[1,1.2,1.4,1.6,1.8];this.vAmp=this.vAmpTypes[this.type];this.melting=false;this.meltFrameCount=storm.meltFrameCount;this.meltFrames=storm.meltFrames;this.meltFrame=0;this.twinkleFrame=0;this.active=1;this.fontSize=(10+(this.type/5)*10);this.o=document.createElement('div');this.o.innerHTML=storm.snowCharacter;this.o.style.color=storm.snowColor;this.o.style.position=(fixedForEverything?'fixed':'absolute');this.o.style.width=storm.flakeWidth+'px';this.o.style.height=storm.flakeHeight+'px';this.o.style.fontFamily='arial,verdana';this.o.style.overflow='hidden';this.o.style.fontWeight='normal';this.o.style.zIndex=storm.zIndex;docFrag.appendChild(this.o);this.refresh=function(){if(isNaN(s.x)||isNaN(s.y)){return 
false}s.o.style.left=s.x+'px';s.o.style.top=s.y+'px'};this.stick=function(){if(noFixed||(storm.targetElement!=document.documentElement&&storm.targetElement!=document.body)){s.o.style.top=(screenY+scrollY-storm.flakeHeight)+'px'}else 
if(storm.flakeBottom){s.o.style.top=storm.flakeBottom+'px'}else{s.o.style.display='none';s.o.style.top='auto';s.o.style.bottom='0px';s.o.style.position='fixed';s.o.style.display='block'}};this.vCheck=function(){if(s.vX>=0&&s.vX<0.2){s.vX=0.2}else 
if(s.vX<0&&s.vX>-0.2){s.vX=-0.2}if(s.vY>=0&&s.vY<0.2){s.vY=0.2}};this.move=function(){var 
vX=s.vX*windOffset;s.x+=vX;s.y+=(s.vY*s.vAmp);if(s.x>=screenX||screenX-s.x<storm.flakeWidth){s.x=0}else 
if(vX<0&&s.x-storm.flakeLeftOffset<0-storm.flakeWidth){s.x=screenX-storm.flakeWidth-1}s.refresh();var 
yDiff=screenY+scrollY-s.y;if(yDiff<storm.flakeHeight){s.active=0;if(storm.snowStick){s.stick()}else{s.recycle()}}else{if(storm.useMeltEffect&&s.active&&s.type<3&&!s.melting&&Math.random()>0.998){s.melting=true;s.melt()}if(storm.useTwinkleEffect){if(!s.twinkleFrame){if(Math.random()>0.9){s.twinkleFrame=parseInt(Math.random()*20,10)}}else{s.twinkleFrame--;s.o.style.visibility=(s.twinkleFrame&&s.twinkleFrame%2===0?'hidden':'visible')}}}};this.animate=function(){s.move()};this.setVelocities=function(){s.vX=vRndX+rnd(storm.vMaxX*0.12,0.1);s.vY=vRndY+rnd(storm.vMaxY*0.12,0.1)};this.setOpacity=function(o,opacity){if(!opacitySupported){return 
false}o.style.opacity=opacity};this.melt=function(){if(!storm.useMeltEffect||!s.melting){s.recycle()}else{if(s.meltFrame<s.meltFrameCount){s.meltFrame++;s.setOpacity(s.o,s.meltFrames[s.meltFrame]);s.o.style.fontSize=s.fontSize-(s.fontSize*(s.meltFrame/s.meltFrameCount))+'px';s.o.style.lineHeight=storm.flakeHeight+2+(storm.flakeHeight*0.75*(s.meltFrame/s.meltFrameCount))+'px'}else{s.recycle()}}};this.recycle=function(){s.o.style.display='none';s.o.style.position=(fixedForEverything?'fixed':'absolute');s.o.style.bottom='auto';s.setVelocities();s.vCheck();s.meltFrame=0;s.melting=false;s.setOpacity(s.o,1);s.o.style.padding='0px';s.o.style.margin='0px';s.o.style.fontSize=s.fontSize+'px';s.o.style.lineHeight=(storm.flakeHeight+2)+'px';s.o.style.textAlign='center';s.o.style.verticalAlign='baseline';s.x=parseInt(rnd(screenX-storm.flakeWidth-20),10);s.y=parseInt(rnd(screenY)*-1,10)-storm.flakeHeight;s.refresh();s.o.style.display='block';s.active=1};this.recycle();this.refresh()};this.snow=function(){var 
active=0;var used=0;var waiting=0;var flake=null;for(var i=s.flakes.length;i--;){if(s.flakes[i].active==1){s.flakes[i].move();active++}else 
if(s.flakes[i].active===0){used++}else{waiting++}if(s.flakes[i].melting){s.flakes[i].melt()}}if(active<s.flakesMaxActive){flake=s.flakes[parseInt(rnd(s.flakes.length),10)];if(flake.active===0){flake.melting=true}}};this.mouseMove=function(e){if(!s.followMouse){return 
true}var x=parseInt(e.clientX,10);if(x<screenX2){windOffset=-windMultiplier+(x/screenX2*windMultiplier)}else{x-=screenX2;windOffset=(x/screenX2)*windMultiplier}};this.createSnow=function(limit,allowInactive){for(var 
i=0;i<limit;i++){s.flakes[s.flakes.length]=new 
s.SnowFlake(s,parseInt(rnd(flakeTypes),10));if(allowInactive||i>s.flakesMaxActive){s.flakes[s.flakes.length-1].active=-1}}storm.targetElement.appendChild(docFrag)};this.timerInit=function(){s.timers=(!isWin9X?[setInterval(s.snow,s.animationInterval)]:[setInterval(s.snow,s.animationInterval*3),setInterval(s.snow,s.animationInterval)])};this.init=function(){s.randomizeWind();s.createSnow(s.flakesMax);addEvent(window,'resize',s.resizeHandler);addEvent(window,'scroll',s.scrollHandler);if(!isOldIE){addEvent(window,'blur',s.freeze);addEvent(window,'focus',s.resume)}s.resizeHandler();s.scrollHandler();if(s.followMouse){addEvent(document,'mousemove',s.mouseMove)}s.animationInterval=Math.max(20,s.animationInterval);s.timerInit()};var 
didInit=false;this.start=function(bFromOnLoad){if(!didInit){didInit=true}else 
if(bFromOnLoad){return true}if(typeof s.targetElement=='string'){var targetID=s.targetElement;s.targetElement=document.getElementById(targetID);if(!s.targetElement){throw 
new Error('Snowstorm: Unable to get targetElement "'+targetID+'"');}}if(!s.targetElement){s.targetElement=(!isIE?(document.documentElement?document.documentElement:document.body):document.body)}if(s.targetElement!=document.documentElement&&s.targetElement!=document.body){s.resizeHandler=s.resizeHandlerAlt}s.resizeHandler();s.usePositionFixed=(s.usePositionFixed&&!noFixed);fixedForEverything=s.usePositionFixed;if(screenX&&screenY&&!s.disabled){s.init();s.active=true}};function 
doStart(){s.start(true)}if(document.addEventListener){document.addEventListener('DOMContentLoaded',doStart,false);window.addEventListener('load',doStart,false)}else{addEvent(window,'load',doStart)}}snowStorm=new 
SnowStorm();snowStorm.snowColor = '#fff';
//]]>
</script>

இங்கு கடைசியில் இருப்பது snowStorm.snowColor = '#fff'; விழும் பனியின் நிறமாகும் (fff-வெள்ளை). எனது டெம்லேட்டில் அது சரியாகத் தெரியாது என்பதால் வெளிர் ஊதா நிறத்திற்கு(#99ccff) மாற்றியிருக்கிறேன். உங்களுக்கும் இதனை தேவையான நிறத்திற்கு மாற்றிக்கொள்ளலாம், தேவைப்பட்டால்.

இந்த ஸ்கிரிப்ட் இங்கிருந்து எடுக்கப்பட்டது: http://www.schillmania.com/projects/snowstorm/

-அதி பிரதாபன்.

Monday, November 30, 2009

டெம்ப்லேட் விண்ட் க்ரைஸ் மேரி - சில குறிப்புகள்

டெம்ப்லேட் இங்கிருந்து http://www.deluxetemplates.net/2009/10/wind-cries-mary.html எடுக்கப்பட்டது.


இந்த விண்ட் க்ரைஸ் மேரி அருமையான டெம்ப்லேட். ஒரு பின்னணிப் படம், கண்ணை உறுத்தாத நிறம், ஒரு மெனு - வலது புறம். ஆனால் இதன் அகலம் சற்று குறைவாக இருக்கிறது. ஆனால், HTML ல் சிறிது மாற்றம் செய்தால் கொஞ்சம் அகலமாக மாற்றி விடலாம்.

முதலில் http://www.deluxetemplates.net/2009/10/wind-cries-mary.html இங்கே சென்று டெம்ப்லேட்டை டவுன்லோடு செய்துகொள்ளவும். zip வடிவில் கிடைக்கும். அதை unzip செய்து xml file ஐ எடுத்து வைத்துக்கொள்ளவும்.


பின்பு, Dashboard -> Layout -> Edit HTML செல்லவும். இதில் XML File ஐ அப்லோடு செய்யவும். அதற்கு முன் உங்களுடைய பழைய டெம்ப்லேட்டை Download Full Template ஐ அழுத்தி எடுத்து வைத்துக்கொள்ளவும். மாற்றியதில் எதுவும் ஒத்துவரவில்லை அல்லது திருப்தி இல்லையெனில் இதைப் பயன்படுத்தி பழைய வடிவுக்கு கொண்டுவந்துவிடலாம்.

இப்போது அந்த டெம்ப்லேட்டுக்கு உங்கள் வலைப்பூ மாறிவிடும். அகலத்தை சற்று கூட்டவும், எழுத்துக்களின் அளவுகளை சிறிது சரிசெய்யவும் கீழ்வரும் மாற்றங்களைச் செய்யவும்.

1. Edit Template கட்டத்திற்குள்ளே #outer-wrapper என்பதை தேடிப்பார்க்கவும். அதற்கான அளவுகளில் width:840px என்பதினை width980px என்று மாற்றவும்.
2. #header-wrapper என்பதினைத் தேடி அதன் - width:840px என்பதினை width980px என்று மாற்றவும்.
3. #main-wrapper என்பதினைத் தேடி அதன் - width:580px என்பதினை width720px என்று மாற்றவும்.
 இப்போது அகலம் சற்று கூடியிருக்கும்.

ஆங்கிலத்தில் பதிவின் எழுத்து அளவுகள் சரியாகத் தெரியும். ஆனால் தமிழில் எழுத்துக்கள் சற்று பெரிதாகத் தெரியும் (பெரும்பாலான டெம்ப்லேட்டுகளில் இந்தப் பிரச்சனை உண்டு). இதனைச் சரிசெய்ய,
.post-body என்பதினைத் தேடி, அதன் font-size:14px என்பதினை font-size:12px என்று மாற்றவும்.
மேலும் எழுத்து நன்றாக கருப்பு நிறத்தில் தெரிய, color:#000 என்பதினைச் சேர்க்கவும். மொத்தத்தில் இப்படி இருக்குமாறு பார்த்துக்கொள்ளவும்.
.post-body {
font-size:12px;
line-height:1.6em;
margin:0 0 0.75em;
color:#000;
}


மேலும், பதிவின் தலைப்பு சற்று பெரிய அளவாக இருக்கிறது. அதனைக் குறைக்க,
.post h3 எனப்தினைத் தேடி, அதன் font-size:20px என்பதினை font-size:16px என்று மாற்றவும்.

இப்போது டெம்ப்லேட் அழகாகப் பொருந்தியிருக்கும்.

-அதி பிரதாபன்.

Friday, November 20, 2009

தமிழிஷ் ஓட்டுப்பட்டை - சில குறிப்புகள்

தமிழிஷ் ஓட்டுப்பட்டை இப்போது பரவலாக அனைவரும் உபயோகிப்பதே. அதை எப்படி நிறுவுவது என்ற தமிழிஷில் கொடுக்கப்பட்டிருக்கும் வழிமுறை கீழே...

முதலில் Dashboard -> Layout ->Edit Html செல்லவும்.
கட்டத்திற்குள் HTML Code தெரியும். அந்தக் கட்டத்திற்கு மேலே  Expand Widget Templates என்பதனை தேர்வு செய்யவும்.

பின்பு <data:post.body/> (அல்லது <p><data:post.body/></p>)என்பதைத் தேடிப் பிடிக்கவும்.


அதற்குக் கீழே இதை பேஸ்ட் செய்யவும்.
<script type='text/javascript'>
button="hori";
submit_url ="<data:post.url/>"
</script>
<script src='http://www.tamilish.com/tools/voteb.php' type='text/javascript'></script>

அவ்வளவுதான் (செங்குத்தான பட்டை வேண்டுமெனில் button="vert"; என்பதனை மாற்றிக்கொள்ளவும்).

ஆனால், இதில் ஒரு சிக்கல் என்னவென்றால், சில டெம்ப்லேட்டுகளில் பதிவைத் தொடர்ந்தே இந்தப் பட்டை தெரியும். கீழே இருப்பது போல...


இதைச் சரி செய்ய, தமிழிஷ் CODEக்கு முன்பு <br/><br/> என்பதைச் சேர்க்கலாம்...
<br/><br/> 
<script type='text/javascript'>
button="hori";
submit_url ="<data:post.url/>"
</script>
<script src='http://www.tamilish.com/tools/voteb.php' type='text/javascript'></script>

அல்லது CODEக்கு முன்னும் பின்னும்  <div> ... </div> சேர்க்கலாம்.
<div>
<script type='text/javascript'>
button="hori";
submit_url ="<data:post.url/>"
</script>
<script src='http://www.tamilish.com/tools/voteb.php' type='text/javascript'></script>
</div>

மேலும், சில வேளைகளில் இதைத் தேடவேண்டியது வரும்போது குழப்பமாகாமல் இருக்க, முன்னும் பின்னும் கமண்ட் வரிகளைச் சேர்க்கலாம். இதனால் எந்த பாதிப்பும் ஏற்படாது. இறுதியாக இந்த வடிவத்திற்கு வரும்.
<!-- Tamilish Badge - Starts -->
<div>
<script type='text/javascript'>
button="hori";
submit_url ="<data:post.url/>"
</script>
<script src='http://www.tamilish.com/tools/voteb.php' type='text/javascript'></script>
</div>
<!-- Tamilish Badge - Ends -->

ஆகவே, மேலே உள்ள வரிகளை <data:post.body/> என்பதற்குப் பிறகு சேர்த்தால் பதிவிற்கு இடைஞ்சல் இல்லாமலும், தேடும்போது குழப்பமில்லாமல் கண்டுபிடிக்க இலகுவாகவும் இருக்கும்.

-அதி பிரதாபன்.

Thursday, November 19, 2009

கட்டம் கட்டிக் காட்டுவது எப்படி?

என்னுடைய சில பதிவுகளில் கீழ்கண்டவாறு முக்கிய பகுதிகளைக் கட்டத்திற்குள் காட்டியிருப்பதைப் பார்த்திருக்கலாம்.


இவ்வாறு முக்கிய குறிப்புகளை எவ்வாறு கட்டம் கட்டி அடிக்கலாம் என்பதைப் பற்றி இங்கு பார்க்கலாம்.

இதைச் செய்வது மிகவும் சுலபம். நான் pre tag மூலம் இதனைச் செய்கிறேன். பதிவு எழுதும்போது Compose, Edit HTML என்ற இரு பிரிவுகள் இருக்கும். அதில் Edit HTML சென்று நமக்கு கட்டம் கட்டத் தேவையான பகுதிக்கு முன்னும் பின்னும் <pre>.... </pre> என்று குறிப்பிட்டால் போதும்.



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

Layout -> Edit HTML சென்றால், டெம்ப்லேட்டின் HTML வடிவம் தெரியும். அதில் CSS எனப்படும் இடத்திற்குள் இந்த வடிவத்தினைப் பதிவு செய்ய வேண்டும். இதில் சிரமமிருந்தால் a { ... }, a:link { ...}, a:hover { ... } என்பவற்றிற்குக் கீழே பதிவு செய்யலாம். இதனை நமக்குத் தேவையான வடிவத்தில் வைத்துக்கொள்ளலாம்.



இதோ சில கோடுகளும் அதன் வடிவங்களும்...

pre { overflow: auto; white-space: pre-wrap; padding: 4px; margin: 4px; border: 1px solid #cecece; }



pre { overflow: auto; white-space: pre-wrap; padding: 4px; margin: 4px; border: 1px dotted #cecece; }



pre { overflow: auto; white-space: pre-wrap; padding: 4px; margin: 4px; border: 1px dashed #cecece; }



pre { overflow: auto; white-space: pre-wrap; padding: 4px; margin: 4px; background: #efefef; border: 1px dashed #cecece; background: #efefef; }



pre { overflow: auto; white-space: pre-wrap; padding: 4px; margin: 4px; background: #efefef; border:
1px solid #cecece; border-left: 4px solid #00FF00; }



pre { overflow: auto; white-space: pre-wrap; padding: 4px; margin: 4px; background: #efefef; border-left: 4px solid #00FF00; }


இதில் #cecece, #00ff00... இதெல்லாம் வண்ணத்திற்கான கோடுகள். தேவையான வண்ணத்தின் கோடுகளைப் பெற இங்கே செல்லவும் http://html-color-codes.info/#HTML_Color_Picker.

என்ன தயாரா?

-அதி பிரதாபன்.

Monday, November 9, 2009

Author Comment - தனியாகக் காட்டுவது எப்படி?

குறிப்பு: எப்போதும் HTML EDIT செய்வதற்கு முன் Template ஐ Backup எடுத்துவைத்துக்கொள்ளவும். செய்து பார்த்தது ஏதும் சரியில்லையெனில் மீண்டும் இதை உபயோகித்துக்கொள்ளலாம்.

Author Comment
இதைத் தமிழில் எப்படி சொல்வது என்று தெரியவில்லை. வலைப்பூவின் ஒரு பதிவை மட்டும் தனியாகப் பார்க்கும்போது, கீழே பின்னூட்டங்கள் தெரியும். அதில் பதிவு போட்டவரின் பின்னூட்டங்கள் மட்டும் தனி நிறத்திலோ, அல்லது வேறு பின்னணி நிறத்திலோ வைத்துக்கொள்வது எப்படி என்பதைப் பார்க்கலாம்.

சில டெம்ப்லேட்டுகளில் இந்த வசதி ஏற்கனவே செய்யப்பட்டிருக்கும், அவர்களுக்கு இது தேவையில்லை.

முதலில், வழக்கம்போல Dashboard -> Layout -> Edit html சென்ற பிறகு...
<p><data:comment.body/></p>
என்பதைத் தேடவும். பின்பு அதை நீக்கிவிட்டு, அந்த இடத்தில் பின்வருவதை பேஸ்ட் செய்யவும்.
<b:if cond='data:comment.author == data:post.author'>
<p style='color: red;'><data:comment.body/></p>
<b:else/>
<p><data:comment.body/></p>
</b:if>

இதில் red என்பதே Author பின்னூட்டத்தின் நிறம். இதை உங்கள் தேவைக்கு ஏற்ப blue, green அல்லது வேறு ஏதேனும் கலர் கோடுகளாக (உம்: #EFEFEF) வைத்துக்கொள்ளலாம்.

குறிப்பு: இதை Preview பார்க்க முடியாது. Save செய்துவிட்டு தங்களது வலைப்பூவிற்கு சென்று ஏதாவது ஒரு பதிவைப் பார்க்கவும்.

இதையே, Author Comment ஐ Bold ஆக மட்டும் காட்ட...
<b:if cond='data:comment.author == data:post.author'>
<p style='font-weight:bold;'><data:comment.body/></p>
<b:else/>
<p><data:comment.body/></p>
</b:if>

பின்னணி நிறத்தை மட்டும் மாற்றிக் காட்ட...
<b:if cond='data:comment.author == data:post.author'>
<p style='background: #efefef;'><data:comment.body/></p>
<b:else/>
<p><data:comment.body/></p>
</b:if>

மேலே குறிப்பட்டவை உதாரணங்களே. இதை அப்படியேவும் பயன்படுத்தலாம். HTML பற்றி கொஞ்சம் ஞானம் இருந்தால் உங்களுக்குத் தேவையான வழியில் செய்துகொள்ளலாம். சிலவற்றை கலந்து செய்த உதாரணம் ஒன்று...
<b:if cond='data:comment.author == data:post.author'>
<p style='color: red;background: #efefef;'><data:comment.body/></p>
<b:else/>
<p><data:comment.body/></p>
</b:if>

சந்தேகங்களுக்கு: pbeski@gmail.com

-அதி பிரதாபன்.