Relate Post Versi Mobile atau Browser Handphone

Seorang blogger pasti sudah tahu apa itu Relate Post. Relate Post adalah artikel yang terkait atau berhubungan dengan materi atau judul postingan di blog maupun website. Relate post biasanya muncul di bawah postingan namun dapat juga di antara paragraf pada postingan.

Dengan menampilkan relate post, artikel yang memiliki keterkaitan dengan materi postingan dapat diklik atau dibaca oleh para pengunjung dan secara otomatis terjadi peningkatan jumlah pengunjung blog untuk itu gunakan relate post pada blog anda. Namun yang jadi pertanyaan kebanyakan blogger kenapa Relate Post tidak tampil pada saat Versi Mobile padahal versi Dekstop/PC tampil. Lalu bagaimana caranya agar Relate Post Tampil pada versi Mobile?? seperti gambar di bawah ini, 

Adapun Cara Tampilkan Relate Post Versi Mobile adalah,

Pertama, Ubahlah template versi mobile blog anda ke “Custom”,

Kedua, Pasang kode berikut ini diatas    “}]]></b:skin>”

/* Related Post Cepat--------------------------------- */  
 #related-postsku{float:left;width:100%;margin-top:5px;margin-left:0px;font-size:13px;font-family:Arial,serif;margin-bottom:0px;}  
 #related-postsku a{text-decoration:none;}  
 #related-postsku a:hover{text-decoration:none;}  
 #related-postsku ul{border:medium none;margin:10px 0px 10px 0px;padding:0;}  
 #related-postsku ul li{display:block;background:url("https://lh3.googleusercontent.com/-6iznc81V_pQ/UcmgB6yKU3I/AAAAAAAABWc/NhxmD6789YU/s25/rss.png") no-repeat 0 0;margin:0;padding-top:0;padding-right:0;padding-bottom:1px;padding-left:30px;margin-bottom:5px;line-height:2em;border-bottom:1px dotted #cccccc;}

Ketiga, Pasang kode script di bawah ini diatas “</head>”

<!-- Artikel Terkait Start Bro-->  
 <b:if cond='data:blog.pageType == &quot;item&quot;'>  
 <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>  
 </b:if>  
 <!-- Artikel Terkait End Bro-->

Keempat, Cari kode “<div class='post-footer-line post-footer-line-2'>”
Kelima, Letakan kode dibawah ini di antara “<b:if cond='data:top.showMobileShare'>…. </b:if>”

<b:if cond='data:blog.pageType == &quot;item&quot;'>  
 <div id='related-postsku' >  
 <font style='font-size:19px;color:#CC333B;font-family:Arial;'><b>Artikel Terkait: </b>  
 </font><font color='#fff'><b:loop values='data:post.labels' var='label'><data:label.name/>  
 <b:if cond='data:label.isLast != &quot;true&quot;'/><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=5&quot;' type='text/javascript'/>  
 </b:if></b:loop></font>  
 <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();</script>  
 </div>  
 </b:if>

Keenam, Simpan Tema atau Template blog anda

Untuk contoh hasil dari pemasangan kode di atas dapat dilihat pada postingan ini perhatikan tulisan Artikel Terkait di bawah ini,

Jaringan dan Internet

Share This :