Modifikasi Related Posts Dari Blogger Tune-up

Script related posts dengan thumbnail dan summary ini sesungguhnya aku ambil dari Blogger Tune-up kepunyaannya mas Hendriono Dede. Namun sayangnya kini Blogger Tune-up telah hilang, biar kedepannya Blogger Tune-up mampu kembali online lagi dan aku yakin mas Hendri pasti mampu mengembalikan blognya.

Kembali ke pokok masalah, dikala aku pasang script dari Blogger Tune-up ini ternyata ada error di validasi HTML5. Dari itu kemudian aku sedikit rubah sehingga kini scriptnya sudah valid HTML5. Kemudian aku tambahkan juga title untuk linknya.

Dan untuk link readmore-nya aku hilangkan sebab aku pikir untuk menuju postingan sudah cukup dengan klik link atau gambarnya. Dan ditambahkan juga tombol show and hide pada title widgetnya. Sebagai demo-nya silahkan Anda lihat pada Related Widget di bawah postingan ini.

Bagaimana Anda ingin mencobanya? Atau Anda sudah memasangnya namun tidak valid HTML5? Silahkan saja coba dengan script di bawah ini yang telah aku modifikasi sedikit.

1. Silahkan pasang arahan CSS di bawah ini sempurna di atas arahan ]]></b:skin>

  #related_posts{background:none;margin-bottom:10px;padding:0}
 .related_posts_title{background:#b0130d;border:1px solid #8B0404;margin:0;padding:0;width:100%;transition:all .3s ease-in}
 .related_posts_title:hover{background:#E02424;border:1px solid #8B0404}
 .title_box{background:none;border:none;color:#FFF;font-family:Arial;font-size:14px;font-weight:700;text-shadow:1px 1px #000;text-transform:uppercase;margin:5px 0;padding:0;width:100%;cursor:pointer}
 .title_box:hover{margin:6px -1px 4px 1px;padding:0}
 #relpost_img_sum{line-height:16px;margin-top:5px;padding:0;transition:all .3s ease-in}
 #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 #bbb;height:65px;list-style:none;margin:0;padding:5px;transition:all .3s ease-in}
 #relpost_img_sum li:hover{background-color:#E6E6E6;border:solid 1px #b0130d}
 #relpost_img_sum a{text-shadow:0 1px 1px rgba(0,0,0,0.3);transition:all .3s ease-in}
 #relpost_img_sum a:hover{text-shadow:none}
 #relpost_img_sum .news-title{display:block;font-weight:700!important;margin-bottom:4px}
 #relpost_img_sum .news-text{display:block;text-align:justify;font-weight:400;text-transform:none;color:#333}
 #relpost_img_sum img{float:left;margin-right:14px;background:#FFF;border:solid 1px #bbb;width:55px;height:55px;padding:4px;transition:all .3s ease-in}
 #relpost_img_sum img:hover{border:solid 1px #b0130d;} 

Kode yang berwarna merah ialah untuk arahan warna background title-nya dan background hovernya. Silahkan sesuaikan dengan warna template blog Anda.

2. Silahkan pasang javascriptnya di atas arahan </head>

  <script type='text/javascript'>
 //<![CDATA[
 var relnojudul = 0;
 var relmaxtampil = 5;
 var numchars = 200;
 var morelink = "readmore";
 /*
 Related Post with Thumbnail & Summary 1.0 (May 02, 2011)
 copyright (c) 2011 Hendriono from http://modification-blog.blogspot.com/
 */
 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\' A=\'"+4[r]+"\'>"+4[r]+"</a>";h+="<17 G=\'H-18\'>"+9[r]+" ... <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> 

Angka 5 untuk menentukan banyaknya postingan yang ditampilkan dan angka 200 ialah banyaknya huruf dari summary-nya.

3. Silahkan pasang juga arahan HTML pemanggilnya di bawah ini dan simpan di bawah postingan. biasanya di simpan di bawah arahan ini

  <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
 <b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>
       <div style='clear: both;'/> <!-- clear for photos floats -->
     </div> 

Kode HTML pemanggilnya:

  <b:if cond='data:blog.pageType == &quot;item&quot;'>
 <div id='related_posts'>
 <div class='related_posts_title'>
   <input class='title_box' onclick='if (this.parentNode.parentNode.getElementsByTagName(&apos;div&apos;)[1].getElementsByTagName(&apos;div&apos;)[0].style.display != &apos;&apos;) { this.parentNode.parentNode.getElementsByTagName(&apos;div&apos;)[1].getElementsByTagName(&apos;div&apos;)[0].style.display = &apos;&apos;; this.innerText = &apos;&apos;; this.value = &apos;Klik Di Sini Untuk Menyembunyikan Artikel Lainnya&apos;; } else { this.parentNode.parentNode.getElementsByTagName(&apos;div&apos;)[1].getElementsByTagName(&apos;div&apos;)[0].style.display = &apos;none&apos;; this.innerText = &apos;&apos;; this.value = &apos;Klik Di Sini Untuk Membaca Artikel Lainnya&apos;; }' type='button' value='Klik Di Sini Untuk Membaca Artikel Lainnya'/></div>
 <div class='alt1'>
 <div style='display: none;'>
 <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;amp;callback=relpostimgcuplik&amp;amp;max-results=50&quot;' type='text/javascript'/>
 </b:loop>
 <div id='relpost_img_sum'>
   <script type='text/javascript'>artikelterkait();</script>
 </div>
 </div>
 </div>
 </div>
 </b:if> 

Silahkan rubah arahan yang berwarna sesuai dengan kalimat yang Anda inginkan. Untuk arahan yang berwarna biru kalimatnya harus sama.

Sekian saja modifikasi Related Posts dari Blogger Tune-up ini biar dapat dimengerti dan bermanfaat.

Special thanks to: mas Hendriono Dede (Blogger Tune-up), biar blognya cepat kembali online.