Announcement:

This is a Testing Annocement. I don't have Much to Say. This is a Place for a Short Product Annocement

பிலாக்கரில் போட்டோவிற்கு எப்படி "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="http://4.bp.blogspot.com/_ZLXwKOOnlHk/S9kN1S5LojI/AAAAAAAACBc/zaI8P6BVut8/s1600/Beauchamp+Falls,+Victoria,+Australia+pictures.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="300" src="http://4.bp.blogspot.com/_ZLXwKOOnlHk/S9kN1S5LojI/AAAAAAAACBc/zaI8P6BVut8/s400/Beauchamp+Falls,+Victoria,+Australia+pictures.jpg" width="400" /></a></div>


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

<a class="hovereffect"href="http://4.bp.blogspot.com/_ZLXwKOOnlHk/S9kN1S5LojI/AAAAAAAACBc/zaI8P6BVut8/s1600/Beauchamp+Falls,+Victoria,+Australia+pictures.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="300" src="http://4.bp.blogspot.com/_ZLXwKOOnlHk/S9kN1S5LojI/AAAAAAAACBc/zaI8P6BVut8/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 வருதுல்ல அதான் மச்சான் பிராக்டிஸ் பண்றான் 

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

பிலாக்கரில் நம்முடைய பதிவின் கீழ் Divider Image கொண்டுவர

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


இங்கு கீழே பல IMAGE மற்றும் அதனுடைய URL கொடுத்துள்ளேன்.  
  ............................................................................................................................................................

Divider Pictures, Images and Photos
URLhttp://i866.photobucket.com/albums/ab230/Daantje_2010/b4zwp6F4s1.gif


Divider Pictures, Images and Photos
URL: http://i866.photobucket.com/albums/ab230/Daantje_2010/rubyheartdivider.gif



Silver Divider Pictures, Images and Photos
URL: http://i980.photobucket.com/albums/ae289/Lady-Dani_2010/divider-4.gif


Divider Pictures, Images and Photos
URL: http://i655.photobucket.com/albums/uu275/FaulcoGal/Dividers/divider3108a3.gif


green divider
URL: http://i655.photobucket.com/albums/uu275/FaulcoGal/Dividers/divider3108a3.gif


Flower Divider Pictures, Images and Photos
URL: http://i980.photobucket.com/albums/ae289/Lady-Dani_2010/9gwqyfjpg.gif


Divider Pictures, Images and Photos
URL:  http://i866.photobucket.com/albums/ab230/Daantje_2010/thumb_divider20351.gif



Divider Pictures, Images and Photos
URL:   http://i866.photobucket.com/albums/ab230/Daantje_2010/glitter-rose13.gif



Divider Pictures, Images and Photos
URL:  http://i866.photobucket.com/albums/ab230/Daantje_2010/thumb_divider20223.gif



DIVIDER Pictures, Images and Photos
URL:  http://i215.photobucket.com/albums/cc263/ladyblue68/LadyKimberly68/Dividers/0133.gif



DIVIDER Pictures, Images and Photos
URL:  http://i215.photobucket.com/albums/cc263/ladyblue68/LadyKimberly68/Dividers/72.gif



DIVIDER Pictures, Images and Photos
URL:  http://i215.photobucket.com/albums/cc263/ladyblue68/LadyKimberly68/Dividers/15.gif

