Membuat Related Post Atau Artikel Terkait Sederhana Di Blog

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

Bagi pengguna Blogger, fitur ini sudah tidak abnormal 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 menyebarkan tutorial menciptakan related post atau artikel terkait di bawah postingan blog. Artikel yang masuk dalam kategori terkait atau related atau artikel yang bekerjasama ialah 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 instruksi ]]></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/AVvXsEhmJIA4DsrvsXx7ADvaW5jYb1EYZdPrgZeZR-XwsD2Yt6QlgP12tGmyuM6GXHfRsYZ591YiuIoH491jXz7mY-_AGz6SUzlH0nv1xeQjfUqHoiNAnjGMDrwyh9pL9Ztbk3dg62Wq6L2ZHK0h/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 ialah memasang script yang akan memanggil Related Post.

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

Patokan lain ialah sebelum instruksi <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/j4vascript'>
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/j4vascript" 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, menawarkan 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 ibarat yang aku terapkan pula di blog ini.
Sumber http://duarupa.blogspot.com

Share this post