Berhubung ada sahabat blogger iplock yang bertanya "oia kang,ane pngn di scroll dong yang artikel terkaitnya.
jadi ga panjang yang diblog ane ntu,ntuh digimanain ya??? ".
Related Post adalah widget daftar artikel yang masih terkait dengan artikel yang sedang dibaca pada saat itu dan biasanya terletak langsung dibawah artikel tersebut.
Related Post adalah widget daftar artikel yang masih terkait dengan artikel yang sedang dibaca pada saat itu dan biasanya terletak langsung dibawah artikel tersebut.
Langkah-langkahnya sbb :
1. Login ke blogger > rancangan > edit html > edit template, centang expand template widget.
2. Backup dahulu template ke notepad.
3. Ctrl F lalu cari kode ini "</head>".
4. Copy kode dibawah ini diatas kode "</head>" tsb.
<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' +
relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' +
relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>
5. Paste seperti contoh dibawah ini.
<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' +
relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>
</head>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' +
relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>
</head>
6. Kemudian cari kode ini "<data:post.body/>" seperti langkah ke-3 diatas lalu copy lagi kode dibawah ini sesudahnya.
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<h4><i>Tutorial blogging lainnya...</i></h4>
<div style='border: 1px solid rgb(204, 204, 204); margin: 10px 0px; padding: 10px; -moz-border-radius: 10px 10px 10px 10px; width: auto; height: auto; background-color: rgb(223, 245, 234); '>
<div style='border: 0px solid rgb(153, 153, 153); overflow: auto; width: 500px; height: 180px; text-align: left; '>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
</div>
</b:if>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<h4><i>Tutorial blogging lainnya...</i></h4>
<div style='border: 1px solid rgb(204, 204, 204); margin: 10px 0px; padding: 10px; -moz-border-radius: 10px 10px 10px 10px; width: auto; height: auto; background-color: rgb(223, 245, 234); '>
<div style='border: 0px solid rgb(153, 153, 153); overflow: auto; width: 500px; height: 180px; text-align: left; '>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
</div>
</b:if>
7. Paste seperti contoh dibawah ini.
<data:post.body/>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<h4><i>Tutorial blogging lainnya...</i></h4>
<div style='border: 1px solid rgb(204, 204, 204); margin: 10px 0px; padding: 10px; -moz-border-radius: 10px 10px 10px 10px; width: auto; height: auto; background-color: rgb(223, 245, 234); '>
<div style='border: 0px solid rgb(153, 153, 153); overflow: auto; width: 500px; height: 180px; text-align: left; '>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
</div>
</b:if>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<h4><i>Tutorial blogging lainnya...</i></h4>
<div style='border: 1px solid rgb(204, 204, 204); margin: 10px 0px; padding: 10px; -moz-border-radius: 10px 10px 10px 10px; width: auto; height: auto; background-color: rgb(223, 245, 234); '>
<div style='border: 0px solid rgb(153, 153, 153); overflow: auto; width: 500px; height: 180px; text-align: left; '>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
</div>
</b:if>
Hitam.
Tutorial blogging lainnya : Gantilah judulnya sesuai keinginan.
"max-results=5" : Nilai ini untuk menentukan banyak artikel terkait yang akan ditampilkan.
Biru.
Ini untuk membuat border kolom pada artikel terkait.
Hijau.
Ini untuk fitur Scrolling.
8. Simpan template & reload blognya.
Selamat Mencoba.
aku dah foolow balik mas juragan..hehehe..makasih lho ya......jgn sungkan2 kalo visiting dan baca2...hohoho..skali lg makasih...
ReplyDeleteBelantara Indonesia > Oke gan.. Siip ;)
ReplyDeleteblogwalking aja ya gan
ReplyDeletewah makasih loh mas dah ditulisin tutornya!!!
ReplyDeletebtw buat yang tips yang no 6, ane dah buat,apa tetep harus ngikutin dari pertama atau gimn nih mas!!!!
mhn bimbingannya!!
Mantap brow tutorialnya....
ReplyDeletesukses selalu ya...
salamkenal dan salam hangat dari blogger Bali
oke deh sobat, langsung aku save :)
ReplyDeleteiplock > masalah penambahan fungsi Scrolling pada daftar artikel terkait...
ReplyDelete...yg perlu kamu lakukan hanya menambahkan "script scrolling" saja pada script artikel terkaitmu.. kan udah ada contohnya di > http://ecaknyo.blogspot.com/2010/07/cara-membuat-related-post-dengan-atau.html .... jadi tdk usah ikuti langkah dri pertama.. perhatikan sj langkah no.7 (yg saya warnai hijau)...
jadi hanya tambahkan script scrolling seperti dibawah ini ;
<div style='border: 0px solid rgb(153, 153, 153); overflow: auto; width: 500px; height: 150px; text-align: left; '>
DAN
</div>
Contohnya penempatannya seperti ini ;
<b:if cond='data:blog.pageType == "item"'>
<h4><i>Tutorial blogging lainnya...</i></h4>
<div style='border: 0px solid rgb(153, 153, 153); overflow: auto; width: 500px; height: 150px; text-align: left; '> */ INI AWAL SCRIPT SCROLLING */
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div> */ INI PENUTUP SCRIPT SCROLLING */
</b:if>
... kira2 begitu sobatku.. walopun mungkin sedikit berbeda script artikel terkait kita.. tpi cara penempatan script scrollingnya sama saja
.. :)
Pebisnis > oke.. mari BW gan.. :D
ReplyDeleteBali Wedding Photography > Thx gan.. salam dari blogger palembang.. ;)
four dreams > silahkan saja sobat... :)
;)
ReplyDeletemantep mas,
langsung dipraktekkan nih,
keren..
follw aah..
hehe
oh giu ya sob,ok dah, tak coba dulu!!!
ReplyDeletemakasih nih buat tutornya!!!
Yudie Blog's > thx.. wa FOLLOW BALIK gan.. ;)
ReplyDeleteiplock > silahkan dicoba.. dan smoga berhasil.. jgn lupa di save dulu widget template-nya di Notepad (buat jaga2 aj kalo trjadi error).. :)
waaaaah, mantabs and kerend's, langsung ke TKP tuk di coba, makasih infonya....
ReplyDeletewah aku dah pasang nih.,.,tetep mantep dah infonya ,,salam kenal ya,,,
ReplyDeleteKomplit Mas, klo versi thumnaillbih mudah pke linkwithin...
ReplyDeletePIK Remaja Al-Hikmah > silahkan dipelajari dulu gan.. :)
ReplyDeleteo'o > salam kenal jg... silahkan mencoba :D
Ka Damar > betul ..gw dulu udah pake yg likwithin.. bikin berat gan.. ini post-nya > http://ecaknyo.blogspot.com/2009/09/linkwithin-widget-mini-yang-praktis.html :))
Related Post ini selain untuk membuat pengunjung tertarik membaca artikel lainnya dengan mudah, SEO Friendly lagi..
ReplyDeletenach, bagi yang sering adu nyali di Kontes SEO.. widget satu ini wajib hukumnya..
Macam-macam Related Post
Happy blogging..
Kalau membaca artikel sekaligus menyimak komentar2nya ternyata pada ahli html ya blogger sekarang. Saya ketinggalan nih
ReplyDeleteSalam ukhuwah
rasiqzone > betul gan... ada keuntungannya menggunakan related post.. :D
ReplyDeleteBeDa > semua sobat blogger itu pintar2 gan.. :) ..buktinya pada bisa smua bikin blog yg bagus2.. salut gw.. cuma ad yang duluan saj blogging-nya makanya ilmu dpt duluan.. ;)
tips yang bagus..
ReplyDeletemembuat blog lebih cantik lagi..
nice info gan...
ReplyDeletemathap nih thanks for share
ReplyDeletewahh kebetulan ditempatku belum dipasang ini broo,,
ReplyDeleteboleh di coba tuhhh
nice nih.. gokil abizzz.. aku sebelumnya dah pernah coba..... mantabh
ReplyDeletesipppp, ane udah bisa sob ^_^ berhasil !
ReplyDeletePeJhes > betul gan .. :D
ReplyDeletedenadnan > thx gan.. ;)
Tebar Ilmu > silahkan dicoba gan.. :)
Gieterror > silahkan dicoba .. :D
aji > siip.. emg mantap gan.. ;)
MF Modifier > baguslah kalo udah pernah coba gan.. :))
Thanks sob ane mau eksperimen, Artikelnya mudah dimengerti" ;)
ReplyDeletemakasih atas infonya kawand..sukses selalu ya
ReplyDeletemakasih mas atas kunjungannya..maaf ya mas aku lum bisa balas follownya..alnya pake internet gratis nih...bentar malam pasti saya follow balik kok..
ReplyDeleteDengan kode javascript sekompleks itu, kira2 seberapa pengaruh ke Loading time homepage Blog kita gan?
ReplyDeleteApakah script tersebut bisa di compress lagi biar lebih ringan dalam loading nya?? mohon pencerahannya... newbie nih..
keren boz.tapi itu relatednya sesuai label atau apa?
ReplyDeleteFadel i-om > baguslah kalo mudah dimengerti gan..
ReplyDeleteInvestasi Online terbaru dan tercepat > sukses slalu jg utkmu sobat :))
Investasi Online terbaru dan tercepat > oke.. asal jgn lupa aj FOLLOw baliknya.. =))
aLamathuR d'hileudjapanist II > emg sdkit berpengaruh..tp bukan di homepage..pengaruhnya pas diklik di postingan sj..kan artikel terkaitnya muncul di bawah postingan.. coba aj testing blogku ini gan.. :)
Bisa di Compress tpi hati2 ya.. pilih cara kompres yg simple aj.. jgn yg cara advanced ntar bisa2 dikompres habis javascript-nya akhirnya jd gk berfungsi...
SIGIT SUPER > yups.. sesuai label gan.. :)
mantab infonya sobb, sementara saya belum pakai dulu soale artikelnya masih minim..
ReplyDeleteKlipangDotCom > oke gan.. keep posting ya.. ;)
ReplyDeleteaslm wr wb
ReplyDeleteslm knl dr blogger palembang
kalo istriny suka beliin baju diblogku y mksih
bajuqueen.blogspot.com
Raini Munti > wa'alaikum slm... salam blogger indonesia gan... wkwkwkwk.. :D iya nih ..istriku seneng baju2 islami yg modern :)
ReplyDeleteaslm wr wb
ReplyDeletealhmdulillah istriny senang, kalo bgitu dtunggu pesanannya murah2 dn unik, pas bwt momen lebaran :)
bajuqueen.blogspot.com
tutorial blogger yang blogspot ya, kalau saya pakai plugin karena wp
ReplyDeleteBanyak juga ya kodenya yg harus dipasang.
ReplyDeleteAnda dapat award...
ReplyDeletewah makasi infonya..
ReplyDeleteiya kadang related post menuh2in halaman
Raini Munti > :D ..wakakkak.. bisa aj nih
ReplyDeleteartikel psikologi > gw dulu jg pemakai wp gan.. ;)
Tongkonan > gk jg tuh gan.. kan tingal copas ja.. :))
Rumah Imajinasi > thx ya.. ntar gw ambil :)
readhermind-dy > posting inilah solusinya sob ;)
kunjungan sore! ;))
ReplyDeleteblognya fariativ banget yaaa.... rajin jalan2 blog kayaknya km, yaaa... :) makasih, udah mampir di blogku kemaren...
ReplyDeletesalam sobat
ReplyDeletewah harus edit template ya mas,,duh saya masih bingung kalau cari kodenya, karena beda kode-kode templatenya.
kunjungan dari Saudi Arabia.
Fahma Nurika > maksih kunjungannya.. ntar gw mampir balik ;)
ReplyDeleteNita > ntar gw mampir lagi :D
NURA > wow... jauh amit gan.. kerja ya di saudi arabia :D
waw mantap nih
ReplyDeletekunjungi sixandal.blogspot.com ya
dupopadana raigghi kaskus > oke.. wa mampir gan.. :)
ReplyDeleteBisa dicoba nih. Thx ya infonya
ReplyDeleteTawon Republik > silahkan kapan2 dicoba gan.. :D
ReplyDeleteMuhammad Chandra > salam kenal jg chandra.. oke visiting u now.. :)
ReplyDeleterasanya q gk bklan bosen deh dtang kesini.. blog sederhana yang berada di tangan professional. :D
ReplyDeleteNaruto Soundtrack > thx gan... jd malu gw hahahaha :))
ReplyDeletesaya tak dapat menerapkan tutorial ini
ReplyDeletenda bisa bisa malah wellformed
ReplyDelete@sigit
ReplyDeleteHarus hati2 gan... dan teliti..tutor yang satu ini memang membingungkan..tapi kalo sdh dipahami pasti bisa kok.. ;)
thank you sob....
ReplyDeletekunjungi balik yah,,,
Dah saya coba & berhasil. Makasih ya buat infonya. Keep posting!
ReplyDelete:-/
ReplyDeleteMas koq punya saya gag ada isi nya??
Cuman ada Kotaknya aja?
Mohon Penjelasannya..
@okan SFC:
ReplyDeleteSiip... wa BW balik gan..
@Republican Wasp:
ReplyDeletemanteeeb..dah berhasil ya.. ;)
@Ibnu_Fattah:
ReplyDeletegk ada isinya... ?? gk slah nempatin scriptnya kan gan..
Sudah Jadi Gan related posnya tank tutorial nya
ReplyDeleteThanks ...
ReplyDeletemantap gannn....lanjuttt
ReplyDeletemkasih mas,
ReplyDeletemaaf OOT nih, mo tanya...
knp tiap linknya di short dgn adf.ly, apa itu trmsuk iklan..
mklum nyubie ! =))
permisi numpang lewat...
ReplyDeletenice post Mass bro, btw lg blogwalking tengah malam dari Sulawesi..
ReplyDeletewow mantab gan
ReplyDeleteAsik neh
ReplyDeleteSaya sudah mencoba langkah 1-5. Tapi mulai langkah ke 6 nggak bisa. Sudah dicari kalimatnya, tapi di blog saya tidak ada.
ReplyDeleteAdakah solusi yang lain?
Terimakasih.