Modifikasi Related Posts Dari Blogger Tune-up

Modifikasi Related Posts Dari Blogger Tune-up

Bola Hero Gawai

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.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

36 Comments Add Comment

Pertamanya gak yh?hhehe

Artikelnya mantapp mas ,tp saya belum paham bnr ttg HTML..

Balas

Bahaya gak mas ?? , soalnya saya sudah baca komentar mas adhy di blog kang ismet..

Balas

keren bang, mudah2an blognya bang dede tersebut dikembalikan sm Google :(

Balas

Saya saya juga enggak terlalu paham kode HTML, hanya menggunakan insting aja hehehe...

Balas

Enggak mas...untk menggunakannya enggak bahaya...

Balas

Iya mas Zhinto saya prihatin sama mas Dede, semua blognya dihapus...semoga cepat kembali...padahal itu salah satu blog inspirasi saya... :(

Balas

Wah ijin coba Om...

Balas

Silahkan dicoba aja mas

Balas

Haduhh.....klw soal ginian saya harus konsentrasi tingkat tinggi baca postingannya. terlalu banyak kode2 ... gini ajah deh, saya komen standart saja,bingung mau ngomong apa.

NICE POST ndak papa kan OM?

Balas

Untuk mbak Indah ga papa heheehe...

Balas

wah bagus ini mas biasanya kan related post jarang yang valid html5
... oh ya kemarin maaf nullis komen ngak baca peaturannya dulu

Balas

keren juga nih mas kompi dengan tampilan artikel terkait yang tersembunyi. hehehe... :)

Balas

Makasih mas adhy... ini sebelumnya yang saya inginkan

http://center60.blogspot.com/

Balas

Ga apa2 mas...coba saja di out of topic, siapa tahu saya bisa menjawabnya...

Balas

iya lumayan lah hehehe....

Balas

Kalau begitu silahkan dicoba saja...

Balas

boleh gak related postnya dibuat 2 bagian gitu bung...?

Balas

Bisa bung dengan modifikasi pada ke CSS-nya dengan menentukan lebarnya menjadi setengahnya.

Balas

perlu dicoba ni... :D

Balas

oke deh saya coba di blog lainnya :D

Balas

oke mas lain kali aku coba kembali

Balas

Mas adhy Tolong bagaimana Cara membuat Related post di bawah Posts seperti ini -> http://ximg.us/upload/1373188802.png Nama templatenya JPstation blue di mkr site

Balas

bang,, artikel terkait di blogku ky gtu,, tp koq skarang error ya,, mohon solusinya

Balas

Barusan saya lihat di blognya sudah bagus tuh....

Balas

Ini yang saya cari mas, soalnya saya coba cari di Blogger TuneUp ternyata di hapus pihak Blogger. Alhamdulilah akhirnya nemu disini :)

Balas

mantaaaaap, simpen aja lah dulu scriptnya entaran kalo post udah nyampe 10-an baru pake..

bravoseo.blogspot.com :)

Balas

mas kompi, setelah saya pasang tutorial ini dan gambar aku perbesar, kok malah gambarnya tidak jernih ya? maksudnya tidak tajam. atau mas kompi kunjungi sebentar mymisteri-leonyli.blogspot,com. mohon berikan solusinya mas

Balas

Iya mas semoga Blogger Tune up bisa online kembali...

Balas

Thumbnailnya ini diambil dari default blogger dengan ukuran 72x72px (seperti halnya popular post). Jadi jika dimelarin extreme seperti itu pasti gambarnya jadi blur.

Balas

jadi benar2 tidak dapat di ubah ya mas kompi? ini terletaknya pada kode CSS atau pada javascript mas kompi

Balas

Dari javascriptnya...CSS hanya mengatur besar kecilnya gambar...

Balas

jadi misalnya kalau kita mau ubah tampilan gambar biar bisa tajam, apa mungkin bisa mas? mohon bantuanya mas

Balas

soalnya pada tampilan home, ada dua slider dan gambar pada readmore, sangat bagus. numun untuk artikel terkait ini gambarnya blur, kan sedikit kesal mas kompi hehehe

Balas

Kenapa sekarang saya pasang di yujikop[.]com saya koq ga bisa yah? Apa bentrok atau gimana?

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • 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 Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×