Cara Melampirkan Artikel Terkait dengan Scroll Bar

Translate

Cara Membuat Related Post (Artikel Terkait) + Scroll bar

Baiklah pada postingan kali ini saya akan share tentang bagaimana Cara Membuat Artikel Terkait (Related Post) dengan Scroll Bardalam postingan Blog atau tepatnya berada di bawah postingan blog. Seberapa penting sih memasang Artikel terkait di blog ? pastinya sangat penting !! dengan memasang Artikel Terkait di blog akan lebih memudahkan lagi bagi para visitor blog membaca dan melihat artikel-artikel yang berhubungan dengan artikel yang dibaca.
Dan jika dikreasikan dengan Sroll Bar akan lebih menghemat tempat di blog kita jika isi postingan sudah banyak.


Untuk cara memasangnya silahkan ikuti langkah-langkahnya berikut ini :
1. Login ke akun blogger anda
2. Selanjutnya edit HTML lalu centang Expand Template Widget dan jangan lupa download template untuk berjaga-jaga jika terjadi kesalahan.
3. Kemudian carilah kode berikut ini (gunakan ctrl+f untuk mempermudah pencarian)
     <data:post.body/>

 4. lihat pojok kanan atas kemudian letakkan/paste kode <data:post.body/>tekan enter, secara otomatis dalam kotak kolom kode <data:post.body/> yang dicari akan muncul sendiri dengan ditandai oleh warna penunjukan.
5.Selanjutnya, jika sudah letakkan kode di bawah ini tepat di bawah kode <data:post.body/> [ setiap template blog berbeda-beda, seperti template blog ini memiliki 2 <data:post.body/>] coba letakkan kode<data:post.body/>  setelah kode Y kedua. atau tepatnya diantara <data:post.body/> dan <div style='clear: both;'/> <!-- clear for photos floats -->

. Jangan takut salah dulu sob, coba tes satu-satu klo diletakkan di <data:post.body/> yang kedua ga bisa coba di <data:post.body/> yang selanjutnya.

Kode yang harus diletakan;

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='similiar'>
<div style='border: 0px solid rgb(204, 204, 204); padding: 5px; overflow: auto; width: 100%; height: 300px; background-color: #fcf7f7;'>
<div class='widget-content'>
<h3>Artikel Menarik Lainnya :</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
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>

NB:
- Untuk kode yang berwarna Biru silahkan sesuaikan dengan keinginan anda
- Untuk kode yang berwarna Ungu adalah warna background
- Lihat tulisan yang berwarna Merah, anda bisa merubahnya sesuka hati anda;

6. Simpan dan Lihat hasilnya

merchant