Celoteh Sang Galang

Blog Tempat Berbagi Tips dan Trik Dunia Blogger
English French German Spain Italian Dutch Russian Brazil Japanese Korean Arabic Chinese Simplified
Celoteh Sang Galang
Hanya Sebuah Catatan...

Membuat Artikel Terkait Dengan Scroll

Posted by Galang 15 Mei 2011
Daftar Sekarang Bonus $10 langsung dari PROFITCLICKING

Tutorial kali ini saya akan membahas tentang Scroll Related Post for Blogger atau dengan kata lain Artikel Terkait dengan fungsi scroll. Sebelumnya saya juga memposting artikel  Cara Membuat Artikel Terkait Dengan Thumbnails dan Membuat Artikel Terkait Thumbnails Disertai Marquee(Bergerak). OK kalau begitu kita langsung saja menuju ke TKP
  1. Masuk ke akun blogger anda
  2. Klik rancangan, kemudian Edit HTML
  3. Pada Edit HTML, centang Expand Template Widget
    Expand Template Widget
  4. Copy kode di bawah ini
<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>
  1. Kemudian paste setelah kode ini
  2. <data:post.body/>
    Catatan :
    Jika anda memakai Readmore, pasti ada 2 kode. Saya sarankan agar anda meletakkan setelah kode yang ke 2.
  3. Kemudian copy CSS di bawah ini
  4. .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); }
  5.  Dan paste di atas kode
  6. </b:skin>
  7. Simpan template
Sekian Terima Kasih

GET UPDATE ARTIKEL MENARIK CELOTEH GALANG
Dapatkan kiriman artikel terbaru langsung ke email anda!

Artikel Terkait:

  1. Abangjo Says:
  2. tanks tutornya bro...sip!!!

    Makalah Kita Semua
    http://makalahkitasemua.blogspot.com/2011/08/khasiat-sayur-buah-oyong-kisikgendulo.html

     
  3. hmmm...gmna cra mnggnti wrnanya...

     
  4. Galang Says:
  5. @Hendry Ramadhani:maksudnya ganti warna apanya...

     
  6. ZakiyVader Says:
  7. nice infonya gan :D

    http://separateseye.blogspot.com

     

Posting Komentar


close