Topics :
Home » » Cara Membuat Related Post Thumbnail pada Blog

Cara Membuat Related Post Thumbnail pada Blog

Ungkit - Sebuah Cara yang mudah untuk membuat Related Post dengan Thumbnail pada Blog. Related Post sendiri adalah artikel yang terkait dengan sebuah postingan. Related Post Thumbnail ini akan muncul dibawah setiap postingan yang terkait.



Baik langsung saja jika tertarik simak tips Cara Memasang Related Post Thumbnail dibawah ini:

Step 1:
Masuk ke akun Blogger Anda.

Back up template Anda biar Aman

Pilih Design -> Template

Pilih Edit HTML -> Centang "Expand Widget Templates"

Tekan Ctrl+F untuk mencari cepat kode </head>

Letakkan kode dibawah ini tepat di ATAS kode </head>

<!--Start of Related Posts with thumbnails -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{float:center;text-transform:none;height:100%; width:auto;min-
height:100%;padding-top:5px;padding-left:5px}#related-posts h2{font-size:1.6em;font-
weight:bold;color:black;font-family:Georgia,&#8220;Times New Roman&#8221;,Times,serif;margin-
bottom:.75em;margin-top:0;padding-top:0}#related-posts a{color:black}#related-posts a:hover
{color:black}#related-posts a:hover{background-color:#d4eaf2}
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;https://sites.google.com/site/mywebscript/images/noimage.png&quot;;
var maxresults=7;
var splittercolor=&quot;#d4eaf2&quot;;
var relatedpoststitle=&quot;Artikel Terkait&quot;;
</script>
<script src='https://sites.google.com/site/mywebscript/javascript/related-posts-thumb.js'
type='text/javascript'/>
</b:if>
<!-- End of Related Posts with thumbnails -->


Step 2:
Cari kode <div class="post-footer-line> atau <post-footer-line-1">

Letakkan kode dibawah ini tepat di BAWAH kode <div class="post-footer-line> atau <post-footer-line-1">


<!-- Start of Related Posts with Thumbnails -->
<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>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
</b:if>
<!-- End of Related Posts with Thumbnails -->


Simpan template dan Lihat Hasilnya

Semoga Bermanfaat dan Jangan Lupa dibiasakan LIKE and SHARE ;)

0 komentar :

Posting Komentar