Cara Pasang Related Post Style Warna - Warni

Cara Pasang Related Post Style Warna - Warni - Related post berguna untuk memudah pengunjung untuk melihat artikel yang terkait dengan artikel yang dia baca. Related post pun juga banyak jenisnya, ada yang memakai gambar (thumbnail) dan ada yang hanya judulnya saja. Post saya kali ini saya akan share cara pasang related post style warna - warni.

Langkah 1 :

1. 1. Ke blogger > template > Edit HTML

2. kemudian cari kode, di bawah ini, agar lebih mudah gunakan Ctrl+F

<div class='post-footer-line post-footer-line-1'/>

Jika tidak ketemu, coba cari kode di bawah ini

<p class='post-footer-line post-footer-line-1'/>

/* atau */
<div class='post-footer-line post-footer-line-2'/>

<div class='post-footer-line post-footer-line-3'/>

</div>

</div>

3. Pilih style di bawah ini kemudian salin, dan tempelkan kode yang tadi di salin tepat di atas kode yang tadi anda cari

Style 1 :

• Demo

<script src='https://panjiwildanu.googlecode.com/svn/RelatedPost1.js' type='text/javascript'/><link href='https://panjiwildanu.googlecode.com/svn/RelatedPost1.css' rel='stylesheet' type='text/css'/><b:if cond='data:blog.pageType == &quot;item&quot;'><div id='related-posts'><b:loop values='data:post.labels' var='label'><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>
<h2 class='title' style='color:#fff;background-color:#000;width:150px;'>Related Topics</h2>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5; <!-- Increase To Show More Then 5 Related Post -->
removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>

Style 2 :

• Demo

<script src='https://panjiwildanu.googlecode.com/svn/RelatedPost2.js' type='text/javascript'/><link href='https://panjiwildanu.googlecode.com/svn/RelatedPost2.css' rel='stylesheet' type='text/css'/><b:if cond='data:blog.pageType == &quot;item&quot;'><div id='related-posts'><b:loop values='data:post.labels' var='label'><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>
<h2 class='title' style='color:#fff;background-color:#000;width:150px;'>Related Topics</h2>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5; <!-- Increase To Show More Then 5 Related Post -->
removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>

Style 2 :

• Demo

<script src='https://panjiwildanu.googlecode.com/svn/RelatedPost3.js' type='text/javascript'/><link href='https://panjiwildanu.googlecode.com/svn/RelatedPost3.css' rel='stylesheet' type='text/css'/><b:if cond='data:blog.pageType == &quot;item&quot;'><div id='related-posts'><b:loop values='data:post.labels' var='label'><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>
<h2 class='title' style='color:#fff;background-color:#000;width:150px;'>Related Topics</h2>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5; <!-- Increase To Show More Then 5 Related Post -->
removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>

Style 4 :

• Demo

<script src='https://panjiwildanu.googlecode.com/svn/RelatedPost4.js' type='text/javascript'/><link href='https://panjiwildanu.googlecode.com/svn/RelatedPost4.css' rel='stylesheet' type='text/css'/><b:if cond='data:blog.pageType == &quot;item&quot;'><div id='related-posts'><b:loop values='data:post.labels' var='label'><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>
<h2 class='title' style='color:#fff;background-color:#000;width:150px;'>Related Topics</h2>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5; <!-- Increase To Show More Then 5 Related Post -->
removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>

ubah var maxresults=5 untuk merubah jumlah post yang muncul

Langkah 2 :

1. Cari kode di bawah ini, agar lebih mudah gunakan Ctrl+F

<data:post.body/>

2. Salin kode di bawah ini, dan tempelkan dibawah kode yang cari di langkah 2 no.1

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://dl.dropboxusercontent.com/s/ivwes8ykd0esqev/related-posts-widget-1.0-ycode-recent.js" type="text/javascript"></script>
<script type="text/javascript">
relatedPostsWidget({
'containerSelector':'div.post-body'
,'loadingText':'loading...'
});</script>

3. Simpan

Nah itulah cara - caranya, semoga tutorial kali ini bermanfaat :D