Cara Membuat Related Post Terbaru di Blogspot - Dibacaonline

Cara Membuat Related Post Terbaru di Blogspot

Cara Membuat Related Post Terbaru di Blogspot


Cara Membuat Related Post Terbaru di Blogspot

Related post adalah sekumpulan link atau postingan yang terkait satu sama lain. Namanya saja Related post kalau di terjemahkan dalam bahasa Indonesia adalah Post Terkait. Berikut tutorial membuat related post yang simple dan tidak ribet:



1. Login ke blogger.com
2. Klik template dan edit html seperti gambar di bawah berikut

Cara Membuat Related Post Terbaru di Blogspot




3. Setelah masuk edit html temukan kode berikut gunakan ctrl+f untuk mencari:
</head>
 Copy kode berikut di atas </head>

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts a:hover{background: #EEEEEE;}
#related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:2px solid #f2f2f2;width:160px;height:100px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;-webkit-border-radius: 5px;  -moz-border-radius: 5px; border-radius: 5px; }
#related-title {color:#666;text-align:center;padding: 0px 5px 10px;font-size:12px;width:160px; height: 40px;}
#related-posts .related_img:hover{border:2px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script src='http://helplogger.googlecode.com/svn/trunk/relatedposts.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End--> 

Keterangan:
#Yang diberi warna merah bisa diubah sesuai dengan ukuran yang diinginkan.
#Yang diberi warna hijau merupakan text yang bisa diubah sesuai ukuran yang Anda inginkan.

lihat gambar dibawah berikut:

Cara Membuat Related Post Terbaru di Blogspot





4. Temukan kode <b:includable id='postQuickEdit' var='post'>  lalu copy kode berikut tepat diatas kode </b:includable> :

<!-- Related Posts with Thumbnails Code Start-->
<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'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=6;
var relatedpoststitle=&quot;<b>InFo Terkait:</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
#Yang diberi warna merah merupakan jumlah post yang akan ditampilkan sesuaikan dengan jumlah yang Anda inginkan.
#Text yang diberi warna ungu bisa dirubah sesuai dengan keinginan Anda sebagai judul related post.

lihat gambar berikut:

Cara Membuat Related Post Terbaru di Blogspot




5. Selesai

*Reference from: helplogger.blogspot.com

Baca Juga : Cara Mendapatkan Backlink Dofollow gratis di codepen



3 comments

This comment has been removed by the author.

mantap gan bisa tapi saya kurang cocok dengan tampilanya.

Balas

ok sip

Balas