Untuk memudahkan pengunjung mencari artikel lain di blog, seorang blogger biasanya menyediakan kotak search atau cari di dalam blog. Ada juga yang menyediakan Link menuju ke Daftar isi Blognya. Saya sendiri menggunakanMenu Tab View untuk menampilkan Judul artikel blog Gesek-Gosok di sidebar ( Kalau saya Belum Ganti Template ). Semua cara diatas bisa memudahkan pengunjung blog untuk mencari artikel di blog.
Dibandingkan dengan beberapa cara diatas, cara yang paling ampuh adalah dengan membuat Artikel Terkait atau Related Post di bawah artikel blog. Dengan cara ini, pengunjung akan langsung melihat daftar isi blog sesuai dengan Label Artikel yang dicari / sedang dibaca.
Jika anda ingin memasang Related Post atau Artikel Terkait di bawah postingan blog anda berikut saya share caranya. Tapi sebelumnya, supaya related post bekerja sesuai dengan yang diharapkan, berikan Label pada setiap artikel anda. Baik artikel yang baru mau di posting, maupun artikel yang sudah di posting tapi tidak berLABEL. Berikut cara membuat Related Post atau Artikel Terkait :
Copy kode dibawah ini, lalu paste DIATAS kode ]]><b/skin> berikut kodenya :
<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 = 10;
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>
Jika belum sesuai dengan yang diharapkan dan ingin mengubah warna / tampilan kotak Related Post, silahkan simak petunjuk berikut ini :
Anda bisa mengganti warna dan tebal garis pinggir kotak Related Postanda dengan mengganti angka dan kode warna yang berwarna merah pada kode pertama baris pertama.
Untuk melihat kode warna, silahkan sklik tulisan "KODE WARNA" yang ada diatas / header blog ini.
Jika ingin mengganti warna background kotaknya, ganti kode warna ( #F2F2F2 ) pada kode pertama baris kedua.
Kode pertama baris ketiga ( .rbbox:hover ) adalah warna background kotak jika mouse menyentuh kotak Related Post. Silahkan Ganti kode Warnanya sesuai dengan warna yang anda inginkan.
Anda Juga bisa mengganti Tulisan "Artikel Lainnya" dengan kata yang anda inginkan. Silahkan Ganti Tulisan Artikel Lainnya pada kode kedua ( kode yang ada didalam Text Area ).
Bagaimana Cara Membuat artikel terkait atau related posts
/*-- Related Post dari BLOGGERBUGIS--*/
.rbbox{border: 1px solid #000000;padding: 5px;
background-color: #F2F2F2;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: #EFFBEF;}
<b:if cond='data:blog.pageType == "item"'>
Categories:
Tutorial Blogger
0 komentar:
Posting Komentar