பிளாக்கர் தளங்களில் பதிவுகளின் தலைப்பில் பின்னூட்டங்களின் எண்ணிக்கையை அழகிய படத்துடன் காட்டலாம். இது Bubble Comments Count எனப்படும். சில டெம்ப்ளேட்களில் இது Default-ஆக இருக்கும். அப்படி இல்லாத தளங்களில் வைப்பது எப்படி? என்று இங்கு பார்ப்போம்.
1. முதலில் Blogger Dashboard => Template பகுதிக்கு செல்லுங்கள்.
2. அங்கு வலதுபுறம் மேலே Backup/Restore என்பதை க்ளிக் செய்து, உங்கள் டெம்ப்ளேட்டை பதிவிறக்கிக் கொள்ளுங்கள். நாம் டெம்ப்ளேட்டில் மாற்றம் செய்யும் போது பிழை வந்தால் மீண்டும் பழைய நிலைக்கு செல்லலாம்.
3. பிறகு Edit Html => Proceed என்பதை க்ளிக் செய்யுங்கள்.
4. பிறகு Expand Widget Templates என்பதற்கு அருகே உள்ள பெட்டியில் டிக் செய்யுங்கள்.
5. பிறகு
*** Comment Bubble-ஐ இடது புறம் வைக்க விரும்பினால் மேலுள்ள Code-ல் right என்பதற்கு பதிலாக left என்று மாற்றவும்.
**** background : url என்ற இடத்தில் உங்களுக்கு பிடித்த படங்களின் முகவரியைக் கொடுக்கலாம்.
6. பிறகு கீழுள்ள Code-ஐ கண்டுபிடிக்கவும்.
*** மேலுள்ள Code-ல் சிவப்பு கலரில் உள்ளது நீங்கள் புதிதாக சேர்க்க வேண்டிய Code. சரியாக பார்த்து அதனை சேர்க்கவும்.
7. பிறகு Preview பட்டனை அழுத்தி பார்க்கவும். சரியாக வந்தால் Save Template என்பதை க்ளிக் செய்யவும்.
அவ்வளவு தான்! இனி பதிவின் தலைப்புக்கு அருகே பின்னூட்டங்களின் எண்ணிக்கை அழகிய படத்துடன் காட்சி அளிக்கும்.
உங்களுக்கு பிடித்த படங்களின் மீது Righ Click செய்து, Copy Image location என்பதை க்ளிக் செய்தால் படத்தின் முகவரி கிடைக்கும்.
1. முதலில் Blogger Dashboard => Template பகுதிக்கு செல்லுங்கள்.
2. அங்கு வலதுபுறம் மேலே Backup/Restore என்பதை க்ளிக் செய்து, உங்கள் டெம்ப்ளேட்டை பதிவிறக்கிக் கொள்ளுங்கள். நாம் டெம்ப்ளேட்டில் மாற்றம் செய்யும் போது பிழை வந்தால் மீண்டும் பழைய நிலைக்கு செல்லலாம்.
3. பிறகு Edit Html => Proceed என்பதை க்ளிக் செய்யுங்கள்.
4. பிறகு Expand Widget Templates என்பதற்கு அருகே உள்ள பெட்டியில் டிக் செய்யுங்கள்.
5. பிறகு
]]></b:skin>
என்ற Code-ஐ தேடி அதற்கு முன்னால் பின்வரும் Code-ஐ காப்பி செய்து பேஸ்ட் செய்யுங்கள்.
.comment-bubble {
float : right;
width : 48px;
height : 48px;
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv2IcP4PIMAiSmJhI3fjaqytpz32cVSI2Gi678UFln2DjEWHbnLKPamj8U-IFysj0wDIgEd-yBS8iedTkiM6kNFdd8EXQyJl8g5JAIOA5ZntEs-TNekewvTcHSlpL2OndFB1neFCYs7tDo/s1600/Comment+Bubble+%2815%29.png) no-repeat;
font-size : 18px;
margin-top : -15px;
margin-right : 2px;
text-align : center;
}
float : right;
width : 48px;
height : 48px;
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv2IcP4PIMAiSmJhI3fjaqytpz32cVSI2Gi678UFln2DjEWHbnLKPamj8U-IFysj0wDIgEd-yBS8iedTkiM6kNFdd8EXQyJl8g5JAIOA5ZntEs-TNekewvTcHSlpL2OndFB1neFCYs7tDo/s1600/Comment+Bubble+%2815%29.png) no-repeat;
font-size : 18px;
margin-top : -15px;
margin-right : 2px;
text-align : center;
}
*** Comment Bubble-ஐ இடது புறம் வைக்க விரும்பினால் மேலுள்ள Code-ல் right என்பதற்கு பதிலாக left என்று மாற்றவும்.
**** background : url என்ற இடத்தில் உங்களுக்கு பிடித்த படங்களின் முகவரியைக் கொடுக்கலாம்.
6. பிறகு கீழுள்ள Code-ஐ கண்டுபிடிக்கவும்.
<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'><b:if cond='data:post.allowComments'>
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
</b:if>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
<div class='post hentry uncustomized-post-template'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'><b:if cond='data:post.allowComments'>
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
</b:if>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
*** மேலுள்ள Code-ல் சிவப்பு கலரில் உள்ளது நீங்கள் புதிதாக சேர்க்க வேண்டிய Code. சரியாக பார்த்து அதனை சேர்க்கவும்.
7. பிறகு Preview பட்டனை அழுத்தி பார்க்கவும். சரியாக வந்தால் Save Template என்பதை க்ளிக் செய்யவும்.
அவ்வளவு தான்! இனி பதிவின் தலைப்புக்கு அருகே பின்னூட்டங்களின் எண்ணிக்கை அழகிய படத்துடன் காட்சி அளிக்கும்.
உங்களுக்காக சில படங்கள்:
உங்களுக்கு பிடித்த படங்களின் மீது Righ Click செய்து, Copy Image location என்பதை க்ளிக் செய்தால் படத்தின் முகவரி கிடைக்கும்.
No comments:
Post a Comment