Cara Menambahkan Related Links ke Postingan Blogger

Sebelum anda bertanya, kami akan jawab terlebih dahulu. Di bawah ini adalah contoh gambar dari beberapa Related Link/Related Post yang ada di Blogger.

Dengan contoh gambar di atas, sudah sangat jelas seperti apa bentuk atau tampilan dari Related link. Bagi yang sudah berpengalaman dengan blogger pasti sudah tak asing lagi dengan gambar di atas. Tapi, bagi blogger pemula pasti bingung, apa itu Related Link dan apa kegunaannya.

Related link atau Related Post pada blogger dapat membantu meningkatkan lebih banyak tampilan di blog dan juga meningkatkan SEO ON-Page. Anda Mungkin Juga Menyukai Widget Postingan Terkait atau yang disebut "Related Link", yang menampilkan postingan yang paling relevan dengan artikel saat ini di bagian bawah setiap postingan. Related link menggunakan Label postingan untuk menampilkan postingan terkait yang ditautkan dengannya.

Related link sangat membantu pengunjung untuk menjelajahi konten blog Anda yang relevan dengan posting saat ini yang pada akhirnya mengurangi rasio pentalan dan meningkatkan peringkat situs web Anda di mesin pencari Google.

Ini membantu pengunjung untuk menjelajahi konten blog Anda yang relevan dengan posting saat ini yang pada akhirnya mengurangi rasio pentalan dan meningkatkan peringkat situs web Anda di Google.

A. Apa itu Related Link

Banyak pemilik blog mencurahkan banyak waktu untuk mendapatkan lalu lintas mengalir ke situs dan blog mereka. Namun, mendapatkan lalu lintas untuk tetap berada di blog adalah pertanyaan yang sulit dan apakah untuk tujuan khusus ini tautan Related link dapat sangat membantu.

Widget Related link atau Related Post salah satu teknik bagian dari pembuatan tautan internal di Blogger. Dengan adanya Related link sangat membantu meningkatkan tampilan halaman. Dengan ini, rasio pentalan pembaca anda menurun. Banyak desain widget Related link dengan beragam tampilan gaya dan corak. Ada yang menggunakan Related link dengan thumbnail, Related link dengan gaya daftar, dan widget Related link berwarna sedang tren saat ini.

Related link adalah tautan dan thumbnail ke postingan blog terkait lainnya yang ditampilkan bersama dengan satu posting utama. Ini adalah salah satu fitur penting dari desain web untuk amal, bisnis, dan blog yang membantu blogger meningkatkan tampilan halaman dan aspek optimasi mesin pencari (SEO) mereka. Pengunjung postingan tersebut tentu tertarik untuk mengetahui lebih banyak tentang topik tersebut.

Related link dapat membantu mereka untuk mengeksplorasi lebih banyak tentang topik dari blog yang sama, sehingga membantu meningkatkan tampilan halaman. Dengan bantuan panduan pembuatan tautan SEO, blog anda dapat menyediakan tautan ke posting terkait, yang dengannya blog anda dapat memperoleh manfaat dari aspek SEO.

Related link bekerja dengan bahasa Javascript, karena mengambil URL postingan dari label posting Saat Ini dan Menampilkannya di tiap halaman blogger. Kita dapat Menambahkan ini Di Bawah Setiap postingan untuk mendapatkan Postingan Serupa agar pembaca dapat membaca dan terlibat lebih banyak. Script Related link sangat ringan sehingga dimuat lebih cepat. Anda dapat menempelkan script Javascript Related link di template blogger anda.

B. Mengapa Related Link/Related Post Sangat Penting

