How To Add Related Posts Widget or You might also like:Widget With Thumbnails & Summary To Blogger manually

i already post line view Related Posts Widget with Thumbnails  and without Thumbnails hew i am gong to talk about Related Posts Widget with Thumbnails,Summary in vertical alignment this manual method that mean you have to edit html

Well, let's go down 

• . Go To Blogger Dashboard >Template >Edit HTML.(before edit backup your template)


•  Now Search (CTRL + F) for this code:</head>


•  Paste the below code just above </head> 

<script <br />type='text/javascript'><br />//<![CDATA[<br />var relatedTitles = new Array();<br />var relatedUrls = new Array();<br />var relatedpSummary = new Array();<br />var relatedThumb = new Array();<br />var relatedTitlesNum = 0;<br />var relatedPostsNum = 4;<br />var relatedmaxnum = 75;<br />var relatednoimage = <br />"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGMofo9loRHCHTJo5LmiW7v1A_KVnBg6gh-RCiUMFGBByOnQXrDY1B8Oi9jpsucRo4g5VM7NZxbxMxlXJlcYc_xShFmP5NRAXzn5CmS0sJE0JvFqI_2TCegk76AU8pj6aFF49vOq7oa8Qi/s1600/No-Image-736965.jpg";<br />function<br /> readpostlabels(json) {<br /> var entry, postimg, postcontent, cat;<br /> for (var i = 0; i < json.feed.entry.length; i++) {<br /> entry = json.feed.entry[i];<br /> if (i==json.feed.entry.length) { break; }<br /> relatedTitles[relatedTitlesNum] = entry.title.$t;<br /> postcontent = "";<br /> if ("content" in entry) {<br /> postcontent = entry.content.$t;<br /> } else if ("summary" in entry) {<br /> postcontent = entry.summary.$t;<br /> }<br /> relatedpSummary[relatedTitlesNum] = <br />removetags(postcontent,relatedmaxnum);<br /> if ("media$thumbnail" in entry) {<br /> postimg = entry.media$thumbnail.url;<br /> } else {<br /> postimg = relatednoimage;<br /> }<br /> relatedThumb[relatedTitlesNum] = postimg;<br /> for (var k = 0; k < entry.link.length; k++) {<br /> if (entry.link[k].rel == 'alternate') {<br /> relatedUrls[relatedTitlesNum] = entry.link[k].href;<br /> break;<br /> }<br /> }<br /> relatedTitlesNum++;<br /> }<br />}<br />function showrelated() {<br /> var tmp = new Array(0);<br /> var tmp2 = new Array(0);<br /> var tmp3 = new Array(0);<br /> var tmp4 = new Array(0);<br /> for(var i = 0; i < relatedUrls.length; i++) {<br /> if(!contains(tmp, relatedUrls[i])) {<br /> tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i];<br /> tmp2.length += 1; tmp2[tmp2.length - 1] = relatedTitles[i];<br /> tmp3.length += 1; tmp3[tmp3.length - 1] = relatedpSummary[i];<br /> tmp4.length += 1; tmp4[tmp4.length - 1] = relatedThumb[i];<br /> }<br /> }<br /> relatedTitles = tmp2; relatedUrls = tmp; relatedpSummary = tmp3;<br />relatedThumb = tmp4;<br /> for(var i = 0; i < relatedTitles.length; i++){<br /> var index = Math.floor((relatedTitles.length - 1)*Math.random());<br /> var tempTitle = relatedTitles[i]; var tempUrls = relatedUrls[i];<br /> var tempResum = relatedpSummary[i]; var tempImage = relatedThumb[i];<br /> relatedTitles[i] = relatedTitles[index]; relatedUrls[i] = <br />relatedUrls[index];<br /> relatedpSummary[i] = relatedpSummary[index]; relatedThumb[i] = <br />relatedThumb[index];<br /> relatedTitles[index] = tempTitle; relatedUrls[index] = tempUrls;<br /> relatedpSummary[index] = tempResum; relatedThumb[index] = tempImage;<br /> }<br /> var somePosts = 0;<br /> var r = Math.floor((relatedTitles.length - 1)*Math.random());<br /> var relsump = r;<br /> var output;<br /> var dirURL = document.URL;<br /> while (somePosts < relatedPostsNum) {<br /> if (relatedUrls[r] != dirURL) {<br /> output = "<div class='relatedsumposts'>";<br /> output += "<a href='" + relatedUrls[r] + "' rel='nofollow' <br />target='_self' title='" + relatedTitles[r] + "'><img src='" + <br />relatedThumb[r] + "' /></a>";<br /> output += "<h6><br /><a href='" + relatedUrls[r] + "' <br />target='_self'>" + relatedTitles[r] + "</a></h6><br />";<br /> output += "<p><br />" + relatedpSummary[r] + " ... </p><br />";<br /> output += "</div><br />";<br /> document.write(output);<br /> somePosts++;<br /> if (somePosts == relatedPostsNum) { break; }<br /> }<br /> if (r < relatedTitles.length - 1) {<br /> r++;<br /> } else {<br /> r = 0;<br /> }<br /> if(r==relsump) { break; }<br /> }<br />}<br />function removetags(text,length){<br /> var pSummary = text.split("<");<br /> for(var i=0;i<pSummary.length;i++){<br /> if(pSummary[i].indexOf(">")!=-1){<br /> pSummary[i] = <br />pSummary[i].substring(pSummary[i].indexOf(">")+1,pSummary[i].length);<br /> }<br /> }<br /> pSummary = pSummary.join("");<br /> pSummary = pSummary.substring(0,length-1);<br /> return pSummary;<br />}<br />function contains(a, e) {<br /> for(var j = 0; j < a.length; j++) if (a[j]==e) return true;<br /> return false;<br />}<br />//]]><br /></script><br />