...............................................................................................................................................................
(இது போல் இன்னும் நிறைய மாடல்கள் தேவை பட்டால் http://photobucket.com/images/divider/ சென்று பார்த்து கொள்ளுங்கள் )

இதை எப்படி நம் பிலாக்கரில் சேர்ப்பது என்று பார்ப்போம். இதற்க்கு நீங்கள் உங்கள் பிலாக்கர் அச்குதில் நுழைந்து கொள்ளுங்கள். DASSBOARD - LAYOUT - EDIT HTML - EXPAND WIDGET TEMPLATE சென்று <data:post.body/>   என்ற வரியை கண்டுபிடிக்கவும். கண்டுபிடித்த பின் கீழே உள்ள கோடிங்கை காப்பி செய்து கண்டுபிடித்த கோடிற்கு கீழே/பின்னே சேர்க்கவும்.
   

<center><img border="0" src='PLACE YOUR IMAGE URL HERE'/></center>
இதில் நீங்கள் ஒரு சிறு மாற்றம் செய்ய வேண்டும். PLACE YOUR IMAGE URL HERE என்ற இடத்தில் உங்களுக்கு தேவையான படத்தின் URL கொடுக்கவும். அடுத்து கீழே உள்ள SAVE TEMPLATE என்பதை கிளிக் செய்தால் போதும் உங்களுடைய பதிவின் கீழே நீங்கள் செலக்ட் செய்த படம் வந்திருக்கும்.

டுடே லொள்ளு  

என்ன ஆச்சரியம் இந்த மரத்தில் ஆடுகள் காய்க்கிறது 

நம்முடைய பிலாக்கரில் எப்படி Multi Tab Widget கொண்டு வருவது

நாம் நம்முடைய தளத்தில் சைடுபாரில் நமக்கு தேவையான WIDGET வைத்திருப்போம் உதாரணமாக FOLLOWERS, RECENT COMMENTS, BLOG ARCHIVE என்று வைத்திருப்போம். இவைகளை தனித்தனியாக நம்முடைய தளத்தில் வைத்து இருப்பதால் நம்முடைய தளத்தின் சைடுபார் அதிக இடம் எடுத்துகொள்ளும். இந்த மூன்று WIDGET களும் ஒரே இடத்தில் இருந்தால் நம்முடைய தளத்தின் இடமும் மிச்சமாகும், நம்முடைய தளமும் அழகாக மாறும்.  படத்தில் பார்த்தால் புரியும்.


இந்த வசதியை உங்களுடைய தளத்திலும் கொண்டுவரலாம். இந்த வசதியை பெற முதலில் உங்கள் பிலாக்கர் அக்கௌண்டில் நுழைந்து கொள்ளுங்கள். நண்பரே இது கொஞ்சம் சிரமமாக இருக்கும் சற்று கவனத்துடன் செய்யவும்.

1.  DASSBOARD - LAYOUT - EDIT HTML - DOWNLOAD FULL TEMPLATE -செய்து கொள்ளுங்கள்.

2. பின்பு </head> இந்த வரியை கண்டுபிடிக்கவும். கண்டுபிடித்த பின் கீழே உள்ள கோடிங்கை காப்பி செய்து கண்டுபிடித்த கோடிற்கு முன்பு/மேலே சேர்க்கவும். 
<script type='text/javascript'>
//<![CDATA[
document.write('<style type="text/css">.tabber{display:none;}<\/style>');
function tabberObj(argsObj)
{
var arg;
this.div = null;
this.classMain = "tabber";
this.classMainLive = "tabberlive";
this.classTab = "tabbertab";
this.classTabDefault = "tabbertabdefault";
this.classNav = "tabbernav";
this.classTabHide = "tabbertabhide";
this.classNavActive = "tabberactive";
this.titleElements = ['h2','h3','h4','h5','h6'];
this.titleElementsStripHTML = true;
this.removeTitle = true;
this.addLinkId = false;
this.linkIdFormat = '<tabberid>nav<tabnumberone>';
for (arg in argsObj) { this[arg] = argsObj[arg]; }
this.REclassMain = new RegExp('\\b' + this.classMain + '\\b', 'gi');
this.REclassMainLive = new RegExp('\\b' + this.classMainLive + '\\b', 'gi');
this.REclassTab = new RegExp('\\b' + this.classTab + '\\b', 'gi');
this.REclassTabDefault = new RegExp('\\b' + this.classTabDefault + '\\b', 'gi');
this.REclassTabHide = new RegExp('\\b' + this.classTabHide + '\\b', 'gi');
this.tabs = new Array();
if (this.div) {
this.init(this.div);
this.div = null;
}
}
tabberObj.prototype.init = function(e)
{
var
childNodes,
i, i2,
t,
defaultTab=0,
DOM_ul,
DOM_li,
DOM_a,
aId,
headingElement;
if (!document.getElementsByTagName) { return false; }
if (e.id) {
this.id = e.id;
}
this.tabs.length = 0;
childNodes = e.childNodes;
for(i=0; i < childNodes.length; i++) {
if(childNodes[i].className &&
childNodes[i].className.match(this.REclassTab)) {
t = new Object();
t.div = childNodes[i];
this.tabs[this.tabs.length] = t;
if (childNodes[i].className.match(this.REclassTabDefault)) {
defaultTab = this.tabs.length-1;
}
}
}
DOM_ul = document.createElement("ul");
DOM_ul.className = this.classNav;
for (i=0; i < this.tabs.length; i++) {
t = this.tabs[i];
t.headingText = t.div.title;
if (this.removeTitle) { t.div.title = ''; }
if (!t.headingText) {
for (i2=0; i2<this.titleElements.length; i2++) {
headingElement = t.div.getElementsByTagName(this.titleElements[i2])[0];
if (headingElement) {
t.headingText = headingElement.innerHTML;
if (this.titleElementsStripHTML) {
t.headingText.replace(/<br>/gi," ");
t.headingText = t.headingText.replace(/<[^>]+>/g,"");
}
break;
}
}
}
if (!t.headingText) {
t.headingText = i + 1;
}
DOM_li = document.createElement("li");
t.li = DOM_li;
DOM_a = document.createElement("a");
DOM_a.appendChild(document.createTextNode(t.headingText));
DOM_a.href = "javascript:void(null);";
DOM_a.title = t.headingText;
DOM_a.onclick = this.navClick;
DOM_a.tabber = this;
DOM_a.tabberIndex = i;
if (this.addLinkId && this.linkIdFormat) {
aId = this.linkIdFormat;
aId = aId.replace(/<tabberid>/gi, this.id);
aId = aId.replace(/<tabnumberzero>/gi, i);
aId = aId.replace(/<tabnumberone>/gi, i+1);
aId = aId.replace(/<tabtitle>/gi, t.headingText.replace(/[^a-zA-Z0-9\-]/gi, ''));
DOM_a.id = aId;
}
DOM_li.appendChild(DOM_a);
DOM_ul.appendChild(DOM_li);
}
e.insertBefore(DOM_ul, e.firstChild);
e.className = e.className.replace(this.REclassMain, this.classMainLive);
this.tabShow(defaultTab);
if (typeof this.onLoad == 'function') {
this.onLoad({tabber:this});
}
return this;
};
tabberObj.prototype.navClick = function(event)
{
var
rVal,
a,
self,
tabberIndex,
onClickArgs;
a = this;
if (!a.tabber) { return false; }
self = a.tabber;
tabberIndex = a.tabberIndex;
a.blur();
if (typeof self.onClick == 'function') {
onClickArgs = {'tabber':self, 'index':tabberIndex, 'event':event};
/* IE uses a different way to access the event object */
if (!event) { onClickArgs.event = window.event; }
rVal = self.onClick(onClickArgs);
if (rVal === false) { return false; }
}
self.tabShow(tabberIndex);
return false;
};
tabberObj.prototype.tabHideAll = function()
{
var i;
for (i = 0; i < this.tabs.length; i++) {
this.tabHide(i);
}
};
tabberObj.prototype.tabHide = function(tabberIndex)
{
var div;
if (!this.tabs[tabberIndex]) { return false; }
div = this.tabs[tabberIndex].div;
if (!div.className.match(this.REclassTabHide)) {
div.className += ' ' + this.classTabHide;
}
this.navClearActive(tabberIndex);
return this;
};
tabberObj.prototype.tabShow = function(tabberIndex)
{
var div;
if (!this.tabs[tabberIndex]) { return false; }
this.tabHideAll();
div = this.tabs[tabberIndex].div;
div.className = div.className.replace(this.REclassTabHide, '');
this.navSetActive(tabberIndex);
if (typeof this.onTabDisplay == 'function') {
this.onTabDisplay({'tabber':this, 'index':tabberIndex});
}
return this;
};
tabberObj.prototype.navSetActive = function(tabberIndex)
{
this.tabs[tabberIndex].li.className = this.classNavActive;
return this;
};
tabberObj.prototype.navClearActive = function(tabberIndex)
{
this.tabs[tabberIndex].li.className = '';
return this;
};
function tabberAutomatic(tabberArgs)
{
var
tempObj,
divs,
i;
if (!tabberArgs) { tabberArgs = {}; }
tempObj = new tabberObj(tabberArgs);
divs = document.getElementsByTagName("div");
for (i=0; i < divs.length; i++) {
if (divs[i].className &&
divs[i].className.match(tempObj.REclassMain)) {
tabberArgs.div = divs[i];
divs[i].tabber = new tabberObj(tabberArgs);
}
}
return this;
}
function tabberAutomaticOnLoad(tabberArgs)
{
var oldOnLoad;
if (!tabberArgs) { tabberArgs = {}; }
oldOnLoad = window.onload;
if (typeof window.onload != 'function') {
window.onload = function() {
tabberAutomatic(tabberArgs);
};
} else {
window.onload = function() {
oldOnLoad();
tabberAutomatic(tabberArgs);
};
}
}
/* Run tabberAutomaticOnload() unless the "manualStartup" option was specified */
if (typeof tabberOptions == 'undefined') {
tabberAutomaticOnLoad();
} else {
if (!tabberOptions['manualStartup']) {
tabberAutomaticOnLoad(tabberOptions);
}
}
//]]>
</script>

3. இந்த கோடினை கண்டுபிடிக்கவும்.]]></b:skin> கண்டுபிடித்த பின்பு கீழே உள்ள கோடிங்கை காப்பி செய்து கண்டுபிடித்த கோடிற்கு முன்/மேலே பேஸ்ட் செய்யவுயம்.
.tabberlive{
margin:0;
padding:5px;
clear:both;
background:$tbbxbgcolor;
border:1px solid $tbbxbrcolor;
}
.tabbernav {
margin:0;
padding: 3px 0;
border-bottom: 1px solid $tbbxbrcolor;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;
}
.tabbernav li {
list-style:none;
margin:0;
display:inline;
}
.tabbernav li a {
padding:3px 0.5em;
margin-right:1px;
border:1px solid $tbbxbrcolor;
border-bottom:none;
background:$tbbxcolor2;
text-decoration:none;
color:$tbbxcolor1;
}
.tabbernav li a:hover {
color:$tbbxcolor2;
background:$tbbxcolor1;
border-color:$tbbxbrcolor;
text-decoration:none;
}
.tabbernav li.tabberactive a,
.tabbernav li.tabberactive a:hover {
background:$tbbxcolor1;
color:$tbbxcolor2;
border-bottom: 1px solid $tbbxcolor1;
}
.tabberlive .tabbertab {
padding:5px;
border:1px solid $tbbxbrcolor;
border-top:0;
background:$tbbxcolor1;
}
.tabberlive .tabbertab h2,
.tabberlive .tabbertabhide {
display:none;
}
.tabbertab .widget-content ul{
list-style:none;
margin:0 0 10px 0;
padding:0;
}
.tabbertab .widget-content li {
border-bottom:1px solid $tbbxbrcolor;
margin:0 5px;
padding:2px 0 5px 0;
}
கீழே உள்ள படத்தை பார்த்து கொள்ளவும் 

