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

by
ப்ளாக்கரில் நம்பர் - படம்

ப்ளாக்கர் தளத்தில் இடப்படும் பின்னூட்டங்களின் எண்ணிக்கையை பதிவின் கீழ் காணலாம். ஆனால் அது மொத்த எண்ணிக்கையை தான் காட்டுமே தவிர 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 செய்யவும்.

நன்றி:  bloggerstop.net

இதையும் படிங்க:  நமது ப்ளாக்கில் Back to Top பட்டனை கொண்டுவர..

22 thoughts on “ப்ளாக்கரில் பின்னூட்டங்களை வரிசையிட”

  10. Wowwwwwwww…. thanks a lot Basith…. you are very fast… I asked this in the last post and the next post is here, the next day.. thanks a lot 🙂

    I added this to both my blogs
    http://prem82.blogspot.com
    http://smileprem.blogspot.com

    One suggestion.

    I chose the blue color bubble for my blogs, however the image is cropped on the right hand side. (i cudnt see the full bubble). If we increase the width from 50px to 55 px, its clear. Can you mark that width/height as a variable parameter in RED color?. It would he helpful for all the users who choose their own custom bubbles.

    background: url(http://i50.tinypic.com/egx3t3.jpg) no-repeat;
    // the below as the variable parameters???
    width: 55px;
    height: 48px;

    You rock buddy !!!

  11. @Premkumar Masilamani

    //the image is cropped on the right hand side. (i cudnt see the full bubble). If we increase the width from 50px to 55 px, its clear.//

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

  13. //ஒட்டக்கூத்தன் said…

    மிகவும் பயனுள்ள தகவல்கள். இது போன்ற தகவல்களை பயன்படுத்திதான் என் வலையை செழுமைபடுத்தி வருகிறேன்.//

    தங்கள் வருகைக்கும், கருத்துக்கும் நன்றி, நண்பா..!

  15. //ஆமினா said…

    அஸ்ஸலாமு அலைக்கும் வரஹ்….

    தெளிவா சொன்னீங்க. நான் இணைத்துவிட்டேன். மிக்க நன்றி பாசித்
    //

    வ அலைக்கும் ஸலாம் வரஹ்..

    தங்கள் வருகைக்கும், கருத்துக்கும் நன்றி, சகோதரி!

  18. //ஆனந்தி.. said…

    done it!thank you basit..!!
    //

    மிக்க மகிழ்ச்சி சகோதரி!

    தங்கள் வருகைக்கும், கருத்துக்கும் நன்றி!

  19. //aranthairaja said…

    ஆனால் எனக்கு இம்மாற்றம் நிகழவில்லை நண்பரே… நான் ஏதேனும் பிழை செய்துவிட்டேனா என்று தெரியவில்லை…

    http://aranthaiking.blogspot.com/2010/12/blog-post_10.html
    //

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

    உங்கள் ப்ளாக்கை பார்த்தேன். step 6-ல் சொன்ன code சரியாக செய்துள்ளீர்கள். step 3,4 சொன்னவற்றை மட்டும் மீண்டும் சரிபார்க்கவும்.

    தங்கள் வருகைக்கும், கருத்துக்கும் நன்றி, நண்பா!

  20. தொடர்ந்து பல பயனுள்ள தகவல்களை சொல்லிக்கொடுத்து வருகிறீர்கள்… வாழ்த்துக்கள்…