Modifikasi Related Posts Dari Blogger Tune-up

Related Posts
Script related posts dengan thumbnail dan summary ini sebenarnya saya ambil dari Blogger Tune-up kepunyaannya mas Hendriono Dede. Namun sayangnya kini Blogger Tune-up telah hilang, semoga kedepannya Blogger Tune-up bisa kembali online lagi dan saya yakin mas Hendri pasti bisa mengembalikan blognya.

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

Dan untuk link readmore-nya saya hilangkan karena saya 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 saya modifikasi sedikit.

1. Silahkan pasang kode CSS di bawah ini tepat di atas kode ]]></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 adalah untuk kode warna background title-nya dan background hovernya. Silahkan sesuaikan dengan warna template blog Anda.

2. Silahkan pasang javascriptnya di atas kode </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 adalah banyaknya karakter dari summary-nya.

3. Silahkan pasang juga kode HTML pemanggilnya di bawah ini dan simpan di bawah postingan. biasanya di simpan di bawah kode 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 kode yang berwarna sesuai dengan kalimat yang Anda inginkan. Untuk kode yang berwarna biru kalimatnya harus sama.

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

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

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments