Membuat Related Post Atau Artikel Terkait Sederhana Di Blog

Cara Membuat Related Post atau Artikel Terkait Sederhana di Blogger - Related Post atau kalau diterjemahkan dalam Bahasa Indonesia yaitu Artikel Terkait, merupakan artikel-artikel yang masih mempunyai kekerabatan dengan artikel yang sedang dibaca oleh pengunjung.

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

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 akan membuatkan tutorial menciptakan related post atau artikel terkait di bawah postingan blog. Artikel yang masuk dalam kategori terkait atau related atau artikel yang bekerjasama yaitu 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, lalu pilih Edit HTML.

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

Letakkan sebelum isyarat ]]></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/AVvXsEjlJqPnGfTl9-FLeVnaJ4Vh75cVt2TZDyrBC1mPq-2RV4d1aSX-5P5KXSUs5CU1hkxCs-6h8R2LEzLZkJoxOi3eLQfeUaMycGGlQ6xsK3JiZgaMkl6w-PEynYtx0kfyqYmWx4hDep_1tG2A/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 yaitu memasang script yang akan memanggil Related Post.

Cari isyarat <data:post.body/> di dalam template. Saya menemukan 2 buah isyarat di template saya. Letakkan script di bawah isyarat yang pertama.

Patokan lain yaitu sebelum isyarat <div class='post-footer'> yang kurang lebih mempunyai arti bab 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 klarifikasi mengenai teks berwarna merah.

• Artikel Terkait merupakan title atau judul, dapat diganti dengan Related Post atau yang lain.
• numPosts: 5, mengatakan 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 hingga bisa. Cara ini sudah dicoba dan sukses menyerupai yang aku terapkan pula di blog ini.
Sumber https://duarupa.blogspot.com/

Related Posts