Tutorial : Letak Related Post blog

Salam dan selamat berpuasa semua....hari ni saya nak share dengan korang macammana nak letak widget related post dalam blog. Contoh related post adalah seperti dalam gambar di bawah yang terdapat di blog LEPAK.

Untuk pengetahuan, related post ni tak sama dengan linkwithin yang biasa kita letak dalam blog sebab dalam widget related post ni, post2 yang terpilih ialah post-post yang sama labels. Linkwithin pula akan pilih random post yang ada relate dengan post. Related post ni akan cari semua perkataan yang mempunyai label yang sama. (Ayat sedikit terbelit....huhuhu).

Ada banyak kelebihan sekianya blog dipasang dengan widget related post ni. Antaranya ialah membantu tingkatkan trafik blog dan pageview. 

Cara-cara letak related post

1. Pergi ke Dashboard > Design > Edit HTML > Expand widget templates

2. Cari code berikut dengan CTRL + F 

    </head>

3. Kemudian copy code ini, dan paste sebelum kod yang korang cari macam di step 2. 

    
    <style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsosgiLgjeKjTEgBL7a_2R2GmCRIYd1Bj6QwJQNwLAoDcDcLi1FpeODhkvLJQpC7Ho8WGpTjqLqanonCHyvDHMprSUR-WUptb2WCljhz3s0YWDzqtvX3aIinZjDH-QMzDdZ7qOxT1JQL0/") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='http://theblogtemplates.com/scripts/Related_posts_hack.js' type='text/javascript'/>

4. Cari code berikut dengan CTRL + F 
    <data:post.body/> atau  <div class='post-body>

5. Kemudian copy code ini, dan paste selepas kod yang korang cari macam di step 4.
    
<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font 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>


6. Boleh ubah max-result=5 ikut kesesuaian.


7. Save dan Preview.