Tutorial Buat Related Posts

Assalamualaikum. Dah lama Tia tak kasi tutorial kan. Kali ni Tia nak berkongsi satu lagi tutorial iaitu related posts atau dalam melayu pos/entri berkaitan. Ia memang sangat menarik. Tia dah cuba dan menjadi sebab tu Tia nak berkongsi dengan korang.

Related posts ni memang boleh tingkatkan pageview korang. Tu pun kalau tajuk-tajuk entri menarik perhatian korang. Dan Tia tengok dah ramai yang guna. Yelah, Tia tak guna widget  LinkWithin. Jadi ni mungkin sesuai untuk menggantikannya. Korang boleh tengok demo di -->SINI. Berminat? Cekidaut.

STEP 1 : Pergi Design > Edit HTML > Tick pada Expand Widget Templates

STEP 2 : Cari code </head>

STEP 3 : Tambahkan code di bawah ni dan letakkan sebelum/di atas code </head>

<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/AVvXsEgbUOcZl5OzhZWZrP9hlVD6DQa0hN6ATSKCQyj7tfgCKdIVNokiWI_TlIuUBdCTO0lKE4bds7l_gdjyHexWs8mLINXvILuEovV8GNKeMleyqAF80l1P4mZSdrZmC0yuF4m3RFqUd_ojBq0/") 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'/>

STEP 4 : Sekarang cari pulak code <data:post.body/>. Tapi kalau tak jumpa, cuba cari code <div class='post-body> atau jugak <data:post.body/>

STEP 5 : Tambahkan code di bawah ni dan letak selepas/di bawah code 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>

LAST STEP : Preview dulu dan kalau takde apa-apa error, bolehlah SAVE TEMPLATE.

Tutorial ni bukan Tia punya tau. Tia cuma guna cara Tia untuk olah entri ni. Tutorial asal boleh tengok di WidgetsForFree. Selamat mencuba..

• Tweet
• Share
• Share
• Share
• Share

PENAFIAN

Segala artikel yang dihasilkan oleh pemilik blog ini hanya sekadar pendapat peribadi yang mahu dikongsi bersama para pembaca blog ini serta untuk koleksi rujukan buat pemilik blog untuk kegunaan pada masa hadapan. Sebarang pertanyaan ataupun cadangan, sila emelkan ke inikisahtia@gmail.com

Related Post