Cara Terbaik Membuat Artikel Terkait Atau Related Post di Bawah Artikel Pada Blog

Assalamualaikum Warahmatullah Wabarakatuh

Kali ini saya akan membagikan informasi mengenai cara terbaik membuat artikel terkait atau related post pada blog, dengan menambahkan artikel terkait setelah artikel maka akan mempermudah pengunjung dalam membuka artikel yang mungkin sedang dia cari atau mungkin akan membuat pengunjung tertarik untuk membaca artikel yang ada pada artikel terkait tersebut. secara otomatis artikel yang ada di blog saudara akan lebih banyak yang dibuka dibandingkan sebelumnya.

Cara pertama  ini berlaku untuk blog dengan template dari google/Blogger

Ok, Langsung saja ya... Berikut adalah cara lengkapnya.
  • Login terlebih dahulu di Blogger,, Selanjutnya pilih "Template" > "Edit HTML"

  • Cara Terbaik Membuat Artikel Terkait Atau Related Post di Bawah Artikel Pada Blog

  • Kemudian masukkan script/code berikut tepat dibawah code </head> 
<script type="text/javascript">  
//<![CDATA[  
var relatedTitles = new Array();  
var relatedTitlesNum = 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];  
relatedTitles[relatedTitlesNum] = entry.title.$t;  
for (var k = 0; k < entry.link.length; k++) {  
if (entry.link[k].rel == 'alternate') {  
relatedUrls[relatedTitlesNum] = entry.link[k].href;  
relatedTitlesNum++;  
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] = relatedTitles[i];}}  
relatedTitles = 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((relatedTitles.length - 1) * Math.random());  
var i = 0;  
document.write('<ul>');  
while (i < relatedTitles.length && i < 20) {  
document.write('<li><a href="' + relatedUrls[r] + '">' +   
relatedTitles[r] + '</a></li>');  
if (r < relatedTitles.length - 1) {  
r++;  
} else {  
r = 0;}  
i++;}  
document.write('</ul>');}  
//]]>  
</script>
 
  • Sehingga tampilannya seperti ini
Cara Terbaik Membuat Artikel Terkait Atau Related Post di Bawah Artikel Pada Blog
  • Selanjutnya masukkan script/code berikut tepat dibawah <data:post.body/>, biasanya <data:post.body/> yang kedua 
<b:if cond='data:post.labels'>  
<b:loop values='data:post.labels' var='label'>  
<b:if cond='data:blog.pageType == "item"'>  
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5"' type='text/javascript'/>  
</b:if>  
</b:loop>  
</b:if>   

<b:if cond='data:blog.pageType == "item"'>  
<h4>Related Post</h4>  
<script type="text/javascript">  
removeRelatedDuplicates();  
printRelatedLabels();  
</script>  
</b:if> 
  • Sehingga tampilannya seperti ini
Cara Terbaik Membuat Artikel Terkait Atau Related Post di Bawah Artikel Pada Blog
  • Text yang berwarna hijau bisa diganti sesuai selera
  • Selanjutnya pilih "Save Template", nah..sekarang silahkan cek tampilan dari blog saudara, apakah "Artikel Terkait" atau "Related Post" sudah uncul di akhir artikel.?. seharusnya sudah muncul jika sudah sesuai dengan langkah-langkah diatas. kurang lebih tampilannya seperti ini
Cara Terbaik Membuat Artikel Terkait Atau Related Post di Bawah Artikel Pada Blog

Cara kedua ini bisa digunakan untuk template selain bawaan google/blogger

OK, Langsung saja yaa, berikut cara lengkapnya.
  • Login terlebih dahulu di Blogger,, Selanjutnya pilih "Template" > "Edit HTML"

  • Cara Terbaik Membuat Artikel Terkait Atau Related Post di Bawah Artikel Pada Blog

  • Kemudian masukkan script/code berikut tepat diatas code ]]></b:skin>
#related-post {
background:none;
width:100%;
margin:2px 0px;
}
.related-post h5 {
font-size:120%;
margin:0 0 5px;
padding:0;
font-weight:bold
}
.related-post li {
background:url(&quot;https://lh3.googleusercontent.com/-S3vwmQeC8JY/WHovq9XCv7I/AAAAAAAAAY0/PK8wRHkdljYPVe6_VZeC8WQw5WcjLv0gQCLcB/h120/InfoKom251.png&quot;) no-repeat 58px 3px;
color:#2c3e50;
text-indent:0;
line-height:1.6em;
margin:0;
padding:0 0 3px 75px
}
.related-post .widget {
margin:0;
padding:0
}
.related-post ul {
list-style:none;
margin:0;
padding:0;
}
  • Selanjutnya masukkan script/code berikut tepat dibawah <data:post.body/>, Disini anda pasang pada <data:post.body/> yang pertama
<!-- Related Post Widget Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='related-post' id='related-post'/>
<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;h5&gt;Artikel Terkait:&lt;/h5&gt;&quot;,
numPosts: 5,
titleLength: &quot;auto&quot;,
containerId: &quot;related-post&quot;,
newTabLink: false,
widgetStyle: 1,
callBack: function() {}
};
</script>

<script style="text/javascript" src="https://sites.google.com/site/bahagiaduniadanakhirat1/home/script/relatedpost.js?attredirects=0&d=1"></script>
</b:if>
<!-- Related Post Widget End -->
  • Perhatikan tampilannya berikut.
Cara Terbaik Membuat Artikel Terkait Atau Related Post di Bawah Artikel Pada Blog
  • Text yang berwarna hijau bisa diganti sesuai selera
  • Selanjutnya pilih "Save Template", nah..sekarang silahkan cek tampilan dari blog saudara, apakah "Artikel Terkait" atau "Related Post" sudah uncul di akhir artikel.?. seharusnya sudah muncul jika sudah sesuai dengan langkah-langkah diatas. kurang lebih tampilannya seperti ini
Seharusnya dengan kedua cara diatas sudah dapat memberi titik cerah bagi teman-teman yang ingin memasang "Artikel Terkait" atau "Related Post" pada blog.
Jika ada yang kurang jelas, silahkan bertanya.

Salam

Artikel Terkait

No comments:

Post a Comment