Cara Membuat Artikel Terkait Dengan Kolom Scroll Down di Bawah Postingan Blogspot (part 1)

Viyan Pradita Kamis, September 02, 2010

Cara Membuat Artikel Terkait Dengan Kolom Scroll Down di Bawah Postingan Blogspot, Pastinya temen-temen semua sudah pada tahu kan apa itu artikel terkait. Fungsi dari Artikel Terkait ini yaitu untuk memudahkan pengunjung melihat artikel lainnya yang sudah kita posting sebelumnya, hal ini juga akan membuat postingan kita yang sudah lama bisa terlihat, nah, lagi-lagi memudahkan para pengunjung blog biar lebih enak dan nyaman di blog kita. dan pastinya membuat para pengunjung tidak perlu repot-repot mencari sana sini untuk artikel lainnya.

Untuk menghemat tempat, kita juga bisa menambahkan script scroll down, biar lebih ringkas dan menghemat tempat tentunya.

Lihat Gambar

Okeh.. ikuti langkah-langkah berikut :

1. Login ke Blogger
2. klik Tata Letak dan pilih Edit HTML
3. Kalau sudah, klik Expand Template Widget
4. Lalu cari kode berikut (Ctrl + F) :

<p><data:post.body/></p> atau <data:post.body/>

5. Kalau sudah ketemu maka copy paste-kan kode dibawah ini persis setelah kode
<data:post.body/> , dan bila sobat sudah membuat readmore sebelumnya pasti akan ada 2(dua) kode seperti ini <data:post.body/> , pilih saja kode yang pertama.

<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 Terkait Lainnya Seputar:</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>

6. Bila sudah klik Simpan, dan lihat hasilnya.


Silahkan dicoba, semoga berhasil.

Ditulis Oleh :

Artikel Cara Membuat Artikel Terkait Dengan Kolom Scroll Down di Bawah Postingan Blogspot (part 1) ini dipublish pada hari: Kamis, September 02, 2010. Semoga artikel ini bermanfaat untuk Anda. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

2 komentar
Terjun Ke Kolom Komentar

Catatan:
Link hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS DI SINI...</i>


web design blogs Bloggers - Meet Millions of Bloggers