Beranda · Computer · Internet · Tips Trik
» » Cara Membuat Related Post dengan Scroll

Cara Membuat Related Post dengan Scroll

Cara membuat Related post dengan thumnail. Ada banyak macam related post. Salah satu yang terpopuler adalah related post dengan fungsi scroll. Cara Membuat Related post di sidebar banyak macam-macamnya, contoh dari related post dengan fungsi scroll seperti ini,

 
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> (gunakan Ctrl + F)
  • Setelah ketemu, masukkan kode berikut di bawah kode <p><data:post.body/></p> 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
/*-- 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  #EFFBEFadalah kode warna bacgkround kotak related post pada saat disorot dengan mouse (hover). Sobat bisa ganti kodenya ( Baca : Stock kode Warna )
 

Artikel keren lainnya:

Belum ada tanggapan untuk "Cara Membuat Related Post dengan Scroll"

Post a Comment