Membuat Related Post Untuk Versi Mobile

Ada begitu Banyak tutorial tentang cara membuat artikel terkait dengan berbagai model tapi sedikit yang saya tahu ada tutorial membuat artikel terkait untuk tampilan hp ato versi mobile. berikut ini akan saya coba bagi cara membuat artikel terkait untuk versi mobile. menurut saya ini sangat berguna untuk meningkatkan page view blog kita mengingat sekarang orang lebih banyak browsing menggunakan hp.Sebagai contoh kalian bisa lihat di sini. Nah jika kalian berminat silahkan ikuti langkah berikut

1.Pertama masuk ke akun bloggermu

2.Lalu Aktifkan Dulu tampilan Blogmu untuk versi seluler menjadi TERSESUAI/CUSTOM
 Setelah itu klik SIMPAN

3.Selanjutnya kita ke edit html.sebagai antisipasi download dulu templatemu biar aman jika nati terjadi kesalahan.

4.Klik ‘Expand Template Widget’ letakkan kode dibawah ini persis di atas kode  </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('<ol>');
while (i < relatedTitles.length && i < 50) {
document.write('<li><a href="' + relatedUrls[r] + '">' +
relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;}
i++;}
document.write('</ol>');}
//]]>
</script>


5. Cari Kode ini <div class='post-footer-line post-footer-line-2'>, yang terletak di antara kode <b:includable id='mobile-post' var='post'> dan </b:includable>.

6.Setelah itu Letakkan kode berikut ini tepat dibawah kode <div class='post-footer-line post-footer-line-2'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='mobile-related-posts'>
<div style='text-align: justify;'>
<h4><b>Related Posts: </b></h4>
<b:loop values='data:post.labels' var='label'><data:label.name/><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&amp;max-results=50&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();</script>
</div>
</div>
</b:if>

Angka 50 menunjukkan jumlah related posts yang akan ditampilkan.silahkan kamu ubah sesuai keinginan.


7.pratinjau dulu ,jika sudah berhasil simpan templatemu.selesai

Bila related posts yang dihasilkan kurang sesuai, maka dapat dilakukan kustomisasi pada penempatan kode di atas, dengan ketentuan bahwa kode tetap diletakkan di antara <b:inbludable id='mobile-post' var='post'> dan </b:includable>.

Membuat Related Post Untuk Versi Mobile

Posted by: Risalahati Dedic Ahmad Updated at: 01:09