Tuesday, January 16, 2018

Cara Mudah Menampilkan Related Post di Seluler Blog

Artikel terkait adalah satu satu komponen yang sangat penting untuk blog (menurutku). Karna dengan adanya artikel terkait, semakin memperbesar peluang pengunjung blog untuk lebih lama nge-time di blog kita.

Lantas, bagaimana cara  simple agar Artikel blog bisa muncul? Simak penjelasan di bawah ini. Yang ini sudah aku coba berulang kali dan syukur selalu berhasil.  Perlu di ingat kembali jika cara ini hanya bisa menampilkan Artikel terkait di blog versi mobile.


Pertama utama yang paling depan  Atur tampilan blog seluluer menjadi Khusus/ Tersesuai/ Custom. Karena jika tak diatur menjadi Khusus, Edit HTML untuk mendekorasi blog mobile tak akan bisa berjalan.



Pertama Masuk ke Dasboard blog sobat - Template- Edit HTML - Gunakan CTRL+F untuk memuncukan kotak pencarian.

Kedua Cari </head> dan letakkan kode di bawah ini tepat di atasnya.




<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 < 40) {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>


Silahkan simpan cek Blog sobat. Tambahkan ?m=1 pada URL blog anda untuk melihat tampilan blog mobile.

Angka 40 yang tercetak merah adalah batas maksimum jumlah Artikel terkait yang akan ditampilkan. Bisa diganti sesuai selera sobat.
 Perhatian!! Cara mudah menampilkan Recent Post mobile blog berhenti cukup sampai di sini.

Sekedar cerita Karna Nahayuka suka bercerita.

Sebelumnya, aku sering cari cara-cara menampilkan Recent post di mobile blog dan kebanyakan hasilnya sama seperti yang aku paparkan di atas, ditambah dengan step di bawah ini. Pengingat lagi! Cara mudah menampilkan Artikel Terkait sudah selesai sampai di atas.

*****
  Setelah kode ditas berhasil di pasang selanjutnya 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.



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>.

***

Dan entah mengapa, setelah aku lakukan Cara yang pertama aku jabarkan sampai cara tambahan ini, Recent post yang keluar jadi aneh. Entah blogku yang salah atau bagaimana. Recent post yang keluar jadi ganda, tampil di bawah judul postingan dan di akhir postingan recent postnya. Mungkin Cara kedua untuk menampilkan Recent Post di bawah judul blog mobile kali yak.

Sekian cerita dari Nahayuka

_Nahayuka_



Artikel Terkait


EmoticonEmoticon