4. பின்னர் #navbar-iframe { Some text here } இந்த வரியை கண்டுபிடிக்கவும். கண்டுபிடித்த பின் கீழே உள்ள கோடினை காப்பி செய்து இதற்க்கு கீழே/பின்னே சேர்க்கவும்.
<Variable name="tbbxbgcolor" description="Tab box Background Color" type="color" default="#f8f8f8" value="#f8f8f8">
<Variable name="tbbxbrcolor" description="Tab box Border Color" type="color" default="#dcdcdc" value="#dcdcdc">
<Variable name="tbbxcolor1" description="Tab box Color 1" type="color" default="#ffffff" value="#ffffff">
<Variable name="tbbxcolor2" description="Tab box Color 2" type="color" default="#5588aa" value="#5588aa">
கீழே உள்ள படத்தினை பார்த்து கொள்ளவும்  

5. இது கடைசி கட்டம். <div id='sidebar1'> இந்த கோடினை கண்டுபிடிக்கவும்.  கண்டுபிடித்த பின் கீழே உள்ள கோடினை காப்பி செய்து இந்த வரிக்கு கீழே/பின்னே சேர்க்கவும். 
<div class='tabber'>
<b:section class='tabbertab' id='tab1' maxwidgets='1'/>
<b:section class='tabbertab' id='tab2' maxwidgets='1'/>
<b:section class='tabbertab' id='tab3' maxwidgets='1'/>
<b:section class='tabbertab' id='tab4' maxwidgets='1'/>
</div>
கீழே உள்ள படத்தை பார்த்துகொள்ளுங்கள்.  

