Membuat Artikel Terkait dengan Scroll

Membuat Artikel Terkait dengan Scroll - Artikel terkait dengan scroll ini berbeda dengan Artikel Terkait yang sebelumnya telah saya posting. Artikel Terkait ini menambah fungsi scroll yang dapat menerbitkan banyak Posting yang terkait dalam Label tanpa batas, jadi dapat menghemat tempat dan memudahkan jga bagi si pembaca Artikel untuk melihat Artikel yang lainnya (Terkait dalam satu Label atau Kategori).

Langsung aja ke Tkp Sob :

• Seperti biasa Login dulu ke blogger Sobat.
• Masuk ke menu Rancangan - Edit HTML.(disarankan Download template lengkap dulu untuk mencegah jika terjadi beberapa kesalahan)
• Klik Expand Template Widget.
• Cari kode seperti ini <data:post.body/>.(Gunakan CTRL+F untuk mempermudah pencarian)
• Copas Kode/Script ini tepat dibawah kode <data:post.body/>.Baca >> Biasanya ada beberapa kode yang sama jika sudah memasang fitur ReadMore pada blog. Jika kode nya ada 2 maka letakkan dibawah kode yang pertama, Jika kode nya ada 4 maka letakkan dibawah kode yang ke ketiga.

Copy-Paste Script disini !!!

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/>
<br/>
<H2>Artikel Terkait(cuba-tuleh.blogspot.com):</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 (cuba-tuleh.blogspot.com)" bisa sobat ganti dengan kata lain seperti, Baca juga, Artikel lainnya, Dll.

• Selanjutnya cari kode ]]></b:skin> . Dan copas kode dibawah ini tepat diatas kode tersebut.

Copy-Paste Script disini !!!

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

Baca >> Keterangan kode warna.
              #D8D8D8  : warna border.
              #E0F8E0   : warna background.
              #EFFBEF  : warna background juga, namun akan terlihat jika disorot dengan pointer.

• Dan terakhir Simpan Template dan Lihat Hasilnya.

Sekian...Semoga bermanfaat !!!

-JANGAN LUPA LIKE DAN FOLLOW BLOG KAMI...TERIMA KASIH- Link Download Mediafire Bermasalah ??,,Cara Download di Mediafire melalui adf.ly Klik Disini . -Ingin mengganti domain Dot Com ??,,GRATIS KLIK DISINI-

Baca Juga Artikel Menarik Lainnya:

Categories: Blogger