Penggunaan tautan sering dipandang sebagai bagian penting dari strategi SEO Anda, dan memang demikian. Ada aspek penting lainnya untuk menambahkan tautan ke blog Anda, yang sering kali tampaknya mengambil kursi belakang untuk mendorong peringkat tertinggi. Jika Anda berpikir kembali mengapa Anda memulai blog Anda di tempat pertama, kemungkinan besar karena Anda ingin berbagi pemikiran, pengalaman, pengetahuan, keahlian, dan sumber daya yang Anda temukan dengan orang lain yang tertarik pada hal yang sama. Jika Anda merasa telah kehilangan pandangan tentang kemurnian visi awal Anda untuk blog Anda, ini bisa menjadi saat yang tepat untuk meninjau kembali beberapa prinsip yang mendefinisikan blog yang hebat.

Mungkin anda bertanya tanya, seberapa penting menerapkan Related link di Blogger. Penting atau tidak penting, ada banyak manfaat yang di dapat oleh para pemilik blog. Tak ada keharusan atau kewajiban untuk menerapkannya di blogger. Tapi kita ambil segi positifnya saja. Meskipun banyak aspek yang diujur oleh Google, Related link ikut menyumbang peningkatan peringkat anda di mesin pencari Google.

Terkadang Anda mungkin ingin melakukan sesuatu yang ekstra dan menarik dengan blog Anda untuk menarik pengunjung baru dan mendapatkan lebih banyak lalu lintas untuk pendapatan tambahan. Membuat pengunjung blog Anda untuk tinggal dalam jangka waktu yang lama adalah pekerjaan yang sulit tetapi itu sangat berguna untuk blog Anda, ini akan membantu Anda mengurangi rasio pentalan Anda dengan sangat cepat, semakin banyak pengunjung akan tetap berada di situs Anda, semakin besar peluang untuk mendapatkan pendapatan yang baik melalui iklan dan adsense.

C. Menambahkan Script Related Link/Related Post di Blogger

Sperti telah kita bahas pada bagian di atas, script related post terdiri dari tag blogger, CSS dan Javascript. Agar Related Post dapat tampilan ditiap halaman postingan, anda harus menambahkan beberapa script tersebut ke dalam kode blogger yang ada di template blogger anda.

Di bawah ini adalah beberapa contoh script related link/related psot yang bisa anda terapkan pada blogger anda.

1. Contoh Script KE-1

Untuk meletakkan script related link anda harus berada di tampilan editor halaman postingan Blogger, kemudian anda klik tanda "Pensil" yang ada di pojok kanan atas halaman editor postingan tersebut. Ikuti petunjuk di bawah ini untuk menempatkan scriptnya.

Perlu anda ketahui, pada contoh ini, kita menggunakan template blogger default "contempo". Tujuannya adalah biar anda mudah mengikuti dan mempraktekkannya.

Cara Menambahkan Related Links ke Postingan Blogger

Tempalte default Blogger Yang Kita jadikan
sebagai praktek Related Post

Setelah anda mengganti template blogger anda dengan template default blogger, lanjutkan dengan mengetikkan script di bawah ini dan letakkan di bagian atas dari kode </head>.

