Spiga

Membuat Releated Post atau Artikel Terkait

Dear My Lovely Friend’s,,,

Memang beberapa tutorial Blog sering dibahas hmpir ribuan BLOG, qu rasa bila qu tambahkan lagi bukanlah suatu beban yang berarti. Lagipula membagi sebuah ilmu itu adalah sebuah Ibadah katanya (katanya sapa yaaaa…????). Kali ini kalian akan qu ajarkan tentang cara membuat releated post atau biasa kita bilang posting terkait. Dalam sebuah BLOG widget satu ini adalah sangat penting. Karena selalin memudahkan para pengunjung atau pembaca BLOg kita bisa melihat sebagian dari artikel – artikel yang telah kita posting.


Cara membuatnya juga dibilang cukup mudah karena tidak diperlukan keahlian khusus dalam bidang CSS karena semuanya sudah ada dan tersedia. Kali ini qu ambilkan sebuah script code HTML yang harus kalian masukkan kedalam template kalian. Mari kita lakukan langkah berikut :



1. Login di Blogger.
2. Klik Layout >> Edit HTML.
3. Centang 'Expand Widget Template'.
4. Cari kode <p><data:post.body/></p>
5. Tambahkan kode di bawah ini tepat di bawah kode <p><data:post.body/></p> tadi.



<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>

Yang berwarna merah tersebut bisa kalian ganti dengan bahasa kalian sendiri, atau bahkan bisa sesuaikan dengan Tema dari BLOG kalian. Sedangkan yang berwarna hijau, kalian bisa mengganti berapa banyak yang ingin kalian tampilkan dalam sebuah Label dalam BLOG kalian.



6. Pada beberapa BLOG yang menggunakan system Read More dalam Blognya seperti yang telah qu ajarkan disini. Ada beberapa hal yang harus kalian perhatikan yaitu :
a. Pada code <p><data:post.body/></p> terdapat dua buah
b. Maka pilihlah yang paling atas atau yang pertama dan letakkan script tersebut tepat dibawahnya

7. Pada beberapa template beberapa master menyarankan agar memberikan code <br/><br/> sebelum code script tersebut agar terdapat jeda antara akhir halaman artikel dengan widget ini.

8. Simpan atau Save Template kalian.

Sudah cukup yang qu terankan disini buat kalian semua yang membutuhkan script ini dan kalian juga dapat melihatnya di semua BLOG qu bahwa script tersebut berjalan dengan sempurna. Jadi qu harap tidak akan terjadi kekacauan dalam memasukkan widget ini. Terima Kasih buat yang sudah mau membaca Tutorial singkat ini untuk masalah Releated Post atau Artikel terkait. Salam kenal buat Para Blogger dan Netter di Indonesia.



Best Regard


Natha Lia




Artikel Lainnya :




3 komentar:

  Kian Coi

18 Januari 2010 20.21

Wuih boleh juga tuh...kalo dilihat dari fungsinya emang bgs banget..asal g nambah berat si Blognya aja...

oya untuk tampilan blog kamu, gw rasa udah baik, namun belum maksimal untuk penggunaan sidebarnya..soalnya ada ruang yg cukup untuk meletakkan beberapa widget pada sidebar di sebalah kanan...

kalo yg lain, udah siip tuh... kl mau tau tutornya km bisa baca dsn.. Cara buat side bar dikiri dan kanan

  Natha Lia

19 Januari 2010 05.51

@ Kian Coi : setau qu script yang menempel pada template tidak akan membawa beban sedangkan script yang ada pada sidebar itulah yg akan membawa beban pada loading time sebuah BLOG....tq

  spirit lion

15 Juni 2011 07.27

tx gan..
langsung ke tkp..
salam kenal ya...
he
:>
follow me and u be follow...

Posting Komentar


Terima Kasih telah membaca Article Natha Lia semoga dapat bermanfaat.

Blog ini menganut sistem DO FOLLOW jadi komentar kalian tidak akan sia - sia. Komentar yang mengandung SPAM, SARA atau PORN akan dihapus.

Bila ada Pertanyaan lebih lanjut silahkan hubungi melalui :

atau