RELATED POST/ARTIKEL TERKAIT DENGAN SCROLL

Cara Membuat Artikel Terkait Dengan Scroll

Salah satu cara menarik untuk memudahkan pengujung mambaca isi blog kita adalah dengan MEMBUAT ARTIKEL TERKAIT sobat.. karena hal ini kita tak perlu membuka daftar isi atau label

nbaiklah sobat.. kalu kalian ingin menjajal untuk membuat ini..sobat bisa ikuti TUTORIAL saya..oke. kalo mau liat ARTIKEL TERKAIT/RELATED POST itu seperti apa.. lihat di bawah postingan blog ini..oke deh..TKP langsung sobat..


cari kode:


<data:post.body/>

penting"kalo sobat sudah membuat "read more" pilih kode tersebut yang kedua..lebih jelasnya ,,ikuti intruksi ini."Gunakan Ctrl + F untuk mempermudah pencarian.
contoh:
<data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/>
<br/>
<H2>Artikel Terkait:</H2>

- Pertama Login ke akun blog Anda.
- Pilih Layout / Tata Letak / Rancangan.
- Klik tab Edit HTML.
- Kemudian klik Expand Template Widgets.
- Cari kode yang seperti ini :
- Jika Sobat sudah menggunakan fungsi Read More, maka terdapat 2 kode   <data:post.body/> lebih tepat di bawah tag </b:if>. Dan jika Sobat sudah menggunakan     Artikel Terkait, hapus saja kode artikel terkait yang lama.
  Nah sobat bisa Copy Paste kode di bawah ini setelah kode <data:post.body/></b:if> yang   pertama (jika sudah menggunakan Read More).

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

untuk "ARTIKEL TERKAIT" sobat bisa ganti dengan kata lain. 

Selanjutnya, masukkan kode ini di atas kode ]]></b:skin> .

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

Catatan:Ganti kode-kode yang berwarna dengan kode warna yang sobat mau. Jika tidak tahu kode warnanya, silakan ke artikel tabel dan kode warna html.
#D8D8D8: warna border
#E0F8E0: warna background
#EFFBEF: warna background juga, namun akan terlihat jika disorot dengan pointer

- Terakhir klik Simpan Template.

semoga bermanfaat sobat..