Cara membuat artikel terkait di blogspot Cara membuat artikel terkait di blogspot - KaliKuning Cara membuat artikel terkait di blogspot | KaliKuning

Jumat, 11 November 2011

Cara membuat artikel terkait di blogspot

Artikel Terkait atau Related Post adalah posting atau artikel yang berhubungan dengan artikel lainnya, berdasarkan atas kesamaan nama kategori atau label postingan. Tetapi artikel tersebut tidak selalu sama topiknya, bisa juga membahas tentang hal lain, tetapi masih mempunyai relevansi dengan tujuan artikel tersebut.

Kali ini KaliKuning akan membahas tentang Cara Membuat Artikel Terkait atau Related Post with Scroll, yaitu related post yang ditampilkan dalam bentuk menu scroll. Untuk lebih jelasnya, silahkan ikuti langkah-langkah berikut ini :

1. Login ke akun Blogger anda.
2. Klik Rancangan, kemudian pilih Edit HTML.
3. Centang Expand Template Widget (saya anjurkan download dahulu template anda).
4. Cari kode seperti ini: <data:post.body/>

 * Jika sobat sudah memasang script Read More, maka akan terdapat 2 kode <data:post.body/>. Maka kita
pasang script Artikel Terkait atau Related Post di bawah <data:post.body/> yang ke 2 (lebih tepatnya  di bawah  tag </b:if>).
* Gunakan tombol kombinasi ctrl+f untuk lebih cepat mencari kode tersebut.

5. Jika sudah ketemu, maka copy paste-kan kode di bawah ini persis berada dibawahnya :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/>
<br/>
<H2>Artikel Terkait:</H2>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:200px;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 = 10;
maxNumberOfPostsPerLabel = 10;
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>

* Artikel Terkait : bisa anda ganti dengan related post, artikel berhubungan dll.

6. Setelah itu cari kode ini : ]]></b:skin>
7. Copy kode di bawah ini dan paste diatasnya.

  .rbbox{border: 1px solid rgb(192, 192, 192);padding: 5px;
   background-color: #f0f0f0;-moz-border-radius:5px; margin:5px;}
  .rbbox:hover{background-color: rgb(255, 255, 255);}

8. Klik Simpan Template

selamat mencoba..good luck

0 komentar:

Posting Komentar

Cara membuat artikel terkait di blogspot - KaliKuning