Cara pasang artikel terkait di blogger versi mobile dengan gambar

Diposkan: 05 September, 2012
Akhirnya dengan berbekal unsur usaha, dan juga kesengajaan artikel terkait di blogspot muncul juga di versi mobile atau hp dengan gambar.Tetapi related post ini tidak saya terapkan di blog saya karena ada beberapa alasan,mungkin loading pagenya agak berat karena harus meloading gambar, tapi kalau menurut saya tidak juga berat loadingnya . 

Artikel terkait ini sangat bermanfaat bagi blog/web, karena Artikel terkait ini dapat memudahkan pengunjung blog dalam membaca artikel yang terkait dengan postingan dan juga membuat pengunjung betah berlama-lama di blog. Apalagi artikel terkait ini muncul di versi hp yang secara default bloger tidak menanamkan artikel terkait ini di dalam template.

Berikut screenshotnya artikel terkait di blogger versi hp dengan gambar melalui opera mini phone.

copyGOcopy.blogs

Apabila anda berkeinginan memasang artikel terkait dengan gambar supaya muncul di versi handphone. Berikut ini langkah-langkahnya , Oke langsung saja kita praktekkan tutorial memasang artikel terkait di blogspot versi hp dengan gambar ;
  •  Login ke dashboard blog sobat, Aktivkan tersesuai untuk template seluler
  •  kemudian klik Design>Edit Html
  •  Klik download template lengkap ( untuk jaga-jaga saja)
  •  Centang Expand Widget Templates
  •  Cari kode </head> , gunakan ctrl+f untuk memudahkan pencarian kode
  •  Tambahkan kode berikut ini sebelum kode </head>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#related_posts{}
#related_posts h4{ border-top:1px solid #333;  border-bottom:1px solid #333;  color:#333;  font-size:12px;  letter-spacing:0;  line-height:20px;  margin:0 0 5px;  padding:5px 10px; background:#03C}
#relpost_img_sum{/* height:320px; overflow:auto; */margin:0; padding:0px; line-height:16px}
#relpost_img_sum:hover{background:none}
#relpost_img_sum ul{list-style-type:none; margin:0; padding:0}
#relpost_img_sum li{border:1px solid #ccc; background:#fff; margin:0 0 5px; padding:5px; height:55px; list-style:none}
#relpost_img_sum .news-title{display:block; font-weight:bold !important}
#relpost_img_sum .news-text{display:block; text-align:justify; font-weight:normal; text-transform:none; color:#333}
#relpost_img_sum img{float:left; margin-right:5px; padding:4px; border:solid 1px #ccc; width:50px; height:50px; background:#fff}
</style>
<script type='text/javascript'>//<![CDATA[
var relnum = 0;
var relmaxposts = 5;
var numchars = "";
var morelink = "";
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('2 4=f g();2 5=f g();2 9=f g();2 b=f g();s K(L,M){2 7=L.19("<");l(2 i=0;i<7.3;i++){8(7[i].N(">")!=-1){7[i]=7[i].O(7[i].N(">")+1,7[i].3)}}7=7.1a("");7=7.O(0,M-1);y 7}s 1b(z){l(2 i=0;i<z.P.6.3;i++){2 6=z.P.6[i];4[n]=6.A.$t;u="";8("Q"B 6){u=6.Q.$t}C 8("R"B 6){u=6.R.$t}9[n]=K(u,1c);8("S$T"B 6){D=6.S$T.1d}C{D="1e://1f.1g.1h/1i/1j/1k/1l/d/1m.1n"}b[n]=D;l(2 k=0;k<6.E.3;k++){8(6.E[k].U==\'1o\'){5[n]=6.E[k].v;F}}n++}}s V(a,e){l(2 j=0;j<a.3;j++)8(a[j]==e)y 1p;y 1q}s 1r(){2 m=f g(0);2 o=f g(0);2 p=f g(0);2 q=f g(0);l(2 i=0;i<5.3;i++){8(!V(m,5[i])){m.3+=1;m[m.3-1]=5[i];o.3+=1;o[o.3-1]=4[i];p.3+=1;p[p.3-1]=9[i];q.3+=1;q[q.3-1]=b[i]}}4=o;5=m;9=p;b=q;l(2 i=0;i<4.3;i++){2 c=w.W((4.3-1)*w.X());2 Y=4[i];2 Z=5[i];2 10=9[i];2 11=b[i];4[i]=4[c];5[i]=5[c];9[i]=9[c];b[i]=b[c];4[c]=Y;5[c]=Z;9[c]=10;b[c]=11}2 x=0;2 r=w.W((4.3-1)*w.X());2 12=r;2 h;2 13=14.1s;1t(x<15){8(5[r]!=13){h="<16 G=\'H-A 1u\'>";h+="<a v=\'"+5[r]+"\' U=\'1v\' I=\'J\' A=\'"+4[r]+"\'><1w 1x=\'"+b[r]+"\' /></a>";h+="<a v=\'"+5[r]+"\' I=\'J\'>"+4[r]+"</a>";h+="<17 G=\'H-18\'>"+9[r]+" ... <a v=\'"+5[r]+"\' I=\'J\'>"+1y+"</a><17 G=\'H-18\'>";h+="</16>";14.1z(h);x++;8(x==15){F}}8(r<4.3-1){r++}C{r=0}8(r==12){F}}}',62,98,'||var|length|reljudul|relurls|entry|cuplik|if|relcuplikan||relgambar|informasi|||new|Array|relhasil||||for|tmp|relnum|tmp2|tmp3|tmp4||function||postcontent|href|Math|rangkumanPosts|return|json|title|in|else|postimg|link|break|class|news|target|_top|saringtags|suchas|panjang|indexOf|substring|feed|content|summary|media|thumbnail|rel|contains|floor|random|tempJudul|tempUrls|tempCuplikan|tempGambar|rini|dirURL|document|relmaxposts|li|span|text|split|join|relpostimgthum|numchars|url|http|lh3|ggpht|com|_xcD4JK_dIjU|SnamIh0KTCI|AAAAAAAADMA|hLjqmEbdtkw|noimagethumb|gif|alternate|true|false|relatpost|URL|while|clearfix|nofollow|img|src|morelink|write'.split('|'),0,{}))
//]]>
</script>
</b:if>
  • Selanjutnya cari kode <data:post.body/> 
  • Pada kode <data:post.body/> ini, akan ada beberapa kode yang sama mungkin dua atau tiga kode,pilihlah kode <data:post.body/>  yang terakhir  ,masukkan kode di bawah ini di bawah kode <data:post.body/>  yang terakhir.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related_posts' style='margin-top:35px;'>
