Kamis, 01 Desember 2011

Cara Membuat Related Post (Post yang Berkaitan) dengan Scroll

Cara Membuat Related Post (Post yang Berkaitan) dengan Scroll
Cara Membuat Related Post (Post yang Berkaitan) dengan Scroll
Yuk, langsung ke tutorial cara pembuatnnya saja,
  • Masuk ke blogger
  • Buka design/Rancangan
  • Pilih Edit HTML
  • Centang pada "Expang Widget Template"
  • Lalu cari kode <p><data:post.body/></p> atau <data:post.body/> (gunakan Ctrl + F)
  • Setelah ketemu, masukkan kode berikut di bawah kode <p><data:post.body/></p> atau <data:post.body/> 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>
  • Tulisan Related Post: bisa Sobat ganti dengan tulisan Sobat sendiri, misal "post teerkait", "post yang sama" dan sebagainya.  
  • height:200px adalah tinggi kotaknya, Sobat bisa Ganti kode 200px
  • Lalu cari kode ]]></b:skin>
  • Dan letakkan kode berikut di atasnya
 Cara Membuat Related Post (Post yang Berkaitan) dengan Scroll
/*-- Related Post dengan Scroll Ka Damar--*/
.rbbox{border: 1px solid #D8D8D8;padding: 5px;
background-color: #E0F8E0;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: #EFFBEF;}
Note :
    •  background-color: #E0F8E0; kode  #E0F8E0 adalah kode warna bacgkround kotak related post. Sobat bisa ganti kodenya ( Baca : Stock kode Warna )
    • .rbbox:hover{background-color: #EFFBEF;} kode  #EFFBEF adalah kode warna bacgkround kotak related post pada saat disorot dengan mouse (hover). Sobat bisa ganti kodenya ( Baca : Stock kode Warna )

 baca juga : Cara Membuat Related / Recent Post Thumbnails di Bawah Postingan Blog Dengan Mudah  , Cara Membuat Related / Recent Post Thumbnails Bergerak di Bawah Postingan Blog  , Cara Membuat Related / Recent Post dengan Widget (HTML/javascript)
    di