Related Post Widget Plugin For Blogger Blog

ब्लॉग पर realeted post विडजेट लगाये . realeted post विडजेट का ब्लॉग पर उपयोग सम्बंधित पोस्ट या label से जुडी अन्य पोस्ट को दर्शाने तक ही सीमित नहीं है. बल्कि यह विडजेट तकनीकी कारणों से भी ब्लॉग हेतु बेहत उपयोगी है जिनमे कुछ ख़ास कारण Blog traffic , alexa rank , और ऐसे ही कुछ कारण.


इस realeted post विडजेट को अपने ब्लॉग पर लगाये मिनटों में नीचे पक्रिया देखे .

• अपने ब्लॉगर खाते में प्रवेश करे .
• Layout >>Edit HTML पर जाए
• यहाँ Expand Widget Templates checkbox. पर क्लिक करे
• अब ]]></b:skin> कोड ढूंढे

अब नीचे दिया गया पूरा कोड ]]></b:skin> के पहले यथावत डाल डे.

<!--RelatedPostsStarts-->
<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 {
list-style:none;
}
#related-posts ul li {
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiY7yGJZw47l9SbZmVlK62OCsOzZK0b3Zd-TXBKifsRPrR2nI_E6564a1-60s9GrqdzHREEeKl_H2LahtM3CIpIWM9nMwa6j54khIybXKczmf6cejM_KUhJduDny7ErLQN3gJ032BQnz4/s400/255.gif) no-repeat scroll 0px 4px;
margin: 0.3em 0;
padding: 0 0 0.8em 20px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}

#related-posts ul li:hover{
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBOqvZBtgkWBfYGUkYDOOT_qBU6MF5CdfoybSFp-bOcXEcf6H8HBobIIpV8xwpC87ckP7LVkp0gj2dIxiF2SejhqjOknXzcxVWOUPPPabpXlUDX4OS8_3qlervW74pvv77GlG_go1Fkug/s400/251.gif) no-repeat scroll 0px 4px;
}

</style>
<script language='JavaScript'>
//<![CDATA[
var relatedTitles = new Arrayundefined);
var relatedTitlesNum = 0;
var relatedUrls = new Arrayundefined);
function related_results_labelsundefinedjson) {
for undefinedvar i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for undefinedvar k = 0; k < entry.link.length; k++) {
if undefinedentry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicatesundefined) {
var tmp = new Arrayundefined0);
var tmp2 = new Arrayundefined0);
forundefinedvar i = 0; i < relatedUrls.length; i++) {
ifundefined!containsundefinedtmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function containsundefineda, e) {
forundefinedvar j = 0; j < a.length; j++) if undefineda[j]==e) return true;
return false;
}
function printRelatedLabelsundefined) {
var r = Math.floorundefinedundefinedrelatedTitles.length - 1) * Math.randomundefined));
var i = 0;
document.writeundefined'<ul>');
while undefinedi < relatedTitles.length && i < 20) {
document.writeundefined'<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if undefinedr < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.writeundefined'</ul>');
}
//]]>
</script>
<!--RelatedPostsStops-->

• अब अपनी ब्लॉग templete में <div class='post-footer'> कोड तलाशे
• इस कोड के ठीक नीचे यह कोड डाल दे

<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 != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=9&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicatesundefined); printRelatedLabelsundefined);
</script>
</div>

परिवर्तन सेव करे :)

कोड का लाइव डेमो नीचे Related Posts पर देखे