Home » » Cara Membuat Scroll Pada Related Post

Cara Membuat Scroll Pada Related Post

Awalnya alasan membuat scroll pada artikel terkait/ related post diblog ini karena pada postingan saya Cara Membuat Related Post / Posting ,kurang efisien atau kurang rapih untuk dilihat ,
Nah seperti biasa kalau dah nemukan ilmu ngeblog Saya buat postingannya, tentu setelah www.oktri.co.cc berhasil mempraktekinnya sendiri diblog ini atau blog oktri lainnya tempat nguji coba.
Jadi panjang ceritanya? Berikut membuat scroll pada artikel terkait/ related post 

 





1. Loggin ke blogger=> Klik layout=> Edit HTML=> Klik Expand Template Widget=> Cari kode 

<data:post.body/>

Kalau sudah ketemu, copi dan pastekan script/ code berikut dibawah kode tadi


<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>

2. Selanjutnya cari kode ]]></b:skin>
3. JIka sudah ketemu copy dan pastekan code berikut diatas code tadi.


.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);}

4. Simpan template

Selesai, sobat telah membuat scroll pada artikel terkait/ related post pada blog sobat, lihat hasilnya! Semoga membantu.




Artikel Terkait:

14 komentar:

  1. thanks neh saya coba yak....

    BalasHapus
  2. di blog ku kok ga ada code

    BalasHapus
  3. tri cara rubah backron ini gmn? kan pas dilewati putih tuh pengen di rubah gmn?

    BalasHapus
  4. /* Related post oktri
    ----------------------------------- */
    .rbbox{border: 1px solid #0c0d0c;
    padding: 5px;
    background:#0d0d0d;
    -moz-border-radius:5px;
    margin:5px;}
    .rbbox:hover{background-color: #0c0e0c;}

    nie script asli blog saya , coba mas ganti pada kode hover : #0c0e0c ganti sesuai dgn warna yg diinginkan

    BalasHapus
  5. blog yang menarik....nice info kawan..:)

    BalasHapus
  6. Good info gan,,
    Aq banyak belajar dari blog ini, bwat mempercantik blogku..
    thanks..
    salam kenal..

    BalasHapus
  7. thx sob, tapi q msh binung krna msh blm jg bisa tampil tuh scrol di entri

    BalasHapus
  8. Mas, aku nyoba kok gagal, ya T_T
    Mohon bantuannya, donk :)

    BalasHapus

Fivers

Selamat Datang Di OKTRI BLOG

Selamat datang di Blog saya, semoga saja kalian bisa mendapatkan apa yang kalian butuhkan diblog saya ini. Terima kasih Telah Berkunjung Di Blog saya,apabila berkenan silahkan berkomentar dan follow blog saya,mari kita saling berbagi ilmu tentang apa saja...Selengkapnya tentang Tutorial Ini

Sekilas tentang penulis

Nama saya Oktri darmadi,saya seorang Mahasiswa S1 Teknik Informatika Di IBI DARMAJAYA Bandar Lampung.

Social Stuff

  • RSS
  • Twitter
  • Facebook
  • HOME
Oktri