Pasang related posts versi mobile di atas judul postingan di blogspot

Diposkan: 19 Juli, 2012
Kita tidak asing lagi dengan namanya related posts atau artikel yang berhubungan dengan postingan di blog maupun di website,tapi yang saya bahas di sini adalah related posts atau artikel terkait di blogspot versi HP atau mobile version.
 
Ternyata related posts yang kita pasang di blogspot, Apabila kita ngenet menggunakan loptop/koputer/PC ini terlihat, bila dikaitkan dengan postingan,Tetapi bagi yang mengaktifkan templatenya di versi seluler, related posts tadi tidak muncul juga.Nah untuk menampilkan related posts di versi mobile bagi yang mengaktifkan templatenya di versi seluler kita perlu memasang lagi kode related posts di template biar terlihat bila di lihat di mobile version.

Bila ada berkeinginan memasang related post versi HP di bawah judul postingan di blogspot.  Anda bisa mengikuti langkah-langkahnya sebagai berikut:
Pertama
Login ke akun blogger masing masing.

Kedua
Di menu ‘Template’ ubahsesuaikan konfigurasi, selanjutnya pilih template ‘Tersesuai’ dan selanjutnya klik tombol ‘Simpan” Lihat gambar di bawah.



Ketiga
Edit HTML’ untuk memudahkan pencarian kode pada template centang expand.


Selanjutnya cari kode  </head>.
Bila sudah ketemu,letakan kode di bawah ini 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('<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>

Keempat,
Cari kode <div class='post-footer-line post-footer-line-2'>,
letaknya di antara kode <b:includable id='mobile-post' var='post'>dan</b:includable>.

<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=5&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>                  
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<h4>Artikel Terkait..</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</b:if>

Tetapi apa bila menginginkan di bawah postingan,letakkan kode yang kedua di atas tepat di  bawah kode <data:post.body/> yang terakhir.  
  
Keenam,
save template,
Cek related posts dengan menambahkan tulisam ?m=1 pada URL blog di computer anda.

www.copyGOcopy.blogspot.com

10 komentar



  1. tidak berhasil gan

    Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
    Pesan error XML: The reference to entity "callback" must end with the ';' delimiter.
    Error 500

    BalasHapus
    Balasan
    1. Mohon maaf sebelumnya sob..,untuk kode yang kemarin terdapat korupted di dalam text area box, Yaitu pada kode hanya menampilkan widget di halaman postingan saja, yaitu kode (b:if cond....).
      Saat kita publish source kodenya yang terdapat di text area box tersebut berubah, Jadi kode yang telah berubah tersebut yang menyebabkan erorr setelah saya analisa, Dan sekarang kode juga teks area box tersebut telah kita perbaiki. Kemudian kode di atas telah kita uji di blog uji coba: Di sini dan berhasil.(maaf blognya acak acakan ,hanya sebagai uji coba saja).
      Untuk mengatur jumlah artikel terkaitnya silahkan di rubah angka (5) yang terdapat pada text area yang ke dua.dan pada setelan template di seluler pilih tersesuai.

      Terima kasih atas saran juga kunjungannya sob.., dan akan kita tinjau ulang kode yang terdapat di area boxt postingan yang lainnya.

      Hapus
  2. nyimak dulu sambil mengamatin

    BalasHapus
    Balasan
    1. Silahkan sob, di coba juga boleh. Maklum kita baru belajar ngeblog banyak yang gak terkontrol.

      Hapus
  3. Gak bisa gan, udah ane praktekan setelah ane cekk pada tampilan pc sih muncul... tapi, pada tampilan mobile gak muncul gan apa ada cara lain?

    BalasHapus
    Balasan
    1. Halloo.., blog anda settingan mobile versinya di setting setting khusus atau Tersesuai pada custom templatenya, jika template blog saudara templatenya download dari pihak ke tiga. Pastikan templatenya yang mendukung custom versi mobile, menurutku banyak kok yang berbagi template mendukung versi mobile.

      Namun bila ingin memakai template bawaan dari blogger, bisa memilih template selain Dinamic, lantas pada versi mobilenya anda setting Tersesuai atau Khusus. Saya yakin sesuai dengan yang di harapkan.

      Bila terjadi kasus tidak muncul mungkin bisa disebabkan diantaranya, Temlatenya tidak memiliki dukungan versi mobile, belum di setting Tersesuai, atau ada perbedaan element Class dan Id nya. Bisa juga tidak terdapat element element versi mobile.

      Mudahan bisa membantu...

      Hapus
  4. Udah dicoba gan,
    http://www.idastronomi.co.vu/2015/04/waw-ternyata-bumi-terbentuk-dari.html

    BalasHapus
  5. Mantap gan berhasil
    http://apkseluler.blogspot.com/

    BalasHapus
  6. sayang sekali gan, tidak work di www.uchiha-uzuma.com

    BalasHapus