how to install line vieve Related Posts Widget or You might also like:Widget with Thumbnail For Blogger manually

you know Related Posts Widget  is best way to increase your blog traffic I already post how to install line vieve Related Posts Widget without Thumbnail For Blogger manually  now i am going to talk about installation related post Widget with Thumbnail & this related post Widget will appear as line 

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 type='text/javascript'><br />//<![CDATA[<br />/*<br />Related Post with Thumbnail & Summary 1.0 (http://www.ublogger.net)<br />*/<br />var relnojudul = 0;<br />var numpost = 10;<br />var numchars = 120;<br />var reljudul=new Array();var relurls=new Array();var relcuplikan=new Array();var relgambar=new Array();function saringtags(g,h){var e=g.split("<");for(var f=0;f<e.length;f++){if(e[f].indexOf(">")!=-1){e[f]=e[f].substring(e[f].indexOf(">")+1,e[f].length)}}e=e.join("");e=e.substring(0,h-1);return e}function relpostimgcuplik(h){for(var e=0;e<h.feed.entry.length;e++){var g=h.feed.entry[e];reljudul[relnojudul]=g.title.$t;postcontent="";if("content" in g){postcontent=g.content.$t}else{if("summary" in g){postcontent=g.summary.$t}}relcuplikan[relnojudul]=saringtags(postcontent,numchars);if("media$thumbnail" in g){postimg=g.media$thumbnail.url}else{postimg="http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.GIF"}relgambar[relnojudul]=postimg;for(var f=0;f<g.link.length;f++){if(g.link[f].rel=="alternate"){relurls[relnojudul]=g.link[f].href;break}}relnojudul++}}function contains(a,e){for(var f=0;f<a.length;f++){if(a[f]==e){return true}}return false}function artikelterkait(){var v=new Array(0);var w=new Array(0);var x=new Array(0);var A=new Array(0);for(var u=0;u<relurls.length;u++){if(!contains(v,relurls[u])){v.length+=1;v[v.length-1]=relurls[u];w.length+=1;w[w.length-1]=reljudul[u];x.length+=1;x[x.length-1]=relcuplikan[u];A.length+=1;A[A.length-1]=relgambar[u]}}reljudul=w;relurls=v;relcuplikan=x;relgambar=A;for(var u=0;u<reljudul.length;u++){var B=Math.floor((reljudul.length-1)*Math.random());var i=reljudul[u];var s=relurls[u];var y=relcuplikan[u];var C=relgambar[u];reljudul[u]=reljudul[B];relurls[u]=relurls[B];relcuplikan[u]=relcuplikan[B];relgambar[u]=relgambar[B];reljudul[B]=i;relurls[B]=s;relcuplikan[B]=y;relgambar[B]=C}var r=0;var D=Math.floor((reljudul.length-1)*Math.random());var z=D;var q;var t=document.URL;while(r<numpost){if(relurls[D]!=t){q="<br /><li class='news-title clearfix'>";q+="<a href='"+relurls[D]+"' rel='nofollow' target='_top' title='"+reljudul[D]+"'><div class='overlayb'><br /></div><br /><img src='"+relgambar[D]+"' /></a>";q+="<a class='relinkjdulx' href='"+relurls[D]+"' target='_top'>"+reljudul[D]+"</a>";q+="<span class='news-text'>"+relcuplikan[D]+"</span>";q+="</li><br />";document.write(q);r++;if(r==numpost){break}}if(D<reljudul.length-1){D++}else{D=0}if(D==z){break}}};<br />//]]><br /> </script>

•  To change the number of posts, edit var numpost = 10 , you may change 10 to 4, 5, 6 or what ever you want. 


•  to change the length of description edit numchars = 120.


• again Go to your template editor and search </b:skin>. add the code below just before </b:skin>

#related_posts{padding:0 5px 5px;overflow:hidden;display:inline;}#related_posts h4{padding:5px;font-size:16px;text-align:left}ul#relpost_img_sum{margin:0;padding:0;text-align:justify;display:inline;}ul#relpost_img_sum li{list-style:none;padding:5px;margin:0;width:490px;float:left;display:inline;}ul#relpost_img_sum li a{display:block}ul#relpost_img_sum li img{float:left;width:60px;height:60px;margin-right:5px;padding:2px;background-color:#1B1B1B;border:1px solid #cacaca}<br />ul#relpost_img_sum li a.relinkjdulx{display:block;height:30px;overflow:hidden;margin-bottom:3px;background-image:none;font-weight:bold;text-decoration:none;background:#FFFF99;}

•  Now search data:post.body


•  you may find more than one data:post.body try the following code after every data:post.body tag if it doesn’t work with one. 

<div id='related_posts'>
          <h4>Related Posts</h4>
          <b:loop values='data:post.labels' var='label'>
              
<script expr:src='&quot;/feeds/posts/default/-/&quot; +
data:label.name +
&quot;?alt=json-in-script&amp;callback=relpostimgcuplik&amp;max-results=50&quot;'
type='text/javascript'/>
          </b:loop>
          <ul id='relpost_img_sum'>
               <script type='text/javascript'>artikelterkait();</script>
          </ul><a href=”http://www.ublogger.net”>.</a>
</div>

•   Save the template. 

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 install line vieve Related Posts Widget with Thumbnail For Blogger manually  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.