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

How to choose between the Canon 700D or Nikon D5300

By
Canon EOS   700D   and Nikon   D5300   is a   digital SLR camera   aimed at   novice photographers .   Nevertheless ,   there are   features   on   both cameras are   much the same with   a more   sophisticated   camera   /   semi - pro,   so it   is good enough to   be used   in various   scene conditions .   From the shape   and size ,   at a second glance   something like the   camera .   But   when viewed   more closely ,   overall   more   compact   Nikon   D5300   a few   millimeters   and   about 100   grams lighter .   The new lens   Nikon   18-55mm   VR   II also   shorter   in   the off condition .   This can be achieved   because   the plastic   material   of the   camera   thinner . In   ...
Post a Comment
Read more