அவ்வளவு தான் முடிஞ்சதுங்க. கீழே உள்ள SAVE TEMPLATE கொடுத்து விட்டு உங்கள் பிலாக்கர்  அக்கௌண்டில் DASSBOARD - LAYOUT - ADD PAGE ELEMENT செல்லுங்கள்.

 இப்பொழுது உங்கள் தளத்தில் நீங்கள் சேர்த்த MULTITAB WIDGET வந்திருக்கும். கீழே உள்ள படத்தை பாருங்கள் 

இப்பொழுது நீங்கள் 1 ல் சேர்க்க முதலில் 1 கிளிக் செய்து கீழே உள்ள ADD A GADGET என்பதை கிளிக் செய்து உங்களுக்கு தேவையான WIDGET தேர்ந்தெடுத்து கொள்ளுங்கள்.  



பிலாக்கரில் கமெண்ட் நம்பர்(Comments Numbering) வர வைக்க

நாம் பதிவு எழுதுவதை படித்துவிட்டு நம் வாசகர்கள் நம்முடைய பதிவிற்கு பின்னூட்டம் (comments) அளிப்பார்கள் அப்படி கொடுக்கும் கமெண்ட்ஸ் மொத்த எண்ணிக்கை  மட்டுமே நம்முடைய பிலாக்கரில் தெரியும். யார் யார் எத்தனையாவது கமெண்ட் கொடுத்தார்கள் என்று அறிய நாம் ஒவ்வொன்றாக எண்ணி தான் கூற முடியும் அதனை தவிர்ப்பதற்காகவே இந்த பதிவு கீழே உள்ள படத்தை பார்க்கவும்.


இதுபோல் உங்கள் தளத்தில் கொண்டுவர முதலில் உங்கள் பிலாக்கர் அக்கௌண்டில் நுழைந்து கொள்ளுங்கள்.

STEP : 1
  உங்கள் தளத்தில் DASSBOARD - LAYOUT - EDIT HTML - EXPAND WIDGET TEMPLATES - என்ற இடத்திற்கு செல்லவும். சென்று கீழே உள்ள கோடினை கண்டுபிடிக்கவும்      

<b:loop values='data:post.comments' var='comment'>

கண்டுபிடித்த பின் கீழே உள்ள கோடிங்கை காப்பி செய்து நீங்கள் கண்டுபிடித்த கோடிற்கு மேலே/முன்னே பேஸ்ட் செய்யவும்.

<script type='text/javascript'>var CommentsCounter=0;</script>

STEP: 2 
அடுத்து கீழே உள்ள கோடினை கண்டுபிடிக்கவும்.  

<data:commentPostedByMsg/>

கண்டுபிடித்த பின் கீழே உள்ள கோடிங்கை காப்பி செய்து கண்டுபிடித்த கோடிற்கு கீழே/பின்னே பேஸ்ட் செய்யவும்.   

<span class='comm-num'>
<a expr:href='data:comment.url' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>


கீழே உள்ள படத்தை பார்க்கவும்.

SAVE TEMPLATE என்பதை கொடுத்து விடவும்.

STEP : 3  
    உங்கள் தளத்தில் LAYOUT - EDIT HTML - என்ற இடத்திருக்கு செல்லவும்.  சென்று கீழே உள்ள கோடினை கண்டுபிடிக்கவும்.
</head>

கண்டுபிடித்த பின் கீழே உள்ள கோடிங் காப்பி செய்து கண்டுபிடித்த கோடிற்கு மேலே/முன்னே பேஸ்ட் செய்யவும்.

<style type="text/css">
.comm-num a:link, .comm-num a:visited {
color: white !important;
text-decoration: none !important;
background: url(http://i50.tinypic.com/egx3t3.jpg) no-repeat;
width: 50px;
height: 48px;
float: right;
display: block;
margin-right: 5px;
margin-top: -15px; /*comments-counter position*/
text-align: center;
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 15px;
font-weight: normal;
}


.comm-num a:hover, .comm-num a:active {
color: gray !important;
text-decoration: none !important;
}
</style>
கீழே உள்ள படத்தை பார்க்கவும் 

Save Template கொடுத்து விடவும். அவ்வளவு தான் உங்களுடைய தளத்தில் உள்ள கமெண்ட் அனைத்திலும் நம்பர் காணப்படும். 
..........................................................................................................................................
..............................................................................................................................................

..................................................................................................................................................
...................................................................................................................................................
மேலே உள்ள கோடிங்கில் நான் சிவப்பு நிறத்தில் காட்டியிருப்பது. back ground picture இதை உங்களுக்கு தேவையான picture url கொடுத்து நீங்கள் மாற்றி கொள்ளலாம். ஆனால் அதற்கு ஏற்ற மாதிரி width, length அளவுகளை மாற்ற வேண்டும். உங்களுக்கு கீழே சில picture கொடுத்துள்ளேன் இதில் உங்களுக்கு தேவையான picture மேல் வைத்து right click செய்து url காப்பி செய்து அந்த கோடிங்கில் பேஸ்ட் செய்யவும்

டுடே லொள்ளு 
Photobucket



Copyright @ 2013 வந்தேமாதரம் . Designed by Templateism | Love for The Globe Press