Tutorial cara buat related posts teks yang cantik

Hari ini admin nak kongsi tutorial khas untuk anda yang sudi baca blog wansite.Lihat  gambar diatas 

adakah anda berminat dengan related posts diatas

Jika minat jom kita buat kat blog kita hari ini..

Admin dah pasang widget ini :) memang baguskan

Jom buat seperti berikut :

1. Login blog kita

2. Edit template - Back up template anda dahulu untuk keselamatan :)

3. cari code : </head> 

    dengan cara guna keybord pc anda dengan tekan button ctrl + F

4. Kemudian copy code dibawah dan letak atas code  </head> 

<!--Related Posts Start-->
<style>
#related-posts {
float : left;
width:550px;
margin-top:0px;
margin-left : 5px;
font : 11px Verdana;
padding:5px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
color : #940f04;
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #054474;
font-size : 12px;
text-decoration : none;
}
#related-posts a:hover {
color : #0080ff;
text-decoration : none;
}
#related-posts ul {
list-style:none; padding:0px !important;
}
#related-posts ul li { background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYfjBrt9XRX71tC-tVhvUxHjiuYMDTStqqbaiZtGNMCUfrkBs8sXboqnHVvEJJvipSCuHHNJi9lEOp6u2YNA3oYcQB6B7-SJAN734R5aJBulzlq6KMgNKVUUcjQSi4_q2a6YrpcfqJC_g/s400/255.gif) no-repeat scroll 0px 6px; margin: 0.3em 0 !important; padding: 0 0 0.8em 20px; line-height : 2em; border-bottom:1px dotted #cccccc;
}
#related-posts ul li:hover{    
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpatBILi4qgiUie0T7HotWWGxCWZKLAHro7Ofn-WJ445mm6-N-hso83CcWMm6VssqdcBQNHYZz-bM8AcEB5MeAsRdJK-OLDpfFMRejHFIE0nlRntNeKkOdJdyekjahn4sTWhhHNR0Tb4E/s400/251.gif) no-repeat scroll 0px 6px !important;
}
 
</style>
<script language='JavaScript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 6) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
document.write('<a rel="dofollow" href="http://wansite.blogspot.com/" style="float:right;font-size:10px;">Widgets</a></font>');
}
//]]>
</script>
<!--Related Posts Stop-->  

5. Kemudian cari code ini pula

<data:post.body/>

dengan cara guna keybord pc anda dengan tekan button ctrl + F

6.  Kemudian copy code dibawah dan letak atas code   <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<font color='#289728' face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>

Kemudian klik save template anda.

wah ! dah siap :)

Jika ada apa2 masalah berkaitan sila tanya dibahagian komen dibawah yer

Share pada kawan2 anda juga yer @ copy ke blog anda.  
Semoga perkongsian ini beri maklumat dan manfaat pada anda.
Terima kasih kerana baca blog ini.Post dari-Wansite