Related Post MagzEvo Version | Customize Thesis For Blogspot

Related Post adalah merupakan widget yang akan memaparkan beberapa artikel yang berkaitan dengan sesuatu artikel. Kebiasaannya ianya akan memaparkan minimum 5 artikel yang berkaitan dengan sesuatu artikel di bahagian bawah artikel yang dibaca.

Kali ni M'Rie nak kongsikan dengan anda semua. Bagaimana hendak memasukkan widget berkenaan ke dalam template D.I.Y Theme: Thesis For Blogspot.

1. Log In ke Dashboard:

Okay, macam biasalah. Perkara pertama yang perlu anda buat adalah anda perlu log in ke dashboard > template > edit HTML > Proceed.

Sila tanda tick pada "Expand Widget Templates".

2. Memasukkan Code CSS/Style Sheet:

Sekarang kita teruskan dengan langkah-langkah memasukkan code yang berkaitan ke dalam ruangan edit HTML. Anda dinasihatkan untuk membuat back up sebelum melakukan proses ini.

Sila cari code </head> dengan menggunakan button "Ctrl + F". Bila dah jumpa, sila copy dan paste code dibawah sebelum code </head>.

<b:if cond='data:blog.url != data:blog.homepageUrl'>

<style>

#main-wrapper {width: 610px;}

.post {border-bottom: 1px solid #ddd;}

}

</style>

</b:if>

<b:if cond='data:blog.pageType == "item"'>

<style>

#related_posts{}

#related_posts h4{ border-top:1px solid #333; border-bottom:1px solid #333; color:#333; font-size:14px; letter-spacing:0; line-height:20px; margin:0 0 5px; padding:5px 10px; background:#03C}

#relpost_img_sum{/* height:320px; overflow:auto; */margin:0; padding:0px; line-height:16px}

#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 #ccc; background:#fff; margin:0 0 5px; padding:5px; height:65px; list-style:none}

#relpost_img_sum .news-title{display:block; font-weight:bold !important}

#relpost_img_sum .news-text{display:block; text-align:justify; font-weight:normal; text-transform:none; color:#333}

#relpost_img_sum img{float:left; margin-right:5px; padding:4px; border:solid 1px #ccc; width:50px; height:50px; background:#fff}

</style>

var relnum = 0;

var relmaxposts = 5;

var numchars = 200;

var morelink = "readmore";

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\'>"+4[r]+"</a>";h+="<17 G=\'H-18\'>"+9[r]+" ... <a v=\'"+5[r]+"\' I=\'J\'>"+1y+"</a><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|relnum|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|relmaxposts|li|span|text|split|join|relpostimgthum|numchars|url|http|lh3|ggpht|com|_xcD4JK_dIjU|SnamIh0KTCI|AAAAAAAADMA|hLjqmEbdtkw|noimagethumb|gif|alternate|true|false|relatpost|URL|while|clearfix|nofollow|img|src|morelink|write'.split('|'),0,{}))

//]]></script>

</b:if>

3. Langkah Memasukkan Code HTML:

Selepas selesai dengan langkah ke 2. Kita teruskan dengan langkah ke 3 iaitu memasukkan code HTML Related Post.

3.1 Code HTML :

Ini pula arahan buat mereka yang masih menggunakan sistem komen asal template D.I.Y Theme: Thesis For Blogspot. Anda cuma perlu mencari code:

<span class='st_sharethis_hcount' displayText='ShareThis'/></div></div>

Selepas anda menjumpai code berkenaan sila copy dan paste code di bawah selepas code </div> dan pastikan anda meletakkannya sebelum code </b:if>.

<h4 style='color:#fff; text-shadow:none; border-radius:5px; border:2px solid #ddd; background:#000;'>Related Posts</h4>

<b:loop values='data:post.labels' var='label'>

</b:loop>

</ul>

</div>

Bagi pengguna template TFBv2. Sila cari "", paste kan code related post selepas barisan ayat berkenaan (Jika anda tidak jumpa dengan code share this yang dimaksudkan diatas).

3.1.1 Arahan Untuk Customize Code HTML:

Code yang di highlight dengan warna biru itu adalah code warna tulisan bagi perkataan "Related Post" dan ianya berwarna putih.
Code yang di highlight dengan warna hijau itu pula adalah code warna latar bagi perkataan "Related Post" dan ianya berwarna hitam.
Perkataan "Related Post" yang di highlight dengan warna merah itu. Anda boleh ubah dengan ayat anda sendiri.

Note:

Tutor ini boleh digunapakai untuk TFBv1 & TFBv2. Pengguna custom template lain pun boleh try guna juga. Tapi kena tahu nak letak kat mana jer code di step 3 tu.

Tutor Related Post di atas akan memaparkan gambar (artikel yang ada gambar). Bagi artikel yang tiada gambar, gambar default akan terpapar.

Pages