Cara Membuat Related Post atau Artikel Terkait Sederhana di Blogger

Cara Membuat Related Post atau Artikel Terkait Sederhana di Blogger - Related Post atau jika diterjemahkan dalam Bahasa Indonesia adalah Artikel Terkait, merupakan artikel-artikel yang masih memiliki hubungan dengan artikel yang sedang dibaca oleh pengunjung.

Bagi pengguna Blogger, fitur ini sudah tidak asing lagi. Related Post sengaja dipasang untuk memudahkan navigasi pengunjung yang ingin membaca artikel yang berhubungan dengan artikel yang sedang dibaca.

cara membuat related post artikel terkait di blog

Dengan semakin banyak jumlah artikel yang dibaca, akan meningkatkan page view blog tersebut. Banyaknya page view pada posting blog merupakan poin yang baik bagi blog tersebut di mata mesin pencari.

Membuat Related Post atau Artikel Terkait Sederhana di Blog

Nah, kali ini blog Dua Rupa akan berbagi tutorial membuat related post atau artikel terkait di bawah postingan blog. Artikel yang masuk dalam kategori terkait atau related atau artikel yang berhubungan adalah artikel-artikel dalam satu label atau kategori blog.

Simak caranya di bawah ini.

1. Pada dashboard Blogger, masuk ke Edit HTML Template. Caranya pilih Template, kemudian pilih Edit HTML.

cara membuat related post artikel terkait di blog

2. Pasang CSS untuk mengatur tampilan sederhana Related Post-nya.

Letakkan sebelum kode ]]></b:skin>

CSS
#related-post {
background:none;
width:100%;
margin:2px 0px;
}
.related-post h5 {
font-size:120%;
margin:0 0 5px;
padding:0;
font-weight:bold
}
.related-post li {
background:url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiawfK1U9rcLlRRWdfl_gN_9FIRNVUvpnuJhSlKA6cJiB3hCPG5ZJuPX4LkZY_5VJrUTIRe63R411R1u-u1WLVXzbrcXgjDsCAMs4sRYaJsSNfZKwCXjsFVsn2nYAPLtuLndUgr__P1t0lq/s1600/arrow_state_grey_right.png&quot;) no-repeat 58px 3px;
color:#2c3e50;
text-indent:0;
line-height:1.6em;
margin:0;
padding:0 0 3px 75px
}
.related-post .widget {
margin:0;
padding:0
}
.related-post ul {
list-style:none;
margin:0;
padding:0;
}

3. Berikutnya adalah memasang script yang akan memanggil Related Post.

Cari kode <data:post.body/> di dalam template. Saya menemukan beberapa  kode di template saya. Letakkan script di bawah kode yang pertama kalau tidak bisa cari kembali code <data:post.body/>  nya lagi kalau saya tepat nya di code yang ke 4

cara membuat related post artikel terkait di blog

Patokan lain adalah sebelum kode <div class='post-footer'> yang kurang lebih memiliki arti bagian bawah postingan.

Script
<!-- Related Post Widget Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='related-post' id='related-post'/>
<script type='text/javascript'>
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
&quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop></b:if>];
var relatedPostConfig = {
homePage: &quot;<data:blog.homepageUrl/>&quot;,
widgetTitle: &quot;&lt;h5&gt;Artikel Terkait:&lt;/h5&gt;&quot;,
numPosts: 5,
titleLength: &quot;auto&quot;,
containerId: &quot;related-post&quot;,
newTabLink: false,
widgetStyle: 1,
callBack: function() {}
};
</script>

<script style="text/javascript" src="https://cdn.rawgit.com/mowdot/mysitemap/master/relatedpost.js"></script>
</b:if>
<!-- Related Post Widget End -->

Berikut sedikit penjelasan mengenai teks berwarna merah.
Artikel Terkait merupakan title atau judul, bisa diganti dengan Related Post atau yang lain.
numPosts: 5, menunjukkan jumlah link artikel terkait yang akan ditampilkan sebanyak 5 buah.

4. Jika sudah, Save Template. Cek salah satu postingan blog Anda.

Sekian tutorial Membuat Related Post atau Artikel Terkait Sederhana di Blog. Jika tidak berhasil silahkan sampaikan di kotak komentar di bawah, ya. Nanti kami bantu sampai bisa. Cara ini sudah dicoba dan sukses seperti yang saya terapkan pula di blog ini.

Author : L

Terimakasih, telah membaca artikel mengenai Cara Membuat Related Post atau Artikel Terkait Sederhana di Blogger. Semoga artikel tersebut bermanfaat untuk Anda. Mohon untuk memberikan 1+ pada Google+, 1 Like pada Facebook, dan 1 Follow pada Twitter. Jika ada pertanyaan atau kritik dan saran silahkan tulis pada kotak komentar yang sudah disediakan.

Share Artikel

Facebook

Twitter

Google+