Related post atau postingan yang berkaitan berfungsi untuk menarik perhatian pengunjung untuk lebih berlama-lama lagi singgah di blog kita karena bisa memancing pengunjung untuk membaca artikel lain yang berkaitan yang akan muncul berjejer di bawah postingan blog.Tentu saja hal ini sangat berpotensi untuk meningkatkan page view sebuah blog itu sendiri.
Apabila Related Post ini berderet terlalu banyak dan menimbulkan kesan padat pada blog, maka kita bisa menggunakan fungsi scrool agar lebih menghemat halaman yang di tampilkan.
Tutorial Cara Membuat Artikel Terkait Dengan Fungsi Scroll
Seperti biasa sebelumnya sobat backup template dulu.....
- Pertama Login ke akun blog Anda.
- Pilih Layout / Tata Letak / Rancangan.
- Klik tab Edit HTML.
- Kemudian klik Expand Template Widgets.
- Cari kode yang seperti ini :
<data:post.body/> Gunakan Ctrl + F untuk mempermudah pencarian.
- Jika Sobat sudah menggunakan fungsi Read More, maka terdapat 2 kode <data:post.body/>. Dan jika Sobat sudah menggunakan Artikel Terkait, hapus saja kode artikel terkait yang lama.
- Copy Paste kode di bawah ini setelah kode <data:post.body/> yang pertama (jika sudah menggunakan Read More).
<b:if cond='data:blog.pageType == "item"'> <br/> <br/> <H2>
Artikel Terkait:</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>
- Untuk kata Artikel Terkait, Sobat bisa menggantinya dengan kata yang lain.
- Selanjutnya, masukkan kode ini di atas kode ]]></b:skin> .
.rbbox{border: 1px solid rgb(192, 192, 192);padding: 5px;
background-color: #f0f0f0;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: rgb(255, 255, 255);}
- Terakhir klik Simpan Template.
Salam Blogger...
