Membuat Artikel Terkait Dengan Ringkasan Artikel Membuat Artikel Terkait Dengan Ringkasan Artikel

Untuk mengobati kerinduan saya kepada teman-teman blogger, kali ini saya akan menulis sebuah tutorial baru tentang artikel terkait atau related post. Sebelumnya saya sudah membahas cara membuat artikel terkait itu pada versi 1 dan versi 2. Dari kedua artikel terkait yang pernah saya tulis dan coba, versi ini merupakan versi yang sangat menguras waktu, di samping tingkat kerumitannya yang cukup tinggi juga kurangnya pengetahuan saya tentang bahasa JSON Feed sehingga proses penulisan script cukup memakan waktu yang sangat lama. Dari sisi tampilan dan kelengkapan, versi ini sangat berbeda jauh dengan yang lainnya dan bahkan boleh dikatakan memiliki fitur yang sama persis dengan yang dikembangkan oleh para pengguna Wordpress. Untuk demonya lihat blog saya disini dan gambarnya anda bisa lihat di bawah ini :

Artikel terkait dengan fasilitas gambar mini dan ringkasan artikel ini memiliki beberapa kelengkapan yang sangat menarik yaitu :

• Menggunakan bahasa JSON Feed turunan JavaScript
• Mampu menampilkan gambar yang diambil atau diupload pada artikel
• Jika artikel tidak mengandung gambar maka gambar akan digantikan dengan gambar default yang sudah dituliskan pada script
• Mampu menampilkan ringkasan artikel sehingga mempermudah para pengunjung untuk menemukan artikel terkait yang dibutuhkan
• Artikel terkait ini kedepannya akan dikembangkan dalam versi Ticker dan versi Accordion yang tentunya menggunakan sentuhan animasi jQuery
• Lebih ringan karena versi ini hanya akan diload pada saat artikel yang dituju sedang dibuka, sedangkan pada saat membuka halaman utama script ini tidak akan diload
• Konfigurasinya sangat mudah
• Blog lebih tampak profesional

Bagaimana cantik kan? Baiklah jika anda ingin segera memasangnya di blog langsung saja saya berikan langkah-langkah pembuatannya :

1. Login dulu ke blogger dengan akun anda
2. Kemudian pada dasbor klik Tata Letak >> Edit HTML centang expand template widget
3. Jangan lupa untuk download template anda, berjaga-jaga jika nanti ada kesalahan.
4. Letakkan kode berikut sebelum tag </head>
   
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <style>
   #related_posts h4 {
   background: none repeat scroll 0 0 #333;
   color: #FFF;
   font-family: Arial,Tahoma,Verdana;
   font-size: 11px;
   font-weight: bold;
   margin: 0;
   padding: 2px 5px 1px 8px;
   text-shadow: 1px 1px #000000;
   text-transform: uppercase;
   }
   #relpost_img_sum {
   /* height: 320px;
   overflow: auto; */
   margin: 0;
   padding: 4px;
   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 #DDD;
   margin: 0;
   padding: 5px;
   height: 65px;
   list-style: none;
   }
   
   #relpost_img_sum li:hover {
   background-color: #E6E6E6;
   }
   
   #relpost_img_sum a {
   text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
   }
   
   #relpost_img_sum .news-title {
   display: block;
   font-weight: bold !important;
   margin-bottom: 4px;
   }
   
   #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: 14px;
   padding: 4px;
   border: solid 1px #DDD;
   width: 55px;
   height: 55px;
   }
   </style>
   <script type='text/javascript'>//<![CDATA[
   var relnojudul = 0;
   var relmaxtampil = 10;
   var numchars = 200;
   var morelink = "readmore";
   /*
   Related Post with Thumbnail & Summary 1.0 (June 17, 2011)
   */
   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|relnojudul|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|relmaxtampil|li|span|text|split|join|relpostimgcuplik|numchars|url|http|lh3|ggpht|com|_xcD4JK_dIjU|SnamIh0KTCI|AAAAAAAADMA|hLjqmEbdtkw|noimagethumb|gif|alternate|true|false|artikelterkait|URL|while|clearfix|nofollow|img|src|morelink|write'.split('|'),0,{}))
   //]]></script>
   </b:if>
5. Kemudian cari kode ini (rekomendasi)
   

   <div class='post-footer-line post-footer-line-3'/>

   atau ini (alternatif)

   <data:post.body/>

6. Lalu ubah kode (jika menggunakan kode rekomendasi) menjadi seperti dibawah ini:
   

   <div class='post-footer-line post-footer-line-3'>
   <!-- Untuk kode artikel terkait -->
   </div>

7. Masukan (copy paste) kode dibawah ini menggantikan kode <!-- Untuk kode artikel terkait -->
   

   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <div id='related_posts'>
   <h4>Related Posts</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=relpostimgcuplik&amp;max-results=50&quot;' type='text/javascript'/>
   </b:loop>
   <a href='http://creatingwebsite-maskolis.blogspot.com/' style='display:none;'>Related Posts with thumbnails and summary post for blogger</a>
   <ul id='relpost_img_sum'>
   <script type='text/javascript'>artikelterkait();</script>
   </ul>
   </div>
   </b:if>

8. Kemudian save template dan lihat hasilnya.
   

Keterangan:

• var relnojudul = 0; ubah nilai 0 jika ingin menampilkan jumlah artikel yang terkait dalam setiap kategori, nilai 0 artinya artikel dalam kategori tertentu akan ditampilkan semua (direkomendasikan tetap bernilai 0 karena dalam beberapa kasus, jika kita ubah nilainya maka artikel terkait akan menampilkan keterangan "undefined". Hal ini bisa terjadi jika ada artikel dalam kategori tertentu yang hanya terdiri dari 1 artikel)
• var relmaxtampil = 10; ubah nilai 10 untuk menentukan jumlah artikel yang terkait sesuai kategori
• var numchars = 200; ubah nilai 200 untuk menentukan jumlah karakter yang akan ditampilkan pada ringkasan artikel. Karakter termasuk spasi dan tanda baca
• var morelink = "readmore"; ubah kata readmore sesuai dengan keterangan link akhir ringkasan artikel yang akan menuju pada artikel yang dimaksud pada saat di klik.

Demikian tadi tutorial singkat cara membuat artikel terkait dengan thumbnail disertai uraian singkat, mungkin agak sedikit membingungkan, jika ada yang mau ditanyakan silahkan isi kolom komentar yanga da dibawah, sekian dan semoga bermanfaat.

Script source by : modification-blog.blogspot.com