Cara Membuat Artikel Baca Juga Keren Dengan Scroll

Hallo bos kuh, berjumpa lagi dengan saya. Semoga bos kuh tidak bosan mendengarkan saya yang terus mengoceh tanpa henti. Tapi semoga saja ocehan saja memberi manfaat untuk bos kuh. Pada artikel kali saya akan membagikan tutorial cara membuat artikel baca juga dengan scroll bos kuh.

Artikel dengan scroll ini sangat-sangat di rekomendasikan untuk bos kuh, karena dapat menghemat kertas HVS. Eh, kan kita nulisnya di blog yaa, bukan di HVS.. hehe. Tapi dimanapun nuslisnya, efek ini dapat menghemat halaman, dan membuat tampilan blog kita menjadi lebih keren.

Untuk membuat related post dengan scroll silahkan bos kuh:
1. Masuk ke halaman dasbor bos kuh
2. Klik templete/tema, pilih Edit HTML
3. Cari kode ]]></b:skin> (gunakan CTRL+F untuk memudahkan pencarian)
4. Simpan kode di bawah ini sebelum kode ]]></b:skin> 

 /* Related Post */
.related_posts{margin-top:5px;padding:0 10px;border:1px solid #B7E8FF;background:#EEEEEE;}
.related_posts h4{color:#111;font:normal 19px/19px Arial, sans-serif;letter-spacing:-0.5px;padding:7px 0;border-bottom:solid 1px #fafafa;}
.related_posts a{color:#000;}
.related_posts ul{padding:0;}
.related_posts ul li{list-style:none;padding:4px 5px 4px 17px;border-bottom:1px solid #f9f9f9;line-height:18px;background: #EEEEEE;} 

5. Jika bos kuh sudah menyimpannya, cari kode <data:post.body/> (dalam satu templete terdapat 4-5 code tersebut, pilih yang kedua)
6. Kemudian pastekan script kode di bawah ini tepat setelah/dibawah <data:post.body/>

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='related_posts'>
<div class='widget-content'>
<h4>Baca Juga</h4>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<div id='data2007'/><br/><br/>
<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;data2007&#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>
</div>
</div>
</b:if> 

7. Simpan templete bos kuh, dan lihat tema.

Catatan :Jika kolom baca juga tidak muncul, silahkan bos kuh gantikan memasang kode yang tadinya dibawah <data:post.body/> yang kedua, menjadi yang ketiga.

Itulah tutorial singkat membuat artikel baca juga dengan scroll. Sampai berjumpa di lain waktu yaa bos kuh.Jangan lupa baca juga Cara Membuat Artikel baca juga sesuai yang kita inginkan.