There are so many ways to Create Related article that has been used by many Bloggers and Website Professional. In the following article shows how to How to Create Related Post With Image In Horizontal Version.This feature function is a technique to increase the pageview of webpage or pageviews per-visit from blog visitors to read other related topics. In accordance with its function, usually this element added at the bottom of a blog post.
This part will automatically show user another most relevant topics related to the label, tag or that are contextually related to the post. Likely readers would click on one of them or maybe more than one display in new tab of a browser to continue learning about the same topic.
To Create Related Post display Image in Horizontal is very easy, only takes a few minutes. Related Articles with Picture is pretty good added under post content, because fast loading. Have a nice in appearance because the image can be modified from the size and quality. Title of the article can be slightly modified as needed, both types of letters and colors.
If you are using Blogger platform, the following describe how to make Related Post With Pictures.
1. Log in to Blogger.
2. Click the Template.
3. Backup template.
3. Click on Edit HTML.
4. Click Anywhere with Left mousekey 1 x in box template.
5. Click Ctrl + F (In order to speed up the search code),
And find the following code
]]></b:skin>6. Add the following code above
]]></b:skin> or </style> in CSS style section.#related-posts-image {
font-weight:bold;
font: 12px "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
}
#related-posts-image h3 {
border-bottom: 3px dotted #DBDBDB;
font: 20px Arial;
color: #232D74;
padding-bottom: 0px;
text-transform: uppercase;
font-weight: normal;
text-align: center;
height: 25px;
margin-bottom: 10px;
margin-top: 10px;
}
#related-posts-image ul {
width: 100%;
margin-bottom: 20px;
padding: 0px;
list-style: none;
display: inline;
height: auto;
}
#related-posts-image li {
float: left;
display: inline;
list-style: none;
height: 148px;
margin: 0 0 10px;
width: 23%;
line-height: 1.5em;
padding-right: 1%;
padding-left: 1%;
}
#related-posts-image ul li a {
margin:0;
}
#related-posts-image img {
padding:0;
margin:0; width:100%;
height:100px;
border:1px solid #eaeaea;
}
#related-posts-image img:hover {
opacity:0.7;
}7. Find this code
<div class='post-footer'> or similar8 Add the following code above or below
<div class='post-footer'>Note: You might find 2 of these code, first for the mobile version, second for the web version (add above or below the second code).
<!-- Related Post With Image Start -->
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>//<![CDATA[
var ry='<h3><span>You Might Also Like</span></h3>';rn='<h3><span>Explore Another Post</span></h3>';
var dw='';titles=new Array();titlesNum=0;urls=new Array();timeR=new Array();thumb=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if('thr$total' in d);if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;timeR[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLsJ2hGI3kWMU0V0tQRVVAvbfuyWmBDLXzvgD4TR-DDtA9HJpZ6fqWvkhdf1bLMgYrzGM3cQ38fr8JX8rowdUEnw-wILwlDF6Y7HqB2zA3Q6v8CXNPVTQflLOylnF1BbGmdDCVj_c_PFf0/s1600/no+image.jpg'};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=timeR[a];f.length+=1;f[f.length-1]=thumb[a]}}urls=b;titles=c;timeR=e;thumb=f}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/\?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);timeR.splice(b,1);thumb.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<ul>';while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'};dw+='<li><div class="pthumb"><a href="'+urls[c]+'" rel="nofollow"><img alt="'+titles[c]+'" src="'+ thumb[c].replace("/s72-c/","/s150/")+'"/></a></div><a href="'+urls[c]+'" rel="nofollow">'+titles[c]+'</a><div class="clear"></div></li></div>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('related-posts-image').innerHTML=dw};
//]]></script>
<div id='related-posts-image'>
<b:loop values='data:post.labels' var='label'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=19"' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>var maxresults=4;removeRelatedDuplicates();printRelatedLabels("<data:post.url/>");</script>
</div>
</b:if>
<!-- Related Post With Image End -->Description:
Text colored blue "4" is the maximum amount you want to display maxresults = 4,
Red colored text can be changed to "related posts" or "see also" and others.
the figure for the number of titles and image display.
Pink color text "S150" is the quality of the pictures, recommend to set around 150-300.
Green color text is a link image, if there is no picture automatically replace (preferably replace the link with your own style).
9. Save Template and see the results.
Hopefully useful.
