Menyisipkan Artikel Terkait – Artikel kali ini kita akan membahas tentang Cara Menyisipkan Artikel Terkait Dibawah Artikel Dengan Scroll Barr Di Blog. Jika kita sedang membaca suatu artikel dib log, terkadang kita akan melihat kata-kata seperti “ARTIKEL TERKAIT”. Sebenarnya apa maksud dari Artikel terkait tersebut? Dan mengapa kita mesti menyisipkan sebuah Scripts Artikel Terkait pada akhir sebuah postingan kita?.
ARTIKEL TERKAIT adalah sejumlah artikel yang kita buat dalam sebuah Tema dan Ide yang sama dan dikelompokkan dalam satu kelompok tertentu. Pengelompokkan artikel tersebut biasanya kita buat dalam suatu judul yang berbeda, namun mash dalam satu NAMA LABEL yang sama. Nah, judul-judul artikel yang mempunyai Nama Label yang sama ini yang akan muncul dalam pembuatan ARTIKEL TERKAIT kita nanti.
Maksud dari pembuatan script ARTIKEL TERKAIT adalah, untuk mudahkan pembaca artikel diblog dalam mencari Tema dan Ide yang sama, sehingga pembaca dimudahkan mencari kelanjutan dari artikel tersebut.
Jika tertarik dengan ARTIKEL TERKAIT kali ini, lakukan langkah-langkah untuk menampilkan judul artikel yang terkait :
1. Login ke Blogger
2. Lalu pilih Tata Letak-->Edit HTML
3. Selanjutnya Expand Widgets Template
4. Cari kode berikut ini
<data:post.body/>
*) untuk blog yang ada "read more" nya akan ditemui 2 kode <data:post.body/>, pilihlah kode yang pertama
<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>
<div class='widget-content'>
<h3>ARTKEL TERKAIT</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement('ul');
var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i < maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
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 < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k<20; k++) label = label.replace("%20", " ");
var txt = document.createTextNode(label);
var h = document.createElement('b');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('data2007').appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement('script');
script.setAttribute('src', query + 'feeds/posts/default/-/'
+ label +
'?alt=json-in-script&callback=listEntries10');
script.setAttribute('type', 'text/javascript');
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 = "<data:label.name/>";
var test = 0;
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel < maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
</div>
</b:if>
6. Setelah itu, Save Template kita dan lihat hasilnya.
Bagaimana jika judul dari ARTIKEL TERKAIT yang kita buat berdasarkan label tersebut mempunyai jumlah Puluhan atau mungkin berjumlah Ratusan???
Wah, bisa panjang dengan deretan judul artikel tuh jadinya.
Untuk mengatasi hal tersebut, kita akan tambahkan Bar Scroll Script, sehingga judul postingan dalam satu ARTIKEL TERKAIT tersebut terlihat lebih rapih namun pembaca dapat melihat keseluruhan artikel yang masih dalam satu Tema dan Ide.
Lakukakan langkah-langkah dibawah ini :
1. Login ke Blogger
2. Lalu pilih Tata Letak-->Edit HTML
3. Selanjutnya Expand Widgets Template
4. Cari Script yang kita copykan diatas tadi (untuk mempermudah pencarian, tekan tombol fungsi F3). 5. Jika sudah ketemu, taruh script berikut berikut ini :
<div style="overflow:auto;width:auto;height:200px;border:1px solid #ccc; padding:10px; margin:0 auto;background:#fff;">
diantara script
<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>
DAN….
<div class='widget-content'>
<h3>ARTKEL TERKAIT</h3>
Sehingga, script yang kita tambahkan akan terlihat seperti dibawah ini :
<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>
<div style="overflow:auto;width:auto;height:200px;border:1px solid #ccc; padding:10px; margin:0 auto;background:#fff;">
<div class='widget-content'>
<h3>ARTKEL TERKAIT</h3>
6. Setelah itu, Save Template kita dan lihat hasilnya
0 komentar:
Posting Komentar