Cara Membuat Artikel Terkait Fungsi Scrolling

Cara Membuat Artikel Terkait Fungsi Scrolling. artikel terkatit atau yang biasa disebut related post merupakan hal yang harus di pakai bagi para blogger baik pemula maupun profesional. terlebih jika postingannya tidak mengandung internal link atau link yang menghubungkan satu posting ke posting yang lain. dengan related post ini, pengunjung dapat dengan mudah mencari artikel terkait atau yang kategorinya mirip dengan artikel yang sudah di baca. namun, dengan catatan posting kalian harus selalu di beri label, apabila tidak maka related post ini tidak akan ada. hasil dari related post ini bisa dilihat pada gambar di atas. untuk membuatnya silahkan ikuti tutorial di bawah ini   :
  • Login ke blogger dengan id anda
  • Pilih Rancangan
  • Pada tab menu, pilih Edit HTML
  • Jangan lupa Centang kotak kecil Expand Template Widget
  • Setelah itu cari kode berikut ini <p><data:post.body/></p>  Setelah ketemu masukkan script berikut ini dibawah kode tadi.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<H2>Related Post:</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 = 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>
Keterangan :
Ganti tulisan warna merah dengan yang lain seperti artikel terkain atau you must read it, sesuai keinginan sobat
  • Masih Belum selesai kawan, sekarang cari kode ]]></b:skin>
  • Setelah itu letakkan kode Css berikut di atas kode tadi : 
    • .rbbox{border: 1px solid #D8D8D8;padding: 5px;
    background-color: #E0F8E0;-moz-border-radius:5px; margin:5px;}
    .rbbox:hover{background-color: #EFFBEF;}
Sesuaikan warnanya dengan mesin warna 

  • kemudian simpan template
Dapatkan update artikel terbaru kami langsung ke email anda

1 Responses to "Cara Membuat Artikel Terkait Fungsi Scrolling"

netxz said...

Ijin coba gan
di tunggu follow baliknya

Post a Comment

pasang iklan murah