VARIASI PEMBUATAN ARTIKEL TERKAIT (RELATED POST)

BLOGGER BLOG kali ini ingin berbagi cara membuat widget artikel terkait (related post) pada bagian akhir masing-masing artikel blog dengan beberapa metode atau cara pembuatannya. Widget artikel terkait atau related post ini pada dasarnya dapat kita manfaatkan sebagai sebuah senjata untuk menurunkan prosentase bounce rate blog sekaligus untuk meningkatkan pageviews blog yang pada akhirnya nanti akan berkaitan dengan peringkat Alexa sebuah blog. Banyak cara yang dapat dipergunakan untuk memasang widget artikel terkait ini, namun pada artikel ini saya akan sampaikan cara pembuatan yang hasil akhirnya nanti tidak terlalu membebani loading blog, artinya loading blog yang kita miliki tetap stabil alias tidak menjadi berat.

POLA PERTAMA

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>

Kode Script:

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

Langkah-langkah berikutnya adalah seperti berikut ini :

1. Kemudian cari kode ini (rekomendasi)
   

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

   atau ini (alternatif)

   <data:post.body/>

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

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

1. <b:if cond='data:blog.pageType == &quot;item&quot;'>  
2. <div id='related_posts'>  
3. <h4>Related Posts</h4>  
4. <b:loop values='data:post.labels' var='label'>  
5. <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'/>  
6. </b:loop>  
7. <a href='http://creatingwebsite-maskolis.blogspot.com/' style='display:none;'>Related Posts with thumbnails and summary post for blogger</a>  
8. <ul id='relpost_img_sum'>  
9. <script type='text/javascript'>artikelterkait();</script>  
10. </ul>  
11. </div>  
12. </b:if> 

Kemudian simpan template anda 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.

Sumber tulisan : http://www.maskolis.com/2011/06/membuat-artikel-terkait-dengan.html

POLA KEDUA


Tampilan artikel terkait pola ke dua ini seperrti gambar berikut :

Menarik bukan? Cara ini bisa digunakan bersamaan dengan related post tanpa thumbnail. Bagi anda yang tertarik untuk memasangnya, ikuti langkah-langkah berikut:

1. Yang pasti anda mesti Login ke Blogger dulu 
2. Buka menu Design -> Edit HTML 
3. Beri centang pada "Expand Widgets Templates"
4. Letakkan kode berikut diatas </head>
   

   <!--Related Posts with thumbnails Start-->

   <!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>

   <style type='text/css'>
   #related-posts {
   float:center;
   height:100%;
   min-height:100%;
   padding-top:10px;
   padding-left:15px;
   padding-right:15px;
   }
   
   #related-posts h2{
   font-size: 1.3em;
   color: black;
   font-family: Arial;
   margin-bottom: 0.75em;
   }
   
   #related-posts a{
   color:black;
   }
   
   #related-posts a:hover {
   background-color:#eeeeee;
   }
   </style>
   

   <script type='text/javascript'>

   var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixoA2F-S43WUpgC7s3MX9jp5RvdaWbmXfLu0u9AIyGg_uEkwTitPZiIs8hUqldq9qYLzO1OtjrD-kbH4YtFt6xdAOP5-J0S8G4Et5AI3wnS4tfKSORuaxgmLvavCe9bwdMHIN87A6HdYl3/";

   var maxresults=5;

   var splittercolor="#cccccc";

   var relatedpoststitle="You might also like:";

   </script>

   <script src='https://sites.google.com/site/bangkolis/javascript/maskolis.js' type='text/javascript'/>

   <!-- remove --></b:if>

   <!--Related Posts with thumbnails End-->

5. Lalu cari <p class='post-footer-line post-footer-line-1'/> 
6. Kalau tidak ketemu coba cari post-footer-line 
7. Letakkan kode berikut dibawahnya.
   

   <!-- Related Posts with Thumbnails Code Start-->
   <!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
   <div id='related-posts'>
   <b:loop values='data:post.labels' var='label'>
   <b:if cond='data:label.isLast != &quot;true&quot;'>
   </b:if>
   <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
   <script type='text/javascript'>
   removeRelatedDuplicates_thumbs();
   printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
   </script>
   </div><div style='clear:both'/>
   <!-- remove --></b:if>
   <!-- Related Posts with Thumbnails Code End-->

8. Terakhir Save template anda.

Keterangan:

• var defaultnoimage="http://lh5.ggpht.com/_15FopxVONSo/TD3yhixJLoI/ AAAAAAAADaY/gk-KFA5_m7w/noimage.png" menunjukkan gambar yang muncul pada postingan yang tidak memiliki gambar. Anda bisa mengganti gambar tersebut dengan gambar lain. 
• var maxresults=5 menunjukkan jumlah postingan yang muncul pada related post. Silahkan atur jumlah postingan yang mau ditampilkan dengan mengganti angkanya. 
• var splittercolor="#cccccc" menunjukkan warna garis pemisah. Ganti cccccc dengan kode warna yang anda inginkan. 
• var relatedpoststitle="You might also like:" menunjukkan judul related post. Ganti teks yang berwarna merah dengan judul yang anda inginkan.

Bagi anda yang merasa cara diatas terlalu sulit, anda bisa menggunakan widget related post dengan thumbnail yang disediakan oleh linkwithin.com. Untuk cara pemasangannya sangat mudah, berikut langkah-langkahnya:

1. Buka situs http://www.linkwithin.com 
2. Isi data-data yang diperlukan pada form yang telah disediakan
   

   Email: alamat email anda
   Blog link: Alamat blog dimana anda memasang widget related post with thumbnail
   Platform: pilih Other
   Width: pilih jumlah related post yang mau ditampilkan

   Beri centang pada kotak kecil jika anda menggunakan background template yang gelap
   
3. Klik Get Widget 
4. Copy dan paste kode script yang diberikan diatas </body> pada template blog anda lalu simpan template anda. Selesai.

Sumber artikel : http://www.maskolis.com/2011/03/cara-pasang-related-post-thumbnail.html

Demikianlah uraian tentang variasi pembuatan artikel terkait (related post) yang dapat kita pasang pada sebuah blog, semoga bermanfaat.