Cara membuat artikel terkait di akhir postingan blog dengan fungsi scroll box

Hai Sobat Blogger! kembali lagi nih dengan saya,hehehe,,kali ini rizaldi priantama akan berbagi info seputar blogging nih kawan,pada masih semangat nge-blog kan?harus semangat dong!!hehehe,nah kali ini topiknya dalah Cara membuat related post/artikel terkait dengan fungsi scroll box,yaitu membuat daftar artikel yang kita miliki yang akan ditampilkan ke dalam akhir bagian posting sesuai dengan label yang diterapkan,untuk lebih detail dan jelasnya lihat contoh gambar diatas,
Gimana sobat?tertarik untuk membuatnya?caranya cukup mudah lho,,tinggal pasang dan edit sedikit kodenya sehingga cocok untuk blog sobat :) , oke langsung aja ya,daripada banyak bicara,Mari kita bahas dan kupas tuntas bersama disini, ikuti langkah-langkah ini :

1.) Baca Basmallah
2.) Masuk ke akun Blogger anda
2.) Langsung menuju ke Dashboard > Template > Edit Html > Lanjutkan
3.) Centang tanda Expand template widget 
5.) Cari Kode berikut ]]></b:skin>
6.) Lalu setelah ketemu copy kode dibawah ini,lalu paste tepat diatas kode ]]></b:skin>

Kode

/* Kode CSS untuk Artikel Terkait */
#underpost{
font-family:Arial, Tahoma, Verdana, Sans-serif;
font-size:small;/* Ukuran font. */
color:#F13C3C;/* Warna teks. */
background:#ffffff;/* Warna latar belakang. */
clear:both;
float:left;
width:510px;/* Lebar area artikel terkait. Sesuaikan dengan lebar main-wrapper (kolom posting) */
-moz-border-radius:10px;
border:0;
height:auto;
margin:0 auto;
padding:10px;
}
#underpost h2{
font-family:'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif;/* Jenis font heading. */
font-size:large;/* Ukuran font heading. */
color:#F13C3C;/* Warna teks heading. */
margin-bottom:5px;
border-bottom:1px solid #F3D8D8;/* Warna garis pembatas dibawah teks heading. */
padding:0 0 5px;
}
#underpost a,#underpost a:link,#underpost a:active,#underpost a:visited{
color:#0B243B;/* Warna link */
text-decoration:none;
}
#underpost a:hover{
text-decoration:underline;
}
#artikel-terkait{
overflow:auto;
width:auto;
height:200px;/* Tinggi dari artikel terkait */
padding:10px;
}

6.) Setelah itu cari kode </data:post.body> , lalu letakkan kode dibawah ini tepat diatas kode </data:post.body>

Kode

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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 = 9999;
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>

7.) Lakukan pengeditan sendiri jika perlu
8.) Simpan Template dan lihat hasilnya

Ditulis Oleh : Fajar RiyanBuang Bebas

Artikel Cara membuat artikel terkait di akhir postingan blog dengan fungsi scroll box Terimakasih atas kunjungan Sobat Semua, Yg Tlah Sudi Membaca Artikel Saya. Kritik Dan Saran Anda Sangat Berharga Untuk Saya. MAAF TIDAK MENERIMA KOMEN SPAM DALAM BENTUK APAPUN...!