Baiklah
pada postingan kali ini saya akan share tentang bagaimana Cara Membuat ArtikelTerkait (Related Post) dengan Scroll Bar
dalam postingan Blog atau tepatnya
berada di bawah postingan blog. Seberapa penting sih memasang Artikel
terkait di blog ? pastinya sangat penting !! dengan memasang
Artikel Terkait di blog akan lebih memudahkan lagi bagi para visitor
blog
membaca dan melihat artikel-artikel yang berhubungan dengan artikel yang
dibaca.
Dan jika dikreasikan dengan Sroll Bar akan lebih menghemat tempat di
blog kita jika isi postingan sudah banyak.
Untuk
cara memasangnya silahkan ikuti langkah-langkahnya berikut ini :
Ø Login ke akun
blog
Ø Selanjutnya edit
HTML lalu centang Expand Template Widget dan jangan lupa download template
untuk berjaga-jaga jika terjadi kesalahan.
Ø Kemudian carilah
kode berikut ini (gunakan ctrl+f untuk mempermudah pencarian)
<data:post.body/>
Ø Jika sudah
letakkan kode di bawah ini tepat di bawah kode <data:post.body/> [ setiap
template blog berbeda-beda, seperti template blog ini memiliki 2
<data:post.body/> ] coba letakkan kode setelah kode yg pertama atau
tepatnya diantara <data:post.body/> dan <div style='clear: both;'/>
<!-- clear for photos floats --> . Jangan takut salah dulu sob, coba tes
satu-satu klo diletakkan di
<data:post.body/> yang kedua ga bisa coba di <data:post.body/> yang selanjutnya. Langsung ja Ne Coding na.....
<b:if
cond='data:blog.pageType == "item"'>
<div
class='similiar'>
<div
style='border: 0px solid rgb(204, 204, 204); padding: 5px; overflow: auto;
width: 100%; height: 200px; background-color: #fcf7f7;'>
<div
class='widget-content'>
<h3>Artikel
Terkait Lainnya :</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>
</div>
</b:if>
NB:
-
Untuk kode yang berwarna merah silahkan sesuaikan dengan keinginan
-
Untuk kode yang berwarna hijau adalah warna background
Ø Simpan dan Lihat
hasilnya
Posting Komentar