<h4 style='color:#666666; text-shadow:none; border-radius:5px; border:1px solid #ccc; background:#eeeeee;'>Related Topics...</h4>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgthum&amp;max-results=50&quot;' type='text/javascript'/>
</b:loop>
<ul id='relpost_img_sum'>
<script type='text/javascript'>relatpost();</script>
</ul>
</div>
</b:if>
  • Kalau sudah di masukan kode di atas gunakan fasilitas pratinjau atau preview,apabila tidak terjadi error pada template pratinjau,langsung save template.
Apabila berhasil pemasangan kode di atas akan terlihat seperti gambar di bawah ini screenshot melalui komputer via browser google chrome dengan menambahkan di akhir url dengan  ?m=1.


copyGOcopy.blogs

Cek blog anda melalui handphone atau bila melalui PC  dengan menambah di akhir url dengan  ?m=1.
Contoh: http://copygocopy.blogspot.com?m=1

Mudah-mudahan artikel Cara pasang artikel terkait di blogger versi HP dengan gambar ini bisa membantu anda, dan juga bermanfaat untuk yang lainnya. Lihat juga cara Pasang related post versi HP di atas judul postingan.
Terima kasih.


www.copyGOcopy.blogspot.com

15 komentar

  1. kalo related post yang ga pakai thumbnail ada ga gan? dimaksudkan agar loading lebih ringan

    BalasHapus
    Balasan
    1. Ada sob...
      Related post yang non thumbnail artikel yang ini telah kita perbarui.

      Hapus
    2. kok ga muncul di hape ya?
      http://www.indoblazer.com

      Hapus
  2. Sangat bermanfaat Sob. Dan bila diperkenankan, saya ijin bookmark dulu, sebab kebetulan lagi akses via mobile. Salam kenal dan salam berbagi. :)

    BalasHapus
    Balasan
    1. Terima kasih sob atas partisipasinya, Silahkan ...
      Salam kenal juga ..:)

      Hapus
  3. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  4. Bagaimana agar blog saya bisa tampil seperti blog mas ini dngan versi mobile ?

    BalasHapus
  5. Bagaimana agar blog saya bisa tampil seperti blog mas ini dngan versi mobile ?

    BalasHapus
    Balasan
    1. Untuk menyesuaikan template ke versi mobile, kamu bisa pilih mengaktifkan lewat setelan blogger, aktifkan tampilkan versi mobile "IYA". Namun jika ingin kamu ingin menyesuaikan atau bisa mengedit versi mobilenya. Kamu pada setelan blogger versi mobile template pilihlah yang setelan Custom/khusus yang paling bawah sendiri, jangan memilih yang lainnya.

      Untuk dukungan element koding versi mobile, tentu menyesuaikan koding yang ada pada template tersebut. Jika tidak mendukung tentunya memerlukan penambahan koding khusus untuk versi mobile. Sekarang yang jadi pertanyaan template blog yang mas pakai, template download tan apa template yang aslinya dari blogger, atau template blogger yang lama...?

      Kamu bisa upgrade template blog ke template yang baru, dan sesuaikan sendiri lewat perancangan template blogs - Blogger Bantuan. Sedangkan untuk menampilkan widget ke versi mobile yang belum tampil, bisa menambahkan lewat edit HTML pada tag widget dengan menambah [ mobile='yes' ] atau hanya khusus untuk mobile widgetnya [ mobile='only' ], lihat yang di contohkan pada Bantuan Blogger - show element widget on mobile add element (laman bhs inggris) silahkan terjemahkan sendiri.

      Dan untuk menyesuaikan mobile CSSnya bisa menambah dengan

      .mobile #IdElementHTML {css......} atau
      .mobile .ClassElementHTML {css......}

      Untuk membedakan bisa dengan tag conditional seperti di bawah ini

      <b:if cond='data:blog.isMobile'>
      // mobile..
      <b:else/>
      // desktop atau normal url ..
      </b:if>

      Yang lebih khusus lagi untuk membedakannya

      <b:if cond='data:blog.isMobile'>
      // Mobile ..
      <b:else/>
      <b:if cond='data:blog.canonicalUrl == data:blog.url'>
      // Normal url ..
      <b:else/>
      // Desktop ..
      </b:if>
      </b:if>

      Sedangkan agar tidak terjadinya duplikat url mobile, tidak bisa menggunakan openID komen dan lainnya, pastikan di template kamu di bawah tag <head> ada tag <b:include data='blog' name='all-head-content'/> yang nantinya akan di ganti[replace] sama Blogger ( canonical link, charset UTF-8, meta description Blog+posts dan lain lain ).

      Tujuan versi mobile sama dengan responsive web/blog design. Agar nyaman di akses apabila menggunakan handphone dan tanpa melakukan zooming, serta otomatis menyesuaikan layar browser.

      Sedangkan bila tidak mau repot repot menyesuaikan template atau pengen yang lain. Mas bisa cari template blogspot di luar dari template yang di sediakan blogger, mau yang gratis apa yang berbayar. Lalu download dan upload.

      Cari saja template blogspot yang responsive blog design atau yang mendukung versi mobile, syukur syukur mendukung keduanya, cari saja pakai mesin pencari Google. Kan sudah banyak tu yang berbagi template blogspot dari yang gratis sampai yang berbayar.

      Mudahan bisa membantu ...

      Hapus
  6. mantap sekali gan saya cari kesana kesini ternyata mendapatkan jawabannya disini.
    http://apkseluler.blogspot.com/ itu website saya gan.

    BalasHapus
  7. jos tenan bro....
    berhasil.... hahaaa.... thanks.....

    BalasHapus
  8. Gan saya pakai template yang hasil dowload gratisan tapi pas dipakai ga ada related postnya ya!!!, padahal pada demonya ada related dengan tampilan keren bgt sudah versi mobile frendly/seluler.. tapi pas di pasang tak ada cuma banyak menu-menu yang gak jelas! apakah saya harus seting lagi seperti pada artikel ini.? Mohon di jawab...mks!

    BalasHapus
    Balasan
    1. Mohon maaf, kurang tahu kita. Coba ditanyakan ditempat mengunduh(download) template(gratis) tersebut, dan pada setelan di dashbor Blogger umpan(feed)nya pilih PENUH atau SAMPAI LOMPAT BIRIS.

      Hapus
  9. langsung berhasil bos trimakasih :)

    BalasHapus
  10. Terima kasih pak boss, mampir ya : www.javanesetrans.com

    BalasHapus