Modifikasi Related Posts Dari Blogger Tune-Up
Script related posts dengan thumbnail dan summary ini bekerjsama aku ambil dari Blogger Tune-up kepunyaannya mas Hendriono Dede. Namun sayangnya sekarang Blogger Tune-up telah hilang, biar kedepannya Blogger Tune-up sanggup kembali online lagi dan aku yakin mas Hendri niscaya sanggup mengembalikan blognya.
Kembali ke pokok masalah, dikala aku pasang script dari Blogger Tune-up ini ternyata ada error di validasi HTML5. Dari itu lalu aku sedikit rubah sehingga sekarang scriptnya sudah valid HTML5. Kemudian aku tambahkan juga title untuk linknya.
Dan untuk link readmore-nya aku hilangkan alasannya ialah 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 isyarat CSS di bawah ini sempurna di atas isyarat ]]></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 isyarat warna background title-nya dan background hovernya. Silahkan sesuaikan dengan warna template blog Anda.
2. Silahkan pasang javascriptnya di atas isyarat </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 memilih banyaknya postingan yang ditampilkan dan angka 200 ialah banyaknya huruf dari summary-nya.
3. Silahkan pasang juga isyarat HTML pemanggilnya di bawah ini dan simpan di bawah postingan. biasanya di simpan di bawah isyarat ini
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div> Kode HTML pemanggilnya:
<b:if cond='data:blog.pageType == "item"'>
<div id='related_posts'>
<div class='related_posts_title'>
<input class='title_box' onclick='if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Klik Di Sini Untuk Menyembunyikan Artikel Lainnya'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Klik Di Sini Untuk Membaca Artikel Lainnya'; }' 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='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=relpostimgcuplik&amp;max-results=50"' type='text/javascript'/>
</b:loop>
<div id='relpost_img_sum'>
<script type='text/javascript'>artikelterkait();</script>
</div>
</div>
</div>
</div>
</b:if> Silahkan rubah isyarat yang berwarna sesuai dengan kalimat yang Anda inginkan. Untuk isyarat yang berwarna biru kalimatnya harus sama.
Sekian saja modifikasi Related Posts dari Blogger Tune-up ini biar sanggup dimengerti dan bermanfaat.
Special thanks to: mas Hendriono Dede (Blogger Tune-up), biar blognya cepat kembali online.
Sumber https://www.kompiajaib.com/
0 Response to "Modifikasi Related Posts Dari Blogger Tune-Up"
Posting Komentar