Membuat Related Post / Artikel atau PostingTerkait Pada Blogger Dilengkapi Dengan Scroll
20 Agustus 2010
Leave a Comment
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 :
Trik Blogger
- List Dofollow Backlink .EDU & .GOV High PR
- Cara Menampilkan Status Off & Online Yahoo Messenger
- Mengganti "Older Posts" Dengan Angka
- TIps Merawat Ponsel, HP Agar Tetap Awet
- Cara Mudah Pasang Widget WOWZIO
- Buat Kalender
- Pasang file .swf / flash di Blogger
- Membuat Scroll To Top pada Blogger
- Menghilangkan Navbar Blogger
- Memproteksi Blog dari kegiatan pembajakan artikel dan source code
- Membuat read more.. pada posting blog
- Setting Domain Blogspot di co.cc
- Cara Pasang Flash di Blogspot
- Highlight pada Script/Kode di Postingan
- Tips Mengedit HTML Blogspot
- Cara Menghilangkan Tanda Tang dan Obeng
- Pasang Widget Translator di Blogspot
- Cara Menampilkan / Pasang Emoticon di Kotak Komentar
- Highlight Author Comment
- Menampilkan Recent Comments (Komentar Terbaru)
- Cara Membuat Menu Vertikal (Vertical)
- Cara Membuat Menu Tab View Dengan HTML di Blog
- Mengganti Kotak Komentar Haloscan menjadi Commentbox Blogspot
- Membuat Kotak Komentar Blogger di Bawah Postingan
Blogging
- List Dofollow Backlink .EDU & .GOV High PR
- Cara Membuat Blog Gratis Dan Mudah
- Index
- Menjadikan Blog sebagai Ladang Penghasil Uang
- Google Panda Adalah Eliminasi Blog Tidak Bermutu
- Memaksimalkan Posisi Di Mesin Pencari Google
- Membuat Spoiler Gambar Di Blog
- Template Blogger Gaya Facebook
- Template Blogger Gaya Twitter
- Membuat Visitor Online Tampak Banyak
- Cara Membuat Blogspot
- Membuat Iklan PPC Berjajar
- Membuat Auto Search Engine Content di Blogger
- Menjadi Nomor 1 Di Mesin Pencari Google
- Cara Meletakkan Tombol Facebook Share Dalam Postingan Blog
- Cara Dapatkan Link Favicon
- Top 15 Most Popular Social Bookmarking Websites
- Membuat Blogger Versi Mobile
- Cara Menampilkan Status Off & Online Yahoo Messenger
- Menambah Backlink Dengan Berkomentar
- Menambah Backlink Dengan Berkomentar
- Mengganti "Older Posts" Dengan Angka
- Share List Backlink Forum PR0 - PR9
- TIps Merawat Ponsel, HP Agar Tetap Awet
- Cara Mudah Pasang Widget WOWZIO
Terima kasih banyak atas trik realted post nya ya Sob..mantab!!
Salam kenal