Saturday, October 10, 2015

Membuat Artikel Terkait di bawah Postingan

Pada setiap postingan dibutuhkan suatu script aplikasi untuk mempermudah pada pembaca blog membuka artikel lain yang masih berhubungan dengan artikel yang dibaca (labe:sama). pabila kita membaca artikel internet maka bila dibawah postingan blog mestilah juga terdapat daftar artikel yang terkait internet. Seperti artikel ini terkait dengan artikel Membuat Tombol Like di Bawah Postingan.
Nanti di akhir artikel kalian bisa lihat contoh dari tabel artikel terkait ini yang menggunakan gambar dan deskripsi (dalam artikel ini saya tidak menambahkan gambar). Membuat tabel artikel terkait (related post) menurut saya sangatlah sulit, hanya programer HTML handal yang bisa membuat script ini, saya aja copy paste dari blog yang mengajarkan cara membuat ini (kalian boleh copy juga lo). Beberapa blog yang memahani HTML ketika copy paste sangat mengerti bagaimana meletakkan script ini sehingga berjalan dengan sebagaimana mestinya, tetapi banyak juga yang hanya copy paste tanpa mengetahui dan mempelajari script ini (saya banyak terjebak dan beberapa kali mencoba baru bisa berhasil). Ada dua bagian dari Script ini dan script ini harus diletakkan pada edit templete blog anda. Saya akan coba jelaskan sehingga Anda hanya sekali mencopy dan tralallala hasilnya bagus dan selesai seperti artikel terkait punya saya dibawah postingan artikel ini.
  1.  Script Pertama
  2. Script Pertama ini diletakkan pada bagian antara "<head>" dan "</head>"(tanda petik 2 tidak digunakan ya), Anda bisa mencari </head> dengan ctrl+F. Silahkan copy script di bawah dan paste sebelum "</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:14px; 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:65px; 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 = 7;
    var numchars = 150;
    var morelink = "selengkapnya";
    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>
  3. Script Kedua
  4. Script kedua akan diletak pada bagian bawah (setelah) kode " <data:post.body/>"(tanda petik 2 tidak digunakan). Kode tersebut ada 2 buah, ketika anda menggunakan ctrl+f untuk mencarinya tekanlah enter 2 kali dan bertemu dengan kode yang kedua, copylah script dibawah ini dan paste :
<b:if cond="data:blog.pageType == &quot;item&quot;">
</b:if>
<div id="related_posts" style="margin-top: 35px;">
<h4 style="background: #6fa8dc; border-radius: 5px; border: 2px solid #ddd; color: white; text-shadow: none;">
Artikel Terkait</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>
</b:loop></div>
Penjelasan Script:
  • Script Pertama yang bernarna biru adalah script untuk jumlah artikel yang akan ditampilkan disini saya menggunakan 7 artikel (silahkan dilihat artikel yang tampil di bawah postingan maksimal 7), kemudian script baris kedua adalah jumlah karakter yang akan diambil dari artikel yang ditampilkan, Anda bisa mengubahnya menjadi 100. 150. 200. 300  sesuai dengan selera Anda.
  • Script Kedua baris yang berwarna biru adalah judul dari tabel artikel terkait, itu juga Anda bisa ubah menjadi sesuai selera anda, misalkan seperti 'related post', 'artikel berhubungan', 'artikel lainnya'. terserah mau pake bahasa apa (jawa, palembang, bali, sulawesi, kalimantan, wkwkw kwkwkw). 
Demikianlah cara membuat tabel artikel terkait dengan gambar & deskripsi untuk blog.

No comments: