How To Add Related Post Widget In Blogger Blog ?
In this tutorial i will share you the trick of adding a related post widget for your blogger it makes your blog more attractive
2) Download a copy of your template its for your security
3) After downloading click on edit html
4) Use Ctrl+F to find </head>
5) Then paste the code given below before it
</head>
<script type='text/javascript'>//<![CDATA[var relatedTitles = new Array();var relatedUrls = new Array();var relatedpSummary = new Array();var relatedThumb = new Array();var relatedTitlesNum = 0;
var relatedPostsNum = 4; // number of entries to be shownvar relatedmaxnum = 75; // the number of characters of summaryvar relatednoimage = "http://seomethodes.blogspot.com/-PpjfsStySz0/UF91FE7rxfI/AAAAAAAACl8/092MmUHSFQ0/s1600/no_image.jpg"; // default picture for entries with no image
function readpostlabels(json) { var entry, postimg, postcontent, cat; for (var i = 0; i < json.feed.entry.length; i++) { entry = json.feed.entry[i]; if (i==json.feed.entry.length) { break; } relatedTitles[relatedTitlesNum] = entry.title.$t; postcontent = ""; if ("content" in entry) { postcontent = entry.content.$t; } else if ("summary" in entry) { postcontent = entry.summary.$t; } relatedpSummary[relatedTitlesNum] = removetags(postcontent,relatedmaxnum); if ("media$thumbnail" in entry) { postimg = entry.media$thumbnail.url; } else { postimg = relatednoimage; } relatedThumb[relatedTitlesNum] = postimg; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { relatedUrls[relatedTitlesNum] = entry.link[k].href; break; } } relatedTitlesNum++; }}function showrelated() { var tmp = new Array(0); var tmp2 = new Array(0); var tmp3 = new Array(0); var tmp4 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = relatedTitles[i]; tmp3.length += 1; tmp3[tmp3.length - 1] = relatedpSummary[i]; tmp4.length += 1; tmp4[tmp4.length - 1] = relatedThumb[i]; } } relatedTitles = tmp2; relatedUrls = tmp; relatedpSummary = tmp3; relatedThumb = tmp4; for(var i = 0; i < relatedTitles.length; i++){ var index = Math.floor((relatedTitles.length - 1) * Math.random()); var tempTitle = relatedTitles[i]; var tempUrls = relatedUrls[i]; var tempResum = relatedpSummary[i]; var tempImage = relatedThumb[i]; relatedTitles[i] = relatedTitles[index]; relatedUrls[i] = relatedUrls[index]; relatedpSummary[i] = relatedpSummary[index]; relatedThumb[i] = relatedThumb[index]; relatedTitles[index] = tempTitle; relatedUrls[index] = tempUrls; relatedpSummary[index] = tempResum; relatedThumb[index] = tempImage; } var somePosts = 0; var r = Math.floor((relatedTitles.length - 1) * Math.random()); var relsump = r; var output; var dirURL = document.URL;
while (somePosts < relatedPostsNum) { if (relatedUrls[r] != dirURL) {
output = "<div class='relatedsumposts'>"; output += "<a href='" + relatedUrls[r] + "' rel='nofollow' target='_self' title='" + relatedTitles[r] + "'><img src='" + relatedThumb[r] + "' /></a>"; output += "<h6><a href='" + relatedUrls[r] + "' target='_self'>" + relatedTitles[r] + "</a></h6>"; output += "<p>" + relatedpSummary[r] + " ... </p>"; output += "</div>"; document.write(output); somePosts++; if (somePosts == relatedPostsNum) { break; } } if (r < relatedTitles.length - 1) {
r++; } else { r = 0; }
if(r==relsump) { break; } }}function removetags(text,length){ var pSummary = text.split("<"); for(var i=0;i<pSummary.length;i++){ if(pSummary[i].indexOf(">")!=-1){ pSummary[i] = pSummary[i].substring(pSummary[i].indexOf(">")+1,pSummary[i].length); } } pSummary = pSummary.join(""); pSummary = pSummary.substring(0,length-1); return pSummary;} function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false;}//]]></script>
- To change the default picture replace the URL shown in above code by your own URL
- for how much post you want to show replace the value shown in red colour in above code as much you want the value
- To change the number of character to be shown in post summary value of 75 change in numbers you wnt to show in post summary
6) now search the following code
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
7) after search these codes copy the codes given below and paste these code after thoese codes
<b:if cond='data:blog.pageType == "item"'><script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=readpostlabels&max-results=50"' type='text/javascript'/></b:if>
8) now find the following codes
</b:includable> <b:includable id='postQuickEdit' var='post'>
9) now copy and paste these codes above before it
<b:if cond='data:blog.pageType == "item"'> <div class='post-footer-line post-footer-line-4'> <div id='relatedpostssum'><div style='text-align: left; font-size: 15px; margin-bottom: 10px; font-weight: bold;'>RELATED POSTS</div> <script type='text/javascript'>showrelated();</script> </div> <div style='clear:both;'/> </div></b:if>
10) now finaly search this code ]]></b:skin>
11) added codes given below just before these
<relatedsumposts { float: left; margin: 0px 5px; overflow: hidden; text-align: center; /* width and height of the related posts area */ width: 120px; height: 210px;}
.relatedsumposts:hover { background-color: #F3F3F3; -webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;}
.relatedsumposts img:hover {-khtml-opacity:0.4;-moz-opacity:0.4;opacity:0.4;}
.relatedsumposts a { /* link properties */color: #linkcolor; display: inline; font-size: 10px; line-height: 1;}.relatedsumposts img { /* thumbnail properties */margin-top: 2px; height: 82px; padding: 5px; width: 82px;border: 1px solid #fff;-webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);box-shadow: 0 1px 2px rgba(0, 0, 0, .4);}.relatedsumposts h6 { /* title properties */ display: table-cell; height: 5em; margin: 5px 0 0; overflow: hidden; padding-bottom: 2px; vertical-align: middle; width: 130px;}
.relatedsumposts p { /* summary properties */border-top: 1px dotted #777777;border-bottom: 1px dotted #777777;color: #summarycolor; font-size: 10px; height: 4em; line-height: 1; margin: 5px 0 0; overflow: hidden; padding: 5px 0 15px 0; text-align: left;}
- Adjust the width by replacing such width you want width shown in above codes in blue colour the width (120) height (210)
- For changing the size of thumbnails replace the value in pink colour the values marked in pink (82)
- change the coloue summary if you want #summarycolor
- For determine the border roudens replace these value the values in green (100)
now take a few seconde to save the template
This post was written by: Author Name
Author description goes here. Author description goes here. Follow him on Twitter
Subscribe to:
Post Comments (Atom)
0 Responses to “How To Add Related Post Widget In Blogger Blog ?”
Post a Comment