Home » » Cara Membuat Related Post / Posting Berhubungan

Cara Membuat Related Post / Posting Berhubungan

Banyak cara untuk membuat pengunjung blog betah atau jalan - jalan, nah salah satunya dengan menampilkan artikel yang berhubungan atau related Post, fungsi dari Related Articl atau related post adalah untuk membuat teks link-link yang berhubungan dengan halaman yang sedang dibaca misalnya admin menulis tentang cara membuat read more otomatis, cara membuat iklan float image dan membuat footer tiga kolom, semua itu admin menulis label yang sama misal tips - trik blog maka otomatis artikel yang berhubungan dengan tips - trik blog akan muncul ketika pengunjung membuka salah satu artikel berlabel tips - trik blog. Nah kali ini gimana sih carannya buat Artikel yang Berhubungan? kalo kamu minat dan pengen bikin, ayo baca artikel ini untuk metodenya dan trik berikut tips:

Berikut membuat artikel yang berhubungan :

1. Login ke blogger Blogger
2. Pilih menu Tataletak lalu pilih edit HTML
3. Setelah itu beri tanda centang pada kotak "Expand Widgets Template".
4.cari kode berikut dengan Ctrl+F masukkan <data:post.body/>
5 lalu paste kode dibawah ini, persis dibawah <data:post.body/>
catatan: kalo kamu sudah pasang readmore/bacaselengkapnya, maka taruh di bawah <data:post.body/>  yang pertama, bukan yang kedua




<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>

<div class='widget-content'>
<h3>Related Post</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;


function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;

if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {

var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}

var labelArray = new Array();
var numLabel = 0;

<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;

var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>

</div>
</b:if>


6 warna merah bisa kamu ganti sesuai selera
7 kalau sudah, SIMPAN TEMPLATE

Anda bisa mengganti tulisan 'Related Post' dengan kalimat lain misalnya 'posting terkait', 'artikel terkait', dll. Kalau di blog saya tulisannya 'Baca juga postingan di bawah ini'

Selamat mencoba.







Artikel Terkait:

9 komentar:

  1. bagus banget tutorialnya..... terimakasih dapet ilmu baru nihhh

    BalasHapus
  2. Thnks atas trik infonya...langsung saya coba...

    http://fullydownloadzer.blogspot.com/

    BalasHapus
  3. thanks tipx membanu bngt.
    klo bwt text yang mlayang tu gmn sih ksih tau donk......

    BalasHapus
  4. thank buat tips nya.....

    akan saya terapkan di blog saya

    blog saya maseh nol neh,,,,
    kunjungi balik yah

    BalasHapus
  5. ijin copas codenya sob....
    soalnya saya sudah coba code- code yang lain....tetapi tidak berhasil sob.....

    thankzzzz
    setan flores creativity

    BalasHapus
  6. saya coba dulu gan

    BalasHapus
  7. cara ke 6
    "warna merah bisa kamu ganti sesuai selera"

    yg mana gan???
    koq ane ga ngeliat? ato mata ane yg salah?
    pliss jwban nya ato di review ulang

    BalasHapus
  8. Ngak bisa gan...ngak tampil di blok aku... :(
    carax gimana???

    BalasHapus
  9. trus kalo mau dikasih textarea yg kayak diblog ini .... ??? gimana sob ???. thank's b4 ....

    BalasHapus

Fivers

Selamat Datang Di OKTRI BLOG

Selamat datang di Blog saya, semoga saja kalian bisa mendapatkan apa yang kalian butuhkan diblog saya ini. Terima kasih Telah Berkunjung Di Blog saya,apabila berkenan silahkan berkomentar dan follow blog saya,mari kita saling berbagi ilmu tentang apa saja...Selengkapnya tentang Tutorial Ini

Sekilas tentang penulis

Nama saya Oktri darmadi,saya seorang Mahasiswa S1 Teknik Informatika Di IBI DARMAJAYA Bandar Lampung.

Social Stuff

  • RSS
  • Twitter
  • Facebook
  • HOME
Oktri