memasang related post pada blog

related post pada blog adalah sebuah widget yang berguna untuk menampilkan postingan/artikel yang saling berkaitan. related post sangatlah penting untuk dipasang di blog, selain dapat mempercantik blog, related post dapat membantu visitor blog kita dalam menemukan artikel-artikel yang terkait.

memasang related post pada blog dapat mempercantik blog. Caranya dapat menyisipkan script pada template blogger. Biasanya, widget related post diletakkan di bawah artikel/postingan. sehingga, setiap visitor selesai membaca artikel/postingan dapat menemukan artikel yang terkait dengan yang sebelum ia baca dengan mudah.

Berikut ini langkah-langkah memsang eidget related post dibawah postingan. Untuk keamanan, sebaiknya Anda memback up template Anda terlebih dahulu.

1. Menu Dashboard, klik Tata Letak, klik Edit html.

2. Centang check box Expand Template Widget

3. Cari kode berikut ]]></b:skin>

4. Copy paste kode dibawah ini diatas kode ]]></b:skin> :

.rbbox{
border: 1px solid rgb(192, 192, 192);
padding: 5px;
background-color: #EEF1F9;
-moz-border-radius:5px;
margin:5px;
}
.rbbox:hover{
background-color: rgb(255, 255, 255);
}

4. Cari kode berikut :

<data:post.body/>

5. Kemudian paste kode berikut di bawah kode <p><data:post.body/></p> :

<b:if cond='data:blog.pageType == "item"'>
<H3>Related Post</H3>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<div id='ipank'/>
<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('ipank').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>

7. Klik Simpan

Jadinya seperti gambar berikut ini :

Widget related post sudah terpasang dibawah postingan blog Anda. Selesai sudah cara memasang widget related post pada blog. Anda bias memodifikasi CSS kodenya yang berwarna hijau untuk merubah tampilan kotak related post nya. selamat mencoba, semoga berhasil!

jonidepth

memasang related post pada blog

1 komentar: