Tutorial : Related Posts Bawah Setiap Post/Entry

WRITTEN BY : ARRIF TIME : 1:08 PM TOTAL COMMENTS : 0



Assalamualaikum dan salam sejahtera semua yee.

Okay kali ni aku nak ajar macamana nak buat fungsi Related Post dekat bawah setiap post atau entry kita ni. Fungsi Related Post ni kan penting untuk blog kita sebab ia akan memaparkan post post yang terkait dengan post yang sedang kita baca. Dan ianya juga dapat meningkatkan ramai pembaca dekat blog kita. Ramai blogger menggunakan widget LinkWithin, tapi tu ada gambar/thumbnail. Related post yang aku aku ajar ni takde gambar. Bagus untuk loading blog. Bagi yang nak cuba, boleh lah ikut step step nya ni. 



1. Pergi 'Dashboard'
2. Buka ruangan 'Template
-Lagi baik 'Backup Template' blog kauorang dulu. Kalau tak tahu caranya. Tengok Tutorial : Cara Backup/Restore Template Blog
3. Klik 'Edit HTML'
4. Tekan Ctrl+F  dekat keyboard kauorang [serentak]
5. Cari kod dekat bawah ni :

</head>

6. Copy code dekat bawah ni, dan paste di atas/sebelum code </head> tadi tu.

<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(“http://lh3.ggpht.com/_cNpXRtRph18/S76dASm3WGI/AAAAAAAAEJg/AVmw4HhRdsk/rss.png”) 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=’https://sites.google.com/site/widgetsforfree/scripts/Related_posts_hack.js’ type=’text/javascript’/>

7. Sekarang cari code ni pulak okay

<data:post.body/>

atau

<div class='post.body>


8. Kalau dah jumpa salah satu code tu. Copy code dekat bawah ni pulak
  
<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>

9. Paste dekat bawah code <data:post.body/> atau <div class='post.body> tadi tu.

PENGUBAHSUAIAN:
http://lh3.ggpht.com/_cNpXRtRph18/S76dASm3WGI/AAAAAAAAEJg/AVmw4HhRdsk/rss.png : Kauorang boleh tukar nak letak gambar apa.
- Related Posts : Kalau nak ubah ayat koauorang sendiri pun boleh.
- 5 : Tu bilangan post yang akan keluar nanti. Nak ubah boleh je.

10. Klik 'Preview Template'
11. Kalau tiada error, klik 'Save'

Sila bagitahu kalau menjadi dan bagitahu juga kalau tak menjadi. ;).




Related Posts Plugin for WordPress, Blogger...

No comments:

Post a Comment

Dah baca kan? Komen lah sikit. Sikit pun jadilah.
Fikir sebelum menaip. ;)