Cara Memasang Related Post Dengan Scroll Di Blog

Blogger Sukabumi - Postingan masih seputar blogging, postingan  hari ini saya kasih nama Cara Memasang Related Post Dengan Scroll Di Blog. Sobat pastinya sudah mengerti apa isi konten dari artikel ini,  kalau membahas tentang scroll kita sudah membayangkan button/tombol yang aktivitasnya turun-naik dan begitupun sebaliknya.

Kelebihan dari tombol jenis scroll ini yaitu dapat menampilkan artikel terkait setiap label tanpa batas dan kelebihan lainnya adalah tidak mengganggunya space/tempat pada halaman posting karena  menggunakan scrolling. Dan cara ini tentunya dapat memberikan kemudahan kepada visitor/pengunjung mengeksplore blog sobat.

Adapun caranya sobat bisa ikuti langkah-langkah di bawah ini :

• Masuk ke akun Blogger sobat 

• Sebelumnya sobat backup terlebih dahulu templatenya "unduh template lengkap" untuk mengindari kegagalan dalam penempatan kode scriptnya

• Setelah itu klik Template  >>  Edit HTML,

• Lalu sobat cari kode ]]></b:skin> gunakan Ctrl + F untuk mempermudah pencarian

• Copy kode css di bawah ini lalu paste/letakkan di atas ]]></b:skin>

/* Artikel Terkait */

.rbbox{border: 1px solid #D8D8D8;padding: 5px;

background-color: #E0F8E0;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: #EFFBEF;}

Note :
#E0F8E0   = kode warna kotak background Related Post (ganti sesuai selera sobat)
#EFFBEF  = kode warna kotak background 'hover' related post (ganti sesuai selera sobat)
         

• Selanjutnya sobat cari lagi kode <data:post.body/> atau <div class='post-body> setelah ketemu sobat copy script di bawah ini dan paste/letakan di bawah kode tadi

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<H4>Related Post:</H4>

<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 = 5;

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>

Note: Angka warna biru 50 menunjukkan jumlah artikel terkait dalam satu label dan sobat bisa menggantinya sesuai keinginan.

• Simpan Template, 

Setelah langkah diatas selesai sobat klik salah satu postingan untuk melihat hasilnya dan posisi related post berada di bawah postingan.

Semoga bermanfaat.
happy blogging.............