Letakkan script ini, di atas kode </head> di template blogger anda

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts { 
    float:left;
    width:auto; 
}
#related-posts h2 { 
    margin-top: 10px;
    background:none;padding:3px; 
}
#related-posts .related_img { 
    margin:5px;
    border:4px solid #f2f2f2;
    width:105px;height:105px;
    transition:all 300ms ease-in-out;
    -webkit-transition:all 300ms ease-in-out;
    -moz-transition:all 300ms ease-in-out;
    -o-transition:all 300ms ease-in-out;
    -ms-transition:all 300ms ease-in-out; 
}
#related-title {
    color: #222;
    line-height: 16px;
    padding: 0 10px;
    text-align: center;
    text-shadow: 0 2px 2px #fff;
    width: 100px;
}
#related-posts .related_img:hover{ 
    opacity:.7;
    filter:alpha(opacity=70);
    -moz-opacity:.7;
    -khtml-opacity:.7
}
#related-title:hover { 
    text-decoration: underline; 
}
</style>
<script type='text/javascript'>
//<![CDATA[
imgr=new Array();imgr[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjja63nUZqiq17kKK6pBmqAX-9m1lblgffBt_fMzi63DGOEpfuLhhRbS9D8TGZpGYrqb98og9NydZY3rgvIwzqKx6Mom7jT9w2rR6O6xW55oQQsn33H-UlMsGN9lroLoAMjK7Qt2apldeQq/s1600/no-thumbnail.png";showRandomImg=true;aBold=true;summaryPost=400;summaryTitle=20;numposts1=12;numposts2=4;function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}
  function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();if(numposts2<=json.feed.entry.length){maxpost=numposts2}else{maxpost=json.feed.entry.length}for(var i=0;i<maxpost;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;pcm='<a href="'+posturl+'">'+pcm+' comments</a>';var trtd='<div class="col_maskolis"><h2 class="posttitle"><a href="'+posturl+'">'+posttitle+'</a></h2><a href="'+posturl+'"><img class="related_img" src="'+img[i]+'"/></a><div class="clear"></div></div>';document.write(trtd);j++}}var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.gform_foot.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d}else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjja63nUZqiq17kKK6pBmqAX-9m1lblgffBt_fMzi63DGOEpfuLhhRbS9D8TGZpGYrqb98og9NydZY3rgvIwzqKx6Mom7jT9w2rR6O6xW55oQQsn33H-UlMsGN9lroLoAMjK7Qt2apldeQq/s1600/no-thumbnail.png'}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<h2>'+relatedpoststitle+'</h2>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;margin:0 4px 10px 0;float:left;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="related_img" src="'+thumburl[r]+'"/><br/><div id="related-title">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
//]]>
</script>
</b:if>

Letakkan script ini, di bawah kode <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=6;
var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div>
</b:if>

Contoh meletakkan script Related link
tepat di bawah kode "<data:post.body/>"

Sekarang kita lihat hasil dari penempatan script di atas.

Hasil dari script di atas
(Tampilan pada halaman Blogger)

2. Contoh Script KE-2

Setelah anda berhasil membuat Relatedlink/related post dengan script ke-1, kita lanjutkan dengan contoh script ke-2.

Letakkan script berikut, di atas kode </head> di template blogger anda

