Cara Menambahkan Artikel Terkait "Baca Juga" Di Website/Blog Anda

shares |

Loading...
Hai sobat danifin, Pernah melihat suatu blog yang ada kotak "baca juga" yang berisi artikel terkait? Nah, pada kesepatan kali ini saya akan memberikan trik agar artikel / postingan blog terdapat Artikel terkait berdasarkan label di semua postingannya secara otomatis.

Sebelumnya artikel ini saya kutip dari blog mastah tentang bagaimana cara membuat kotak artikel terkait di tengah postingan blog, seperti pada website jalan tikus. dan sudah saya rangkai kata-katany agar anda dapat dengan mudah memahami isi dari artikel ini.

Setelah saya lihat-lihat blognya, Saya menemukan cara alternatif agar artikel terkait ini dapat berada di tengah postingan blog.

Kalian dapat melihat tampilan blog demonya di blog berikut ini Demo Tampilannya

Langsung saja ya ke tutorial cara pemasangan artikel terkait berdasarkan label di tengah postingan blognya gan...

Tutorial Memasang Kotak Artikel Terkait Di Tengah Postingan Blog

  • Seperti biasa, login dulu ke blogger.com
  • Pilih Tab Template, Edit HTML Terus Kalian Cari Kode </head>
  • kalo sudah ketemu kode </head>, anda masukan kode berikut di atasnya.

    <style type="text/css">
    /*Artikel Terkait Tengah Postingan*/
    .bacajuga{position:relative;display:inline-block;border:1px solid #DDD;margin:20px 0}
    .bacajuga h4{background-color:#FFF;position:absolute;margin-left:30px;margin-top:-14px;padding:0 15px;border:1px solid #DDD}
    .bacajuga ul{padding:11px 41px 0;list-style:none}
    .bacajuga ul a:before{font-family:fontawesome;content:"\f105";padding-right:10px}
    .bacajuga li{border-radius:5px;border-bottom:1px solid rgba(227,227,227,0.33);line-height:1.7em}
    </style>
    <script type="text/javascript">  
    //<![CDATA[  
    eval(function(p,a,c,k,e,d){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--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[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=g f();2 9=0;2 6=g f();d z(m){c(2 i=0;i<m.u.5.3;i++){2 5=m.u.5[i];4[9]=5.v.$t;c(2 k=0;k<5.h.3;k++){b(5.h[k].A==\'y\'){6[9]=5.h[k].x;9++;C}}}}d B(){2 7=g f(0);2 8=g f(0);c(2 i=0;i<6.3;i++){b(!q(7,6[i])){7.3+=1;7[7.3-1]=6[i];8.3+=1;8[8.3-1]=4[i]}}4=8;6=7}d q(a,e){c(2 j=0;j<a.3;j++)b(a[j]==e)p M;p L}d D(){2 r=s.K((4.3-1)*s.I());2 i=0;n.l(\'<o>\');E(i<4.3&&i<F){n.l(\'<w><a x="\'+6[r]+\'" J ="G" v="\'+4[r]+\'">\'+4[r]+\'</a></w>\');b(r<4.3-1){r++}H{r=0}i++}n.l(\'</o>\')}',49,49,'||var|length|relatedTitles|entry|relatedUrls|tmp|tmp2|relatedTitlesNum||if|for|function||Array|new|link||||write|json|document|ul|return|contains||Math||feed|title|li|href|alternate|related_results_labels|rel|removeRelatedDuplicates|break|printRelatedLabels|while|20|_blank|else|random|target|floor|false|true'.split('|'),0,{}))
    //]]>  
    </script>
    
    
    
  • Nah sekarang anda tinggal pasang kode html untuk menampilkan artikel terkaitnya
  • Cari kode <data:post.body/> Ada lebih dari 1 kode itu, coba kalian ganti kodenya yang ke 2 dengan kode berikut ini.

    <div expr:id='&quot;post1&quot; + data:post.id'/>
    <div class='bacajuga'>  
    <b:if cond='data:post.labels'>  
    <b:loop values='data:post.labels' var='label'>  
    <b:if cond='data:blog.pageType == "item"'>  
    <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5"' type='text/javascript'/>  
    </b:if>  
    </b:loop>  
    </b:if>  
    <b:if cond='data:blog.pageType == "item"'>  
    <h4>Baca Juga</h4>  
    <script type="text/javascript">  
    removeRelatedDuplicates();  
    printRelatedLabels();  
    </script>  
    </b:if>  
    </div>
    <div expr:id='&quot;post2&quot; + data:post.id'><data:post.body/></div>
    <script type='text/javascript'>
    var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);
    var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);
    var s=obj1.innerHTML;
    var t=s.substr(0,s.length/2);
    var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);
    if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
    </script>
    
    
    
    Silahkan sesuaikan nilai berikut max-results=5 dengan jumlah artikel yang ingin di tampilkan.
      Misal max-result=3, nantinya hanya 3 link yang muncul
  • Kalo tidak/belum tampil coba cari lagi kode ini <data:post.body/>
  • Kira Kira Tampilan kodenya seperti ini, cari aja kode yang hampir mirip dengan kode dibaewah.
  • 
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <data:post.body/>
    </b:if>
    
  • Kalian ubah menjadi Seperti Ini
  • .kode script disini.<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div expr:id='&quot;post1&quot; + data:post.id'/>
    <div class='bacajuga'>  
    <b:if cond='data:post.labels'>  
    <b:loop values='data:post.labels' var='label'>  
    <b:if cond='data:blog.pageType == "item"'>  
    <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5"' type='text/javascript'/>  
    </b:if>  
    </b:loop>  
    </b:if>  
    <b:if cond='data:blog.pageType == "item"'>  
    <h4>Baca Juga</h4>  
    <script type="text/javascript">  
    removeRelatedDuplicates();  
    printRelatedLabels();  
    </script>  
    </b:if>  
    </div>
    <div expr:id='&quot;post2&quot; + data:post.id'><data:post.body/></div>
    <script type='text/javascript'>
    var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);
    var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);
    var s=obj1.innerHTML;
    var t=s.substr(0,s.length/2);
    var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);
    if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
    </script>
    </b:if>
    
    
    
  • Kalo sudah ketemu, tinggal save dan lihat hasilnya...


Sekarang bagi kalian yang ingin memasang Artikel Terkait Berdasarkan Label Di Postingan Blog, tapi ingin menentukan letaknya sendiri entah itu di awal postingan, di tengah postingan atau di akhir postingan.

Gunakan tutorial berikut ini untuk memasangnya, tapi kalian harus manual memasukkan script ini dan mengisi label apa yang mau di masukan ke artikel agan, Cukup repot kan, Perjuangan BRO!!!

langsung saja kita mula ke tutorialnya..

Cara Manual Memasukan Artikel Terkait Ke Postingan Blog

  • Sama Seperti cara Di Atas, Masuk ke Template, Edit HTML Lalu Kalian Cari Kode </head>
  • Setelah Ketemu kode </head>, Masukan Kode Berikut Di Atasnya
  • <style type="text/css">
    /*Artikel Terkait*/
    .bacajuga{position:relative;display:inline-block;border:1px solid #DDD;margin:20px 0}
    .bacajuga h4{background-color:#FFF;position:absolute;margin-left:30px;margin-top:-14px;padding:0 15px;border:1px solid #DDD}
    .bacajuga ul{padding:11px 41px 0;list-style:none}
    .bacajuga ul a:before{font-family:fontawesome;content:"\f105";padding-right:10px}
    .bacajuga li{border-radius:5px;border-bottom:1px solid rgba(227,227,227,0.33);line-height:1.7em}
    </style>
    <script type="text/javascript">
    //<![CDATA[
    function bacajuga(e){document.write("<ul>");for(var t=0;t<e.feed.entry.length;t++){for(var r=0;r<e.feed.entry[t].link.length&&"alternate"!=e.feed.entry[t].link[r].rel;r++);var n="'"+e.feed.entry[t].link[r].href+"'",l=e.feed.entry[t].title.$t,a="<li><a href="+n+'" title="'+l+'" target="_blank">'+l+"</a> </li>";document.write(a)}document.write("</ul>")}
    //]]>
    </script>
    
    
    
  • Oke, Pemasangan scriptnya sudah selesai, Nah, sekarang kita tinggal memasang script di setiap postingan yang ingin di psang artikel terkait berdaasrkan labelnya.
  • Silahkan anda masuk ke postingan yang ingin di pasang, terus pilih tab HTML, jangan console yah
  • Kalo sudah masuk ke tab html di postingan, kalian copy kode berikut ke dalamnya, silahkan sesuaikan letaknya mau di letakan setelah kalimat / gambar apa. ingat copy ya jangan replace kodenya.
  • 
    <div class='bacajuga'> 
    <h4>Baca Juga</h4>
    <script src="/feeds/posts/summary/-/Tutorial?max-results=5&alt=json-in-script&callback=bacajuga"></script>
    </div>
    
    Silahkan ganti kata ini Tutorial Dengan Label Yang Ingin di tampilkan
    Dan Sesuaikan juga angka max-results=5 dengan artikel yang ingin di tampilkan.
  • kalo sudah, tinggal anda di publikasikan dan selesai deh 
  • Done dan selesai

Cukup sekian dan terima kasih, Semoga Bermanfaat bagi kalian semua. Share jika bermanfaat.

0 comments: