Sudah baca Tutorial Cara Membuat Artikel Terkait / Related Post? Jika belum "monggo" dibaca.,.
Seperti penjelasan sebelumnya Artikel terkait / related post dibutuhkan dalam suatu blog, dengan menggunakan related post memudahkan para pengunjung untuk melihat posting atau artikel lain yang berkaitan dengan artikel yang sedang dibaca, dalam hal ini artikel yang berkaitan sesuai dengan label atau kategori.
Itu penjelasan yang kemarin, dan sekarang ditambahkan fungsi scroll. Apa itu fungsi scroll? tidak usah dijabarkan kayaknya Sobat semua sudah tahu.., hehe...,
Yap.., dengan menambahkan fungsi scroll pada artikel terkait, posting-posting yang saling berkaitan dapat ditampilkan seluruhnya dan jika sudah terlampau banyak, link posting akan ditampilkan dengan scroll sehingga menghemat tempat..,
Sebelum ngutak-ngutik, biasakan untuk membackup template Sobat...,
Tutorial Cara Membuat Artikel Terkait Dengan Fungsi Scroll
Sekian Tutorial Cara Membuat Artikel Terkait Dengan Fungsi Scroll.
Semoga Bermanfaat.......,
by ooG_4u
Seperti penjelasan sebelumnya Artikel terkait / related post dibutuhkan dalam suatu blog, dengan menggunakan related post memudahkan para pengunjung untuk melihat posting atau artikel lain yang berkaitan dengan artikel yang sedang dibaca, dalam hal ini artikel yang berkaitan sesuai dengan label atau kategori.
Itu penjelasan yang kemarin, dan sekarang ditambahkan fungsi scroll. Apa itu fungsi scroll? tidak usah dijabarkan kayaknya Sobat semua sudah tahu.., hehe...,
Yap.., dengan menambahkan fungsi scroll pada artikel terkait, posting-posting yang saling berkaitan dapat ditampilkan seluruhnya dan jika sudah terlampau banyak, link posting akan ditampilkan dengan scroll sehingga menghemat tempat..,
Sebelum ngutak-ngutik, biasakan untuk membackup template Sobat...,
Tutorial Cara Membuat Artikel Terkait Dengan Fungsi Scroll
- 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/>. Dan jika Sobat sudah menggunakan Artikel Terkait, hapus saja kode artikel terkait yang lama.
- Copy Paste kode di bawah ini setelah kode <data:post.body/> yang pertama (jika sudah menggunakan Read More).
- Untuk kata Artikel Terkait, Sobat bisa menggantinya dengan kata yang lain.
- Selanjutnya, masukkan kode ini di atas kode ]]></b:skin> ..rbbox{border: 1px solid rgb(192, 192, 192);padding: 5px;
background-color: #f0f0f0;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: rgb(255, 255, 255);} - Terakhir klik Simpan Template.
<data:post.body/>
Gunakan Ctrl + F untuk mempermudah pencarian.
<b:if cond='data:blog.pageType == "item"'>
<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 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 9999;
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('albri').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>
<script type="text/javascript">RelPost();</script>
</div>
</b:if>
<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 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 9999;
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('albri').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>
<script type="text/javascript">RelPost();</script>
</div>
</b:if>
Sekian Tutorial Cara Membuat Artikel Terkait Dengan Fungsi Scroll.
Semoga Bermanfaat.......,
by ooG_4u