<link href='//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css' rel='stylesheet'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'/>
    
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
.related-postspace{position:relative;margin:0;padding:20px 0}.related-postspace h4{margin:0 0 15px 0;font-weight:700;font-size:18px;padding:0 0 20px 0;border-bottom:1px solid rgba(0,0,0,0.05);text-align:center}.related-post-simple-2,.related-post-simple-2 li{list-style:none;margin:0;padding:5px}.related-post-simple-2 li{overflow:hidden;margin:0 auto 10px auto;transition:all .3s}.related-post-simple-2 li:hover .related-post-item-title{color:#e74c3c}.related-post-simple-2 .related-post-item-thumbnail{border-radius: 2px; width: 120px; height: 80px; max-width: none; max-height: none; background-color: transparent; object-fit: cover; border: none; float: left; margin: 2px 15px 0 0; padding: 0; transition: box-shadow 0.3s ease 0s; -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2); box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2); }}.related-post-simple-2 .related-post-item-title{color:#222;font-size:16px;font-weight:700}.related-post-simple-2 .related-post-item-title:hover{color:#e74c3c}.related-post-simple-2 .related-post-item-summary{display:block;font-size:13px;margin:5px auto 0 auto;color:#999}.related-post-simple-2 .related-post-item-summary .related-post-item-more{display:none}
@media screen and (max-width:750px){
.related-post-simple-2 li{width:100%;float:none}
.related-post-simple-2,.related-post-simple-2 li{padding:5px 0}
.related-post-simple-2 .related-post-item-summary{display:none}}  
</style>  
</b:if>

Letakkan script berikut ini, di bawah kode <data:post.body/>

<div class='related-postspace' id='dtostrelated-post'/>
         <div class='clear'/>
            <script type='text/javascript'>
               var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
                         &quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
                     </b:loop></b:if>];
               var relatedPostConfig = {
                     homePage: &quot;<data:blog.homepageUrl/>&quot;,
                     widgetTitle: &quot;&lt;h4&gt;Related Posts&lt;/h4&gt;&quot;,
                     numPosts: 5,
                     summaryLength: 160,
                     titleLength: &quot;auto&quot;,
                     thumbnailSizew: 120,
                     thumbnailSizeh: 80,
                     noImage: &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7nv7P6lLgCP5CE02EqdYcbXn4vz4aAAZmkwdNzUizi6ajH1afEm3dQsFR3vKj-kLa7se7kNibQZfs94CA9dcFkZSwUNAOrniF_2expwsai1I27uUK0IdHKPr0XTHgt1AngVGjjwddjII/s1600/noimage1.png&quot;,
                     containerId: &quot;dtostrelated-post&quot;,
                     newTabLink: false,
                     moreText: &quot;Read More&quot;,
                     widgetStyle: 2,
                     callBack: function() {}
               };
            </script>
            <script type='text/javascript'>
               //<![CDATA[
               /*! Related Post Widget */
               var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4>Recommended</h4>",widgetStyle:1,homePage:"https://blogger.com",numPosts:7,summaryLength:370,titleLength:"auto",thumbnailSizew:150,thumbnailSizeh:100,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"related-post",newTabLink:false,moreText:"Baca Selengkapnya",callBack:function(){}};for(var f in relatedPostConfig){d[f]=(relatedPostConfig[f]=="undefined")?d[f]:relatedPostConfig[f]}var j=function(a){var b=m.createElement("script");b.type="text/javascript";b.src=a;k.appendChild(b)},o=function(b,a){return Math.floor(Math.random()*(a-b+1))+b},l=function(a){var p=a.length,c,b;if(p===0){return false}while(--p){c=Math.floor(Math.random()*(p+1));b=a[p];a[p]=a[c];a[c]=b}return a},e=(typeof labelArray=="object"&&labelArray.length>0)?"/-/"+l(labelArray)[0]:"",h=function(b){var c=b.feed.openSearch$totalResults.$t-d.numPosts,a=o(1,(c>0?c:1));j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&start-index="+a+"&max-results="+d.numPosts+"&callback=showRelatedPost")},g=function(z){var s=document.getElementById(d.containerId),x=l(z.feed.entry),A=d.widgetStyle,c=d.widgetTitle+'<ul class="related-post-simple-'+A+'">',b=d.newTabLink?' target="_blank"':"",y='<span style="display:block;clear:both;"></span>',v,t,w,r,u;if(!s){return}for(var q=0;q<d.numPosts;q++){if(q==x.length){break}t=x[q].title.$t;w=(d.titleLength!=="auto"&&d.titleLength<t.length)?t.substring(0,d.titleLength)+"&hellip;":t;r=("media$thumbnail" in x[q]&&d.thumbnailSizew!==false)?x[q].media$thumbnail.url.replace('s72', 's200'):d.noImage;u=("summary" in x[q]&&d.summaryLength>0)?x[q].summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,d.summaryLength)+"&hellip;":"";for(var p=0,a=x[q].link.length;p<a;p++){v=(x[q].link[p].rel=="alternate")?x[q].link[p].href:"#"}if(A==2){c+='<li><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSizew+'" height="'+d.thumbnailSizeh+'"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+'</span> <a href="'+v+'" class="related-post-item-more"'+b+">"+d.moreText+"</a></span>"+y+"</li>"}else{if(A==3||A==4){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-title" href="'+v+'"'+b+'><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSizew+'" height="'+d.thumbnailSizeh+'"></a><div class="related-post-item-tooltip"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+"</a></div>"+y+"</li>"}else{if(A==5){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-wrapper" href="'+v+'" title="'+t+'"'+b+'><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSizew+'" height="'+d.thumbnailSizeh+'"><span class="related-post-item-tooltip">'+w+"</span></a>"+y+"</li>"}else{if(A==6){c+='<li><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><div class="related-post-item-tooltip"><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSizew+'" height="'+d.thumbnailSizeh+'"><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+"</span></span>"+y+"</div></li>"}else{c+='<li><a title="'+t+'" href="'+v+'"'+b+">"+w+"</a></li>"}}}}}s.innerHTML=c+="</ul>"+y;d.callBack()};randomRelatedIndex=h;showRelatedPost=g;j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")})(window,document,document.getElementsByTagName("head")[0]);
               //]]>
