Skip to main content

How To Make Related Post

By


Related articles / Related post very useful for the visitors of your blog, because it will be easier for visitors to read articles that still have the same topic. Even if you look at when you use the google search at the bottom there are still some search suggestions or anything related to the article you were looking for, I conclude it is something that is almost the same function as the related post or article related but perhaps different naming it. 

after knowing some of the above so I agree with the master seo that install related post or article related is one of the techniques suggested seo, because Google also uses the same thing.

How to make related Post

1. Log into Blogger Template >> 

2. Select the Edit HTML >> Wait until open HTML Code 

3. Find the code "]]> </ b: skin>" and place the following code right above it.

     /* Related Posts --- */
    .related-post .post-thumbnail {
    z-index: 1;
    position: relative;
    width: 98px;
    height: 98px;
    margin: 0;
    display: block;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: inset 2px 2px 5px #444;
    -moz-box-shadow: inset 2px 2px 5px #444;
    box-shadow: inset 2px 2px 5px #555;
    }
    .related-post {
    float: left;
    position: relative;
    width: 98px;
    height: 98px;
    margin: 0 10px 10px 0;
    background: #F6F6F6;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    }
    .related-post .related-post-title {
    display: none;
    float: left;
    background: #000;
    color: #fff;
    text-shadow: none;
    font-weight: bold;
    padding: 10px;
    position: absolute;
    top: -20px;
    left: 40px;
    z-index: 2;
    width: 200px;
    -webkit-box-shadow: 0 0 2px #444;
    -moz-box-shadow: 0 0 2px #444;
    box-shadow: 0 0 2px #444;
    }    .related-post:hover .related-post-title {display: block;}

4. Then look up the code similar to the code below >> code search first and if there is no next find codes.

<div class='post-footer'>
        <div class='post-footer-line post-footer-line-1'/>
          <div class='post-footer-line post-footer-line-2'/>
          <div class='post-footer-line post-footer-line-3'/>
        </div>
      </div> 

5. If you find a code similar to the code above, copy the following code just below the above code.


<div id='related-posts'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script type='text/javascript'>//<![CDATA[
    var ry='<h3>Related Posts</h3>';rn='<h3>&nbsp;&nbsp;&nbsp;No related post available</h3>';rcomment='comments';rdisable='disable comments';commentYN='no';
    var dw='';titles=new Array();titlesNum=0;urls=new Array();timeR=new Array();thumb=new Array();commentsNum=new Array();comments=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){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};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/AVvXsEhkHv2sz1sRDPwSTLjtmLmhiKdtJ2AGPhYe_dOcgqNOI2-NBVFBwRSqoWHZHtH4fi88b_MeSPpQLnH6iJZlRJ2QldSTTIPtUQZTqNYOmqLlKWW3zRjij86S7KKXjRnwqyt_Ey4fnOOKwRFe/'};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];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;timeR=e;thumb=f;commentsNum=g}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);commentsNum.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+='<div class="clear"/></div><ul>';while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<div class="related-post"><div class="related-post-title">'+titles[c]+'</div><a href="'+urls[c]+'" rel="nofollow"><img border="0" class="post-thumbnail" alt="'+titles[c]+'" src="'+thumb[c]+'"/></a></div></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').innerHTML=dw};
    //]]></script>
    <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=related_results_labels&quot;' type='text/javascript'/>
    </b:loop>
    <script type='text/javascript'>var maxresults=6;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script>
    </b:if>
    </div>    <div class='clear'/>

Remarks:
  •      Red color number of articles will be shown.
  
6. Save your template >> Done 

Now your template already own a related article or related post to allow visitors to explore your blog.

Labels:

Comments

Post a Comment

Popular posts from this blog

Why Programmers Should Wear Framework (CodeIgniter or Yii)

By
The framework can be interpreted simply as a library containing a collection of functions / procedures and classes for specific purposes that are ready to be used so that it can facilitate and accelerate the work of a programmer, without having to create a function or class from the start. Advantages of using the framework are: provide a good structure in our program. Sometimes as programmers, we can create our program structure. the framework, we can make the program more structured, easy to manage, easy to develop. well for those that have been used to make the program itself, usually on their own to create a framework in the program can easily develop, that could be a problem is the use of this framework is the subjective easily according to our perspective. with a framework that is used by many people, it will provide the structure and way of working standards for our applications. The more people who use it, it means a lot of people who agree with the way the framework w...
Post a Comment
Read more

Microsoft Windows 10 IOT Can for Raft Robot

By
Thinking of creating a project Internet of Things (IOT) or a robot? Microsoft promises ease to assemble with Windows 10 Starter Kit IOT. In the Starter Kit package for Windows IOT Core and Raspberry Pi 2, supplied equipment such as sensors, electronic components, and various types of cables that are compatible with Windows 10. Package offered by Microsoft in collaboration with Adafruit's online community allows users to create a prototype and build a machine that could send back information to a database. For example, the starter kit can be used to make weather stations that generate data based on interaction with the environment, or communicate with analog photocell sensor to measure light intensity. In fact, the starter kit can also be used to create a robot with wheels legs that can be controlled via a joystick and a Raspberry Pi Unfortunately, the starter kit is sold out in just a few minutes after it was released. But when stocked again later, for those who are interested ...
Post a Comment
Read more

Indra, Radar Made in Indonesia

By
Wants to prove that Indonesia is not inferior to other nations, Electronics and Telecommunications Research Center Indonesian Institute of Sciences (LIPI PPET) and a division of PT Solutions 247 Radar and Communications System (RCS) makes maritime radar. Since 2006, PPET LIPI has developed two versions of the radar. Namely radar coastal surveillance and navigation radar ship. In its development, the maritime radar to be named while Indonesian Radar (Indra). To distinguish, ship navigation radar developed by PT Solutions 247-RCS named Indra-1 and a coastal surveillance radar developed by PPET-LIPI named Indra-2. Both of these radar technology frequency-modulated continuous wave (FMCW) so that the power consumption and size is much smaller than the radar radars in the market. Indra-1 managed to detect and measure the distance of a ship that was sailing with accuracy. We are proud of this result. This is proof that we can make the radar is built and functioning properly. Having escape...
Post a Comment
Read more