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

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

10 Minuman Tradisional Khas Indonesia

By
1. Cendol  Merupakan minuman khas Indonesia yang terbuat dari tepung beras, disajikan dengan es parut serta gula merah cair dan santan. Rasa minuman ini manis dan gurih. Di daerah Sunda minuman ini dikenal dengan nama cendol sedangkan di Jawa Tengah dikenal dengan nama es dawet. Berkembang kepercayaan populer dalam masyarakat Indonesia bahwa istilah “cendol” mungkin sekali berasal dari kata “jendol”, yang ditemukan dalam bahasa Sunda, Jawa dan Indonesia; hal ini merujuk sensasi jendolan yang dirasakan ketika butiran cendol melalui mulut kala tengah meminum es cendol. Tepung beras diolah dengan diberi pewarna berwarna hijau dan di cetak melalui saringan khusus, sehingga berbentuk buliran. Pewarna yang digunakan awalnya adalah pewarna alami dari daun pandan, namun saat ini telah digunakan pewarna makanan buatan. Di Sunda cendol dibuat dengan cara mengayak kukusan tepung beras yang diwarnai dengan daun suji dengan ayakan sehingga diperoleh bentuk bulat lonjong yang lancip di ...
Post a Comment
Read more

13 Sosok Hantu Kampus Terkenal Di Indonesia

By
Sudah menjadi rahasia umum bahwa gedung universitas kerap kali menjadi salah satu lokasi di mana sosok hantu yang menyeramkan muncul. Bahkan boleh percaya atau tidak, hampir setiap kampus memiliki kisah hantunya sendiri. Hal itu pula yang terjadi di Indonesia. Sebagai negara dengan banyaknya generasi muda, sudah pasti jumlah universitas di Indonesia begitu banyak. Dan uniknya masing-masing kampus memiliki kisah hantu tersendiri. 1. Hantu Muka Rata - UB Malang Bagi kamu mahasiswa Universitas Brawijaya, sosok hantu muka rata di sekitar lokasi perpustakaan dan Fakultas Kedokteran adalah salah satu yang terkenal bahkan melegenda. Pernah satu ketika, seorang mahasiswa yang berjalan di dekat situ pada malam hari usai kegiatan kampus melihat sosok pria yang duduk sendiri dengan diam. Sialnya, saat mahasiswa itu menoleh dan menatap lebih dekat, sosok yang membalas tatapannya justru tak memiliki mata, mulut, hidung di wajahnya alias rata. 2. Gadis Gantung Diri - UI Jakarta Lagi-lagi korb...
Post a Comment
Read more