</script>

Sekarang coba anda buka halaamn postingan blogger anda dan lihat hasilnya. Jika anda tak salah dalam copy/paste script ke-2 tersebut hasilnya akan terlihat seperti gambar berikut.

Hasil akhir dari script realted link
Script yang ke-2

3. Contoh Script KE-3 (Related Link di bagian tengah postingan)

Pada contoh script ke-3 ini kita akan membuat Related link/post di bagian tengah artikel. Caranya sama saja, yang anda ganti scriptnya saja.

Letakkan script ini, di atas kode </head> di template blogger anda

<style type='text/css'>
/*Articles Related to Middle of Posts*/ 
.arpianz{background:#FFF;position:relative;display:inline-block;border:2px solid #DDD;margin:22px 0} 
.arpianz h4{background:#393939;font-family:Poppins,sans-serif;color:#fff;font-size:12px;font-weight:700;position:absolute;top:-21px;left:2.5%;padding:8px 18px;border:1px solid #DDD;border-radius:5px;text-transform:uppercase} 
.arpianz h4:before{content: &#39;\f043&#39;;right: 10px;bottom: 0;font-family:FontAwesome;font-style: normal;font-weight: 400;margin: 0 10px 0 0;color: #fff;} 
.arpianz ul{padding:12px 41px 0;list-style:none} 
.arpianz ul a:before{font-family:fontawesome;content:&#39;\25b6&#39;;padding-right:10px} 
.arpianz li{border-radius:5px;border-bottom:1px solid rgba(227,227,227,0.33);line-height:1.7em} 
.arpianz li:hover {text-decoration: underline;}
</style>
    
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<script type='text/javascript'> 
//<![CDATA[ 
// Articles Related to Middle of Posts by Technical Arp 
var arpianz = new Array(); var arpianzNum = 0; var relatedUrls = new Array(); function related_results_labels(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; arpianz[arpianzNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[arpianzNum] = entry.link[k].href; arpianzNum++; break;}}}} function removeRelatedDuplicates() { var tmp = new Array(0); var tmp2 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = arpianz[i];}} arpianz = tmp2; relatedUrls = tmp;} function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false;} function printRelatedLabels() { var r = Math.floor((arpianz.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < arpianz.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + arpianz[r] + '</a></li>'); if (r < arpianz.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');} 
//]]> 
</script> 
</b:if>

Letakkan script berikut ini, di bawah kode <data:post.body/>

<div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='arpianz'> 
<b:if cond='data:post.labels'> 
<b:loop values='data:post.labels' var='label'> 
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=8&quot;' type='text/javascript'/> 
</b:if> 
</b:loop> 
</b:if> 
<h4>Also Read</h4> 
<script type='text/javascript'> 
removeRelatedDuplicates(); 
printRelatedLabels(); 
</script> 
</div> 
<div expr:id='&quot;post2&quot; + data:post.id'><p><data:post.body/></p></div> 
<script type='text/javascript'> 
var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;); 
var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;); 
var s=obj1.innerHTML; 
var t=s.substr(0,s.length/2); 
var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;); 
if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);} 
</script>

Baiklah, sekarang kita lihat hasil dari script ke-3 tersebut.

Related Link / Related Post yang
terletak di bagian tengah postingan

Sampai sini mungkin anda sudah paham cara pembuatan Related link di blogger. Jika anda berminat dan ingin blogger anda terdapat Related link seperti yang kita praktekkan di atas, anda dapat mencobanya. Kami sarankan anda menyesuaikan template anda dengan memilih salah satu dari 3 contoh script di atas.

Warnet Dapurnet

Internet Cafe