Membuat Related Post Dengan Tombol Hide Dan Show

TutorNesia ~ Related Posts untuk link readmore yang saya hilangkan karena saya pikir untuk menuju postingan sudah cukup dengan klik link atau gambarnya. Dan ditambah 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. Sebenarnya tutorial ini saya ambil dari mas adhy.

01. 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:#C6BAED;border:1px solid #5575C0;margin:0;padding:0;width:617px;transition:all .4s ease-in}
.related_posts_title:hover{background:#6A88CE;border:1px solid #5575C0}
.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:617px;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 .4s 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 .4s ease-in}
#relpost_img_sum li:hover{background-color:#D3E0FE;border:solid 1px #C6BAED}
#relpost_img_sum a{text-shadow:0 1px 1px rgba(0,0,0,0.3);transition:all .4s 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 .4s ease-in}

Kode yang berwarna Biru adalah untuk kode warna background title-nya dan background hovernya. Silahkan sesuaikan dengan warna template blog Anda.

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

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

Sumber Berita Ini: Membuat Related Post Dengan Tombol Hide Dan Show

Riio Cyber-Art

Blog ini berisi informasi mengenai dunia blogging dan internet dari berbagai sumber, jika anda menyukai dan mau dapatkan Update berita terbaru, harap ikuti blog ini dengan memasukan Email anda atau mengikuti Twitter/Facebook, dengan begitu anda secara otomatis akan mendapatkan Update Berita terbaru disini.

Membuat Related Post Dengan Tombol Hide Dan Show

Sumber Berita Ini: Membuat Related Post Dengan Tombol Hide Dan Show

Update Artikel Terbaru

Entri Populer