Cara membuat Related Post / Posting Terkait [+ Tabel Scroll Bar]

Anonymous       10/02/2010 07:27:00 PM

>

Meski ini bukan teknik baru, tampaknya masih banyak blogger yang blognya belum disupport related post. Fungsi Related Post atau posting terkait adalah pengunjung bisa dengan mudah menemukan informasi lain yang masih ada hubungannya dengan artikel yang sedang dibaca. Keuntungan lain adalah kita bisa ‘mempromosikan’ artikel-artikel lama. Jika halaman blog diibaratkan toko, maka related post ini etalasenya. Jadi kenapa tidak anda coba?


O.K. , langsung saja ke tutorialnya berikut ini:

1. Login ke blog anda
2. Masuk menu 'Layout ► Edit HTML'
3. Centang kotak 'Expand Widgets Template'
4. Cari kode ini <data:post.body/>
5. Letakkan script berikut ini di bawah kode <data:post.body/> untuk Script standard.
6. Untuk bagian yang saya warnai, bisa anda edit untuk menyesuaikan dengan keinginan anda.

Script Memakai Kolom Tabel ►

<b:if cond='data:blog.pageType == "item"'><br /> <div class='similiar'><br /> <div class='widget-content'><h3>Related Post</h3><div id='data2007'/><br/><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><br /> </div><br /> </div></b:if>

Script Tanpa Memakai Kolom Tabel ►

<!-- RELATED POST SCROLL --><br /> <h3>Baca juga :</h3><div style='border: 1px solid #aaa;background-colo r:#f9efef; width:470px; height:200px; overflow:auto; color:#FFF;'><p><b:if cond='data:blog.pageType == "item"'><br /> <div class='similiar'><br /> <div class='widget-content'><div id='data2007'/><br/><br/><br /> <script type='text/javascript'> var homeUrl3 = "<data:blog.homepageUrl/>"; var maxNumberOfPostsPerLabel = 77; var maxNumberOfLabels = 77; maxNumberOfPostsPerLabel = 77; maxNumberOfLabels = 77; 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><br /> </div><br /> </div></b:if><br /> </p></div><!-- RELATED POST SCROLL -->

Save, dan lihat hasilnya. Selamat mencoba !

Baca juga Menggunakan Font Keren di Website / Blog anda.