Membuat Artikel Terkait/Related Post dengan Fungsi Scroll
Assalamu’alaikum....
Bertemu lage, ne. Hehe, pastinya di BLOG sederhana aku ini. Hem, sebenernya aku juga baru belajar nge-blogging. Kalau tutorial-tutorial blog yang aku dapet cuma disimpan di file computer, kok, kayaknya ribet, ya.... Kalau ada temen aku ada yang tanya, aku musti bingung nyari ke sana ke mari file simpenan aku. Jadi, sekalian sharing, skalian nguntungin aku juga (‘kan kalo’ ada yang tanya, tinggal bilang, “Liad di Blog aku, Sobt!” >_<).... Hoho... Oce, deuh, setelah sebelumnya aku sharing cara bikin Read More, sekarang tentang cara bikin Artikel Terkait/Related Post versi scroll.
1.Langkah pertama, tentu aja
LOG IN ke BLOGGER>>TATA LETAK>>EDIT HTML>> klik Expand Template Widgets .
2.Udah??? Nah, sekarang cari kode di bawah ini...
<data:post.body/>
3.Kalo’ ada 2 kode kayak gitu, pilih yang pertama. Copas kode di bawah ini dan letakkan tepat di bawah kode
<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 = 10;
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>
3.Selanjutnya cari kode ]]></b:skin>
4. Jika sudah ketemu, copy dan pastekan code berikut di atas code merah tadi:
.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);}
5.Save template.... And Jeng jeng... Berhasil, deuh.... Selamat mencoba, ea....
Wassalamu’alaikum... Jangan lupa tulis komentarnya.... Teng qyu....
>::< Jangan lupa comment.nya,ea... >::<
6 Comments
Jlan2 lagi2 dpt ilmu dari sobat blogger,,,
BalasHapusmkasih,,
mkashy buat ilmunyaa.. mau nyobaa tapi takut engga berhasil.. :D
BalasHapus^Sun's
BalasHapusMa sama,,Sun's...
Jangan lupa balik lage,,ea... >_<
^Elok
Hem,,berhasil,kok. Tuh buktinya aq udah nyoba...
Tapi,kalo' d punyaQ, no.4 gag berhasil ato gag ngaruh. JAdi, Q gag pake' cara yang no. 4...
manstapppp
BalasHapusHalo Salam Kenal,,,Terimakasih Atas TutorialNya. Blog Anda Bagus, Manstab. Berkunjung Balik ya ???
BalasHapusSalam,
[rifweb]
Rifweb::
BalasHapusTeng qyu2.. Hihi.. :p Abis ini langsung aq kunjungi,,Rif.. ^o^
Jun::
Maap T_T,,namanya baru belajar.. Hihi... Ini aja masih agag bingung.. Haha ^0^
Imtikhan::
Masama,,Sobt.. Moga ngebantu,,yua.. :D
Desy::
Yes,,coba aja.. Jangan lupa kunjungan berikutnya,,,ya :p
Terimakasih atas kunjungan dan segala apresiasinya. Silakan tinggalkan pesan di kolom komentar jika memang ada yang perlu didiskusikan ^ ^
Jika memerlukan informasi urgent, boleh sapa saya di email karena saya cukup aktif pula di sana :).