Kali ini saya mau share cara membuat artikel terkait yang akan ditaruh tepat dibawah postingan blog nya temen-temen dengan scroll.
Cara ini sendiri saya pelajari dari Technologie's Blog dan saya coba terapkan pada blog saya dengan sedikit kustomisasi (sangat sedikit,hehehe...)
OK, langsung aja sob kita mulai :
1. Login dulu di blogger.com
2. Pilih Template - Edit HTML.
3. Centang Expand Template Widget dan cari kode <data:post.body/> . Gunakan CTRL+F biar cepet.
4. Letakkan kode berikut dibawah kode tersebut.
<b:if cond='data:blog.pageType == "item"'> <strong>Baca Artikel Lain :</strong> <div class='rbbox'> <div style='margin:0; padding:10px;height:200px;overflow:auto;border:3px solid #ccc;'> <div id='ardi33'/> <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('ardi33').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>
5. Simpan Template.
Gimana sob?? cukup mudah kan, semoga bermanfaat buat yang sedang belajar nge blog...
Happy blogging sob...:)
berkunjung ya..
ReplyDeleteane newbie :shakehand2:
@Randi Andriana: ok sob, terima kasih atas kunjungannya... :shakehand2:
ReplyDeletebermabfaat banget....saya akan terapkan pada blog saya...
ReplyDeletebaik sob...silahkan dicoba yah...
Deletega bisa bagaimana sob?? sudah dimasukkan kodenya tapi ga muncul atau kode nya yang dicari ga ketemu???
ReplyDeletehmm, maaf mungkin tutor diatas yang kurang sob, coba cari kode <data:post.body/> tersebut ada berapa di template agan, kalo di template saya ada 4, letakkan dibawah kode <data:post.body/> yang terakhir. biasanya kode tersebut lengkapnya seperti ini : <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
ReplyDeleteSalam kenal gan, mampir di blog saya juga ya ^_^
ReplyDeletePernah pasang artikel terkait bergambar, tapi gambarnya hanya X begitu...Padahal di artikel ada gambarnya....
ReplyDeletekalau saya sendiri lebih suka tanpa thumbnail gan, krn akan bisa memuat lebih banyak related post, sehingga probabilitas dibukanya artikel2 lainnya semakin besar tentunya dengan kondisi artikel tersebut menarik untuk dilihat...
Deletegood. berguna teman
ReplyDeletehttp://coppasdot.blogspot.com/2013/04/download-idm-terbaru-615-build-2-final.html
terima kasih dan alhamdulillah apabila bermanfaat... ^_^
Deletesangat bermanfaat artikel ini..sukron sob.
ReplyDeleteelrizki25.blogspot.com
terima kasih dan alhamdulillah bila bermanfaat... ^_^
DeleteKlw agan kok nda ane liat artikel terkaitnya...???
ReplyDeletekarena mayoritas isi dari blog ini adalah mengenai tutorial blog, maka saya tidak gunakan artikel terkait seperti itu, sebagai gantinya saya sudah memberikan menu khusus tutorial blog di bagian sidebar...
Deletesaya ada tulisan baca artikel lain sama kotaknya tapi ga ada isinya
ReplyDeletekemungkinan itu karena tidak ada postingan pada label yang sama gan...
DeleteTidak semua template ada nya.. :(
ReplyDeletepunya saya tidak ada :(
apa nya yang tidak ada gan? apa kode <data:post.body/> ?
Deletekok di blog saya gak bisa gan?
ReplyDeletemohon penjelasannya.
coba letakkan kode tersebut dibawah kode <data:post.body/> yang terakhir, kode lengkapnya kurang lebih seperti ini : <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
Deleteartikel bagus gan kunjungan balik
ReplyDeletebelatiindonesia.blogspot.com
blom bisa gan di blog ane...hiks
ReplyDeleteMakasih gan tutorialnya, untuk para newbie termasuk saya... Bagus sekali kang
ReplyDelete