[Tutorial] : Related Post Widget di bawah setiap entri

Bismillahirahmanirrahim..


Dehem - dehem..


Tutorial ni dah lama nak pos tapi sebab malas pastu lupa benda ni dah berkurun kat dalam draf, terus tak buat. Sampailah encik ARC hemsem kita tanya, baru ai teringat.


Related Post Widget ni lebih kurang macam LinkWithin la jugak cuma takde gambar. Tapi bagi saya, widget ni lebih kemas berbanding LinkWithin. Nak tau macam mana nak dapatkan widget ni?


Chalo bete.

widget Related Post

1. Pegi ke Layout>Edit HTML


2. Sila backup terlebih dahulu template anda ye nanti kalau tak jadi boleh recover balik.


3. Tick kat kotak "Expand Widget Templates".


4. Cari kod </head>.


5. Masukkan kod kat bawah ni sebelum kod  tadi.

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

6. Sekarang, cari kod <data:post.body/> atau kalau tak jumpa cari kod 

<div class='post-body>

atau

<data:post.body/>

7. Masukkan kod kat bawah ni dibawah kod yang kamu cari tadi.

<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>

8. Preview dan Save!


Source : Sini