Untuk membuat related post atau artikel terkait tepat dibawah postingan ada banyak macamnya. Ada yang suka dengan tampilan bergambar, ada pula yang hanya menyukai tulisan saja.
Modelnya pun cukup beragam, ada yang berbaris kesamping, ada pula artikel terkait yang memanjang kebawah dan ada pula yang menggunakan thumbnails.
pada tutorial kali ini saya bermaksud merangkum semua model tersebut dalam satu posting. Oke, sekarang mari ikuti panduan saya ;
Masuk blogger > Rancangan(Template) > Edit Html > Centang Expand Template Widget
(Jangan lupa backup dulu template anda.
- Cara Membuat Artikel Terkait Biasa (Sederhana)
cari kode </head> (Gunakan Ctrl + F) kemudian letakkan script dibawah ini tepat di atas/sebelum kode</head><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>
Kemudian cari kode <data:post.body/></b:if> atau <data:post.body/> lalu letakkan script berikut ini di bawah kode <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>Artikel Terkait</h4><script type="text/javascript">removeRelatedDuplicates();printRelatedLabels();</script></b:if>
Terakhir simpan template sobat dengan begitu Cara Membuat Artikel Terkait Sederhana selesai.
2. Cara Membuat Artikel Terkait dengan Scroll
Cari kode <data:post.body/></b:if> atau <data:post.body/> lalu sama seperti cara diatas letakkan script berikut ini di bawah kode <data:post.body/>
<b:if cond='data:blog.pageType == "item"'> <br/><br/><H2>Related Post:</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 = 9999;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>
angka 9999 menunjukkan jumlah artikel terkait dalam satu label, bisa diganti sesuai yang sobat inginkan. Siipp Cara Membuat Artikel Terkait dengan Scroll Finish!
3. Cara Membuat Artikel Terkait dengan Thumbnails/Gambar (Linkwithin)
Yang membuat beda cara ketiga ini dari cara di atas adalah cara ini tidak menampilkan artikel terkait berdasarkan label melainkan random/acak semua posting dalam blog sobat.
Pertama-tama sobat daftar dulu di www.linkwithin.com
Email : Masukkan email
Blog Link : Link blog sobat lengkap dengan http://
Platform : Pilih Blogger
Width : Berapa jumlah artikel yang akan ditampilkan nanti
Pilih Get Widget dan dapatkan script-nya.
Next, cari kode </body> lalu letakkan kode script berikut di bawah atau sebelum kode </body>
<b:if cond='data:blog.pageType == "item"'>
kode script yang sobat dapatkan di linkwithin.com
</b:if>
Sekian dulu artikel kali ini. Terima Kasih
