Cara Membuat Related Post JSON

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Cara Membuat Related Post JSON

  Tahukah anda apakah Related Post (Artikel Terkait) itu ? Jika anda belum tahu, saya jelaskan. Related Post adalah suatu Elemen yang berguna untuk menampilkan postingan yang terkait dengan artikel yang sedang kita baca, karena itu Related Post adalah sebuah elemen penting dalam dunia blogger. 

  Namun Related Post yang saya posting kali ini berbeda, kali ini adalah Related Post JSON ( dibaca Jason ) adalah sebuah format ringkas pertukaran data komputer, jadi ringan untuk blog anda alias tidak membuat lambat dan berat. Cara membuatnya mudah, ikuti langkah berikut ini

• 1. Login ke Blogger
• 2. Pilih Menu Template
• 3. Edit HTML
• 4. Cari kode ]]></b:skin>, lalu sisipkan CSS berikut diatasnya

.rbbox_blitarian4rt{border: 1px solid #000000;padding: 5px;

background-color: #F2F2F2;-moz-border-radius:5px; margin:5px;}

.rbbox_blitarian4rt:hover{background-color: #EFFBEF;}

.rbbox_blitarian4rt ul li {

display : block;

background : url(http://i1237.photobucket.com/albums/ff469/indolaron/icon/007.png) no-repeat 0px 0;

margin-left : -10px;padding-top : 0;padding-right : 0px;padding-bottom : 1px;padding-left : 20px;margin-bottom : 5px; line-height : 1em; border-bottom:1px dotted #cccccc;}

• 5. Kemudian cari kode <data:post.body/>, jika anda menemukan 2 kode tersebut, sisipkan  kode dibawah ini dibawah kode <data:post.body/> yang kedua

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<p style='font-style:bold;'>ARTIKEL TERKAIT:</p>

<div class='rbbox_blitarian4rt'>

<div style='margin:0; padding:10px;height:150px;overflow:auto;border:1px solid #ccc;'>

<div id='albri'/>

<script type='text/javascript'>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;

var maxNumberOfPostsPerLabel = 4;

var maxNumberOfLabels = 15;

maxNumberOfPostsPerLabel = 50;

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;albri&#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>

<script type='text/javascript'>RelPost();</script>

</div>

</b:if>

•  6. Simpan Template

Note : Anda dapat mengubah kode warna pada background-color: #F2F2F2 dengan kode warna yang anda inginkan untuk kotak related post |  background-color: #EFFBEF untuk warna background ketika disorot kursor.
           Anda juga dapat mengubah angka pada maxNumberOfPostsPerLabel = 50 untuk mengatur jumlah artikel terkait yang akan ditampilkan | dan angka pada maxNumberOfLabels = 3 untuk mengatur jumlah artikel terkait yang ingin ditampilkan

 Semoga artikel diatas dapat membantu untuk mengoptimasi blog anda. Terima Kasih, Salam Blogger !

ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Judul :Cara Membuat Related Post JSON
Dipublikasikan oleh:Unknown
Dipublikasian pada :2013-05-26T14:53:00+07:00
Rating : 4.9
Direview oleh : 3765 Orang
Terima Kasih sudah mau membaca artikel saya yang berjudul Cara Membuat Related Post JSON. Copy Paste tidak dilarang kok ! Asal mencantumkan link sumbernya ^_^, sudah 3 Blog saya laporkan dan terhapus lho gara-gara copy paste lho, jadi mohon hati-hati ya.....

Suka Dengan Artikel ini ? Klik tombol dibawah ini, terutama yang Plus One ya !