Cara membuat artikel terkait di bawah posting

-
Cara membuat artikel terkait di bawah posting. Pada saat kita membaca suatu artikel terkadang pembaca ingin membaca juga postingan yang ada hubungannya dengan artikel tersebut. Dengan adanya artikel terkait, pembaca akan dengan mudah melihat judul artikel yang ada hubungannya. Hal ini akan sangat mempermudah pembaca untuk menjelajahi seluruh isi artikel kita.

Artikel terkait bisa diletakkan di sidebar maupun di bawah postingan. Saya sendiri menggunakan pilihan yang ke-2, yaitu artikel terkait di bawah postingan. Menurut saya ini lebih efektif, karena setiap pembaca sehabis membaca seluruh artikel kita, maka di bawahnya ditampilkan artikel terkait yang ada hubungannya dengan artikel tersebut.

Untuk membuatnya sangat sederhana, langkahnya sebagai berikut:
1. Pastikan anda telah masuk ke Account blog anda.
2. Kik Rancangan.
3. Klik Edit HTML.
4. Download Template Lengkap untuk berjaga-jaga jika terjadi kesalahan
4. Klik Klik Expand Template Widgets.
5. Tekan Ctrl + F untuk pencarian cepat.
6. Copy code <data:post.body/>
7. Paste pada kotak Find hasil tekan Ctrl + F tadi.
Kode yang anda cari akan terblock warna hijau.
8. Setelah ketemu copy code di bawah ini dan paste setelah code <data:post.body/>

<textarea><b:if cond='data:blog.pageType == "item"'><br /> <strong>Artikel Terkait</strong><br /> <div class='rbbox'><div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px 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><br /> </div><script type='text/javascript'>RelPost();</script><br /> </div></b:if>

 Atau code detailnya seperti ini:

<textarea rows="5" cols="25" onclick="this.focus(); this.select();"><textarea><b:if cond='data:blog.pageType == &quot;item&quot;'>
<strong>Artikel Terkait</strong>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<div id='ardi33'/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
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 &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;ardi33&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
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 = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
<script type='text/javascript'>RelPost();</script>
</div>
</b:if></textarea></textarea>

9. Save template, selesai.

Note:
Artikel terkait: berwarna merah bisa anda ganti dengan dengan "Baca juga yang ini" atau "Yang sering dibaca " atau yang lainnya, terserah anda. 

height:200px:tinggi kolom, silahkan edit sesuai selera anda.

Untuk mengecek apakah artikel terkait anda sudah berjalan atau belum, coba anda buka salah satu artikel anda. Jika sudah benar Artikel terkait akan tampak persis di bawah artikel anda.

"Selamat mencoba"

Komentar

Posting Komentar

Postingan populer dari blog ini

Cara cepat mencari kata di sebuah artikel blog

-
Cara cepat mencari kata di sebuah artikel blog. Kemajuan dunia IT sudah tak terbendung lagi. Di manapun orang berada dengan mudah mengakses informasi di internet dengan perangkat yang praktis seperti android. Lihatlah di sekeliling ketika anda di terminal, stasiun, tempat tongkrongan, dan bahkan sambil berkendara mereka tidak ingin ketinggalan berita. Mengapa demikian? Itulah perkembangan teknologi saat ini. Namun, dibalik pesatnya teknologi informatika masih banyak hal-hal yang tidak dikuasai pengguna internet. Salah satunya adalah hal sepele, misalnya mencari salah satu kata atau kalimat pada saat mendarat pada sebuah artikel yang kita tuju. Hal ini menurut saya penting, karena berhubungan dengan apa yang sebenarnya kita cari. Misalnya saja anda mencari sebuah istilah. Ketika mengetikkan suatu kata atau kalimat pada search di google.id/com, pastinya anda akan diantarkan pada sebuah artikel atau posting yang mengandung keyword kata tersebut. Tetapi betapa kecewanya setelah sampai pada...
Baca selengkapnya

SPECIAL EFFECTS ANIMATION

-
SPECIAL EFFECTS ANIMATION. Made with computer effects that go on in the editing process known as CGI (Computer Generated Imagery) Effects or Visual Effects - Special Effects instead. But in the CGI there are other terms that might be a little confusing, that is, Special Effects Animation. Special Effects Animation is a branch of the animation (which is a function of the CGI scope.) This field is specialized to make all the moving objects, except the characters. For characters, this field is called Character Animation. Special Effects Animation can make objects ranging from cars, buildings, rain, wind, fire, lasers, water and other natural phenomena. So, when you use 3D software to create certain effects, say you're making Special Effects Animation. But after these effects are integrated in the film in post production, the result is you're making Visual Effects.
Baca selengkapnya

Pembelajaran siswa berbasis online

-
Pembelajaran siswa berbasis online. Tak dapat dibendung kemajuan dunia teknologi saat ini. Baik perkembangan dunia komputer maupun gadget. Coba lihat di sekitar anda, siap yang tidak memiliki handphone. Saya yakin hampir setiap rumah memilikinya. Bahkan tak sedikit saya lihat anak-anak sudah pandai mengoperasikan ponsel pintar android. Lalu apa hubungannya dengan dunia pendidikan? Suatu saat teman pernah bercerita bahwa anaknya sekarang males megang buku. Setiap ada tugas dari sekolah dia selalu membuka tablet untuk menyelesaikan PRnya. Dari contoh tersebut lalu saya berfikir, "seandainya setiap pendidik memiliki sebuah blog untuk pembelajaran bagi siswanya". Bukankah seorang pendidik lebih cepat memberikan materi bagi muridnya? Sang gurupun tak harus terlalu banyak bicara untuk menyampaikan pelajaran, siswa disuruh membaca dan pertanyaan pun bisa mengalir. Bukankah ini juga interaktif? Itu hanyalah sekilas dalam fikiran saya lhoh he he. Namun, bukan tak mungkin masih banyak ...
Baca selengkapnya