Mudah Membuat Artikel Terkait dan Sroll Bar

Blog Tutorial - Baiklah pada postingan kali ini saya akan share tentang bagaimana Cara Membuat ArtikelTerkait (Related Post) dengan Scroll Bar dalam 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 :

Ø     Login ke akun blog

Ø     Selanjutnya edit HTML lalu centang Expand Template Widget dan jangan lupa download template untuk berjaga-jaga jika terjadi kesalahan.

Ø     Kemudian carilah kode berikut ini (gunakan ctrl+f untuk mempermudah pencarian)

<data:post.body/>

Ø     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 setelah kode yg pertama 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. Langsung ja Ne Coding na.....

<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: 200px; background-color: #fcf7f7;'>

<div class='widget-content'>

<h3>Artikel Terkait 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 merah silahkan sesuaikan dengan keinginan

      - Untuk kode yang berwarna hijau adalah warna background 

Ø  Simpan dan Lihat hasilnya

Jika menurut agan-agan artikel ini bermanfaat silahkan di share atau LIKE and Commentnya supaya lebih banyak lagi yang mendapat manfaat dari artikel ini.    

 

= Baca Juga Sob =