•  Now Search (CTRL + F) for this code:]]></b:skin>


• Paste the below code just above ]]></b:skin>

 




.relatedsumposts {float:left; <br />margin:0px 5px; overflow:hidden; text-align: center; width: 120px; <br />height:210px;}<br />.relatedsumposts:hover {background-color: #F3F3F3; <br />-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: <br />10px;}<br />.relatedsumposts img:hover {-khtml-opacity:0.4; -moz-opacity:0.4; <br />opacity:0.4;}<br />.relatedsumposts a {color: #linkcolor; display: inline; font-size: 10px;<br /> line-height: 1;}<br />.relatedsumposts img {margin-top: 2px; height: 82px; padding: 5px; <br />width: 82px; border: 1px solid #fff; -webkit-border-radius: 100px; <br />-moz-border-radius: 100px; border-radius: 100px; -webkit-box-shadow: 0 <br />1px 2px rgba(0, 0, 0, .4); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);<br /> box-shadow: 0 1px 2px rgba(0, 0, 0, .4);}<br />.relatedsumposts h6 {display: table-cell; height: 5em; margin: 5px 0 0; <br />overflow: hidden; padding-bottom: 2px; vertical-align: middle; width: <br />130px;}<br />.relatedsumposts p {border-top: 1px dotted #777777; border-bottom: 1px <br />dotted #777777; color: #summarycolor; font-size: 10px; height: 4em; <br />line-height: 1; margin: 5px 0 0; overflow: hidden; padding: 5px 0 15px <br />0; text-align: left;}<br />

• Find the following code in your template:

 <b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url'
rel='tag'><data:label.name/></a><b:if
cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop>

•  Now put the following code in betwen </b:if> and </b:loop> that are red colored in the above code:

<b:if <br />cond='data:blog.pageType == "item"'><script <br />expr:src='"/feeds/posts/default/-/" + data:label.name +<br /> <br />"?alt=json-in-script&callback=readpostlabels&max-results=50"'<br /> type='text/javascript'/></b:if><br />

•  Find the following code in your template:

</b:includable>

<b:includable id='postQuickEdit' var='post'>

• Add the following code above it:

<b:if <br />cond='data:blog.pageType == "item"'><br /><div id='relatedpostssum'><br /><div style='text-align: left; <br />font-size: 15px; margin-bottom: 10px; font-weight: bold;'><br />Related <br />Posts</div><br /><script <br />type='text/javascript'>showrelated();</script></div><br /><div style='clear:both;'/><br /></b:if><br />

•  Save your changes and well done.

Click Here For Get More Blogger Tutorial

  I tried my best to make this tutorial as simple as possible to understand

 If still you face any problem to How To Add Related Posts Widget With Thumbnails & Summary To Blogger? then feel free to ask me. Leave a
comment below this post and I'll surely reply to you as soon as
possible .

 Thanks!

Browse More Articles

Tweet

Written by Unknown

We are Creative Blogger Theme Wavers which provides user friendly, effective and easy to use themes. Each support has free and providing HD support screen casting.