Membuat Related Post Tanpa Thumbnail

Oleh Unknown

Sunday, April 12, 2015

Apa itu Related Post?

Related post atau kalau diterjemahkan ke dalam bahasa Indonesia berarti "Artikel Terkait" adalah teknik untuk menampilkan daftar tulisan-tulisan lain yang berhubungan, serupa, atau dalam topik yang sama dengan tulisan yang sedang dibaca. Misalnya : Seseorang mengunjungi blog dengan judul artikel "cara mengobati sakit kepala". Jika blog tersebut menerapkan teknik related post maka nanti akan muncul juga daftar semua tulisan-tulisan dalam blog tersebut yang berkaitan dengan sakit kepala.

Mengapa Perlu Related Post?

Alasan mengapa perlu menerapkan teknik related post ini adalah agar pengunjung juga mendapat informasi tambahan tentang artikel yang sedang dia baca. Mungkin pengunjung merasa kurang puas sehingga dia butuh sumber informasi tambahan.

Cara Membuat Related Post Tanpa Thumbnail

Sebagaimana judul artikel di atas, Tutorial ini hanya akan membahas cara memasang related post tanpa thumbnail di blogspot. Karena memang ada related post yang tidak hanya menampilkan daftar judul terkait tapi juga dilengkapi dengan icon judul tersebut.

Oke, langsung simak dan ikuti langkah-langkah berikut :


1. Login ke blogger

2. Pilih Template => Edit HTML

3. Cari kode </head> di kotak script Edit HTML

4. Kalau sudah ketemu, letakan kode berikut tepat di atas kode </head>

<!--Related Posts sinahu-coding.blogspot.com Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
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: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://my-project-favicon.googlecode.com/files/relatedposts.js.txt' type='text/javascript'/>
</b:if>
<!--Related Posts sinahu-coding.blogspot.com Styles End-->

5. Masih di Edit Template, cari kode <data:post.body/>. Kalau ditemukan lebih dari satu maka pilih saja kode yang ke 2 (Biasanya ada 3 untuk template yang sudah pasang read more). Kemudian letakkan kode berikut di bawah kode <data:post.body/> yang ke 2 tadi.

<!--Related Posts sinahu-coding.blogspot.com Styles 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>
<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_thumbs&amp;max-results=12&quot;' type='text/javascript'/></b:if></b:loop>
<h3><b>Related Posts</b></h3>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=10;
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://sinahu-coding.blogspot.com/' style='display:none;'></a>
</b:if>
</b:if>
<!--Related Posts sinahu-coding.blogspot.com Styles End-->

Keterangan :

Kode berwarna biru bisa kamu ganti dengan kata lain.

Kode berwarna Merah berarti banyaknya artikel terkait yang akan di tampilkan di blog, bisa kamu modifikasi sesuai keinginan.

Kode yang berwarna ungu silahkan diganti dengan alamat URL blog kamu.

6. Save Template

Silahkan buka alamat blog untuk melihat hasilnya. Gimana? cukup mudah kan?. Jika ada yang kurang jelas bisa kita diskusikan di kolom komentar.

---