Sebelum ni saya telah mengajar cara membuat "Related Post MagzEvo Version | Customize Thesis For Blogspot". Kali ini tutor yang sama, tapi ianya telah di tweak sedikit. Di mana tutor kali ini hanya memaparkan tajuk sahaja. Ianya tidak akan memaparkan "Summary Post & Gambar + Read More". Kalau anda dah lupa, sila rujuk:
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:65px; 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 dashed #ccc; background:#fff; margin:0 0 5px; padding:5px; height:20px; 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;display:none; margin-right:5px; padding:4px; border:solid 1px #ccc; width:0px; height:0px; background:#fff}
#related_posts a:link {color:#222;text-decoration:none;}
#related_posts a:visited {color:#F87431;text-decoration:none;}
#related_posts a:hover {color:#F87431;text-decoration:underline;}
</style>
<script type='text/javascript'>//<![CDATA[
var relnum = 0;
var relmaxposts = 5;
var numchars = 0;
var morelink = "";
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>
<!-- Related Post -->
3. Langkah Memasukkan Code HTML:
Selepas selesai dengan langkah ke 2. Kita teruskan dengan langkah ke 3 iaitu memasukkan code HTML Related Post.
3.2 Code HTML Untuk Pengguna Sistem Komen Asal:
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>.
<div id='related_posts' style='margin-top:35px;'>
<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'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=relpostimgthum&max-results=50"' type='text/javascript'/>
</b:loop>
<ul id='relpost_img_sum'>
<script type='text/javascript'>relatpost();</script>
</ul>
</div>
3.2.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.
Post a Comment