Blogger க்கான நுட்பங்கள்- 2 : ஒவ்வொரு பதிவிற்கும் கீழ் Related Posts ஐக் காட்டுதல்
உங்கள் ஒவ்வொரு பதிவிற்கும் கீழ் அதற்கு நெருங்கிய பதிவுகளை அதாவது ஒரே Lable இல் இருக்கும் பதிவுகளைக் காட்டுதல்
அவ்வாறு காட்டுவதால் உங்களில் தளத்துக்கு ஒரு பதிவை படிக்க வரும் வாசகர் அது சம்பந்தமான பதிவுகளை இலகுவாய் படிக்க வசதியாய் இருக்கும் இதனால் கூடிய நேரம் உங்கள் வலைப்பதிவில் செலவழிப்பார்கள்.
இதை நிறுவும் முறை
மேல் கூறிய முறையில் <p><data:post.body/></p> என்ற வரியைத் தேடவும் அதன் கீழ் உடனடியாக பின்வரும் Code ஐ copy செய்து paste பண்ணவும்.
<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop
values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast
!= "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"'
type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>
பின் உங்கள் tempelate ஐ upload பண்ணிக்கொள்ளவும். அவ்வளவு தான்..
- முதலில் blogger இல் dashboard சென்று அதில் Layout என்பதை தெரிவு செய்யவும்.
- அதில் Edit HTML என்பதை தெரிவு செய்யவும்.
- அதில் Download Full Template என்பதைக் Click செய்து உங்கள் Template ஐ download செய்து கொள்ளவும்.
- உங்கள் Template ஐ Wordpad இல் Open பண்ணவும் (Edit பண்ண இலகுவாக இருக்கும் )
- பின் Ctrl + F ஐஅழுத்தி </head> என்பதை தேடவும்.
- பின் கீழ் உள்ள Code ஐ Copy செய்து </head> மேல் Paste பண்ணவும்.
<style>
#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
color : #940f04;
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #054474;
font-size : 11px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url("http://i299.photobucket.com/albums/mm297/zozuglogger/weed-bullet.gif")
no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}
</style>
<script src='http://tamilhackxserver.110mb.com/Javascript/related_post.js'
type='text/javascript'/>
#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
color : #940f04;
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #054474;
font-size : 11px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url("http://i299.photobucket.com/albums/mm297/zozuglogger/weed-bullet.gif")
no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}
</style>
<script src='http://tamilhackxserver.110mb.com/Javascript/related_post.js'
type='text/javascript'/>
மேல் கூறிய முறையில் <p><data:post.body/></p> என்ற வரியைத் தேடவும் அதன் கீழ் உடனடியாக பின்வரும் Code ஐ copy செய்து paste பண்ணவும்.
<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop
values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast
!= "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"'
type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>
பின் உங்கள் tempelate ஐ upload பண்ணிக்கொள்ளவும். அவ்வளவு தான்..
இதில் ஏதேனும் சந்தேகங்கள் இருந்தால் கூறவும்
18 comments:
இதைவிட இலகுவாக இங்கே சென்று இலகுவாக Widget ஆகவே பெற்றுக்கொள்ளலாம்.
தகவலுக்கு நன்றி.
வாழ்த்துகள்.
நன்றி....
நன்றி.... தமிழ் காக்ஸ்.... மிக உபயோகமுள்ளவை...
blogger இல கரை காணுறதெண்டு ஒரு முடிவாத்தான் கிளம்பியிருக்கிறீங்க போல? நல்லம் நல்லம், தொடர்க நற்பணி!!!
தொர..பெரிய விசயமெல்லாம் பேசேக்க..
இன்னும் கொஞ்சம் எளிமையாக..
நம்ம மாதிரி பாமர மக்களுக்கும் புரியணும் இல்லையா!!??...
உங்கள் கருத்துக்கு மிக்க நன்றி Subankan
//இதைவிட இலகுவாக இங்கே சென்று இலகுவாக Widget ஆகவே பெற்றுக்கொள்ளலாம்
நீங்கள் கூறிய முறையில் இமேஜ் வடிவில் Related Posts தோன்றும் சிலர் அதை விரும்ப மாட்டார்கள் அவர்களுகாகவே இந்த முறை
மிக்க நன்றி Yaalvaanan, பேரரசன், தேஜோ, sinmajan
//blogger இல கரை காணுறதெண்டு ஒரு முடிவாத்தான் கிளம்பியிருக்கிறீங்க போல?
அப்பிடி ஒரு நோக்கமும் இல்ல நம்மளுக்கு தெரிந்ததை மற்றவங்களுக்கும் சொல்லிகொடுக்க வேண்டும் என்ற ஒரு ஆசைதான்
தமிழ் வலைப்பூவில் லின்க் வித்தின்(linkwithin) விட்ஜெட் செயல்படாது!!!
தகவலுக்கு நன்றி....
மிக்க நன்றி imran, பதி
அருமையான கட்டுரை.. எனது வலைத்தளத்தில் அமைத்து விட்டேன்.
LIMATION
http://limation.blogspot.com
மிக்க நன்றி limattech
உங்கள் தளம் மிக அருமையாக உள்ளது
வணக்கம். என்னுடைய வலைத்தளத்தில் இரண்டாவதாக கூறியுள்ள வரி இல்லை. உதவ முடியுமா?
இரண்டாவதாக உள்ள வரி உங்கள் ப்லோக் இல் கட்டாயம் இருக்கும் நீங்கள் data:post.body என கொடுத்து தேடித் பாருங்கள்
சில நேரங்களில் அந்த வரியில் உள்ள space காரணமாக Search பண்ணும் போது அந்த வரி கண்டுபிடிக்காமல் போகலாம்.
மீண்டும் முயச்சி செய்து பாருங்கள்
அய்யா, என்னுடைய template - யை பதிவிறக்கம் செய்துதான் edit பண்ண வேண்டுமா? நான் அப்படியே, Expand widget template - ஜ் கிளிக் செய்து விட்டு செய்தேன். வேலை செய்யவில்லை, ஏன்? எனது முகவர்: www.tamizhpadai.blogspot.com
மன்னிக்கவும், வேலை செய்கிறது. உங்கள் பதிவிற்கு நன்றி.
மிக்க நன்றி மு.இரா
உங்கள் சிறப்பான பணி தொடர வாழ்த்துக்கள்.
உங்க இந்த சேவையை பயன் படுத்தினேன்... account inactive என என் பதிவின் சுட்டிகளின் கீழ் வருகிறது இதனை எப்படி நீக்கலாம்...
Post a Comment