ப்ளாக்கரில் பின்னூட்டங்களை வரிசையிட

 

ப்ளாக்கர் தளத்தில் இடப்படும் பின்னூட்டங்களின் எண்ணிக்கையை பதிவின் கீழ் காணலாம். ஆனால் அது மொத்த எண்ணிக்கையை தான் காட்டுமே தவிர 1,2,3 என்று வரிசைப்படுத்தாது. அதை எப்படி வரிசைப்படுத்துவது என்று பார்ப்போம்.

1. முதலில் Blogger Dashboard=>Design=>Edit செல்லவும்.

Download Full Template என்பதை கிளிக் செய்து ஒரு காப்பி எடுத்து வைத்து கொள்ளுங்கள். நாம் டெம்ப்ளேட்டில் மாற்றம் செய்யும் போது தவறு ஏதாவது ஏற்பட்டால் மீண்டும் அதை Upload செய்து கொள்ளலாம்.

2. Expand Widget Templates என்பதை கிளிக் செய்யவும்.


3. பிறகு Cntrl+F அழுத்தி


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

என்ற code-ஐ தேடி அதற்கு முன்னால் பின்வரும் Code-ஐ Paste செய்யவும்.


<script type='text/javascript'>var CommentsCounter=0;</script> <!--COMM-NUM-STARTS-->

4. பிறகு


<data:commentPostedByMsg/>

என்ற Code-ஐ தேடி அதற்கு பின்னால் பின்வரும் Code-ஐ paste செய்யவும்.


<!--COMM-NUM-STARTS-->

<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>

<!--COMMNUM-STOPS-->

5. பிறகு Save Template என்பதை க்ளிக் செய்யவும்.

இனி  உங்கள் தளத்தில் உள்ள பின்னூட்டங்களில் 1,2,3 என்று நம்பர் வரும்.

படத்துடன் வரிசைப்படுத்த:

இந்த தளத்தில் உள்ளது போல் படத்துடன் வரிசைப்படுத்துவது எப்படி? என்று பார்ப்போம்.

6. Edit Html பக்கத்திற்கு சென்று,


</head>

என்ற Code-ஐ தேடி அதற்கு முன்னால் பின்வரும் Code-ஐ Paste செய்யவும்.


<!--COMM-NUM-STARTS-->

<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: 55px;

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>

<!--COMM-NUM-STOPS-->

**மேலுள்ள Code-ல் சிகப்பு நிறத்தில் உள்ள http://i50.tinypic.com/egx3t3.jpg என்ற முகவரிக்கு பதிலாக உங்களுக்கு விருப்பமான படத்தின் முகவரியை (Image URL) கொடுக்கவும்.

** மேலுள்ள Code-ல் சிகப்பு நிறத்தில் உள்ள width: 55px; height: 48px; என்பதில் உங்களுக்கு ஏற்றவாறு அளவை மாற்றிக் கொள்ளலாம்.

**மேலுள்ள Code-ல் நீல நிறத்தில் உள்ள white, gray என்பதற்கு பதிலாக உங்களுக்கு விருப்பமான கலரை கொடுக்கலாம்.

உங்களுக்காக சில படங்கள்:

---

---

---

---

படத்தின் முகவரியை (Image Url) Copy செய்ய:

உங்களுக்கு  தேவையான படத்தின் மேல் Mouse-ஐ நகர்த்தி, Right Click அழுத்தி, Copy Image Location என்பதை க்ளிக் செய்யவும். Copy செய்த முகவரியை மேலே சொன்னவாறு Code-ல் Paste செய்யவும்.