Membuat Related Post / Artikel atau PostingTerkait Pada Blogger Dilengkapi Dengan Scroll
20 Agustus 2010
Leave a Comment
Apa anda sendang mencari tutorial cara membuat related post atau postingan terkait seperti pada gambar disamping untuk blog anda, jika anda menginginkan nya silahkan baca artikel ini sampai selesai.Membuat related post seperti gambar disamping cukup singkat dan saya jamin anda semua pasti bisa menggunakannya untuk langkah langkah nya silahkan baca dibawah ini:
1. Masuk ke account blogger anda
2. Pilih Tata Letak / Rancangan kemudian Edit HTML
3. Jangan lupa untuk memberi tanda centang pada Expand Widget Templates
4. Beck up dulu template anda bila perlu untuk menghindari kesalahan.
5. Kemudian cari
<data:post.body/>
Jika sudah ditemukan silahkan Copy dan Paste kan kode dibawah ini tepat dibawah kode yang tadi anda cari
<b:if cond='data:blog.pageType == "item"'>
<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 = 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('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>
Catatan Penting : Bagi anda yang telah menggunakan readmore anda akan menemukan 2 buah kode <data:post.body/>, maka Paste kan code diatas tadi tepat dibawah kode <data:post.body/> yang pertama.
Jika tahap ini sudah selesai, Cari kode dibawah ini:
]]></b:skin>
Jika sudah ketemu Copy kode dibwah ini dan Pastekan diatas kode tersebut
.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);}
Jika sudah berhasil Simpan Template sekarang lihat pada salah satu postingan pada blog anda.
Catatan : untuk anda yang sebelumnya telah menggunakan related post maka lebih baik anda menghapus terlebih dahulu related post yang sebelumnya anda buat, untuk kata atau tulisan yang berwarna merah pada kode diatas dapat anda ganti sesuai dengan selara anda.
selamat mencoba dan semoga berhasil.
Free live stream free stream onlineapabae
Postingan Menarik Lainnya :
Terima kasih banyak atas trik realted post nya ya Sob..mantab!!
Salam kenal