Cara Membuat Artikel Terkait di Blogger
Posted: Selasa, 26 April 2011 by Dany "Vyr03z" Firdaus in Label: TutorialJalan-jalan ngeblog alias blogwalking, dulu pernah nemuin cara memasang artikel terkait di blogger. Tapi sebenarnya masih ada banyak cara-cara yang lain. Daripada lupa nantinya lebih baik saya share lagi aja di sini.
Langsung saja berikut ini caranya.
1. Login ke blogger
2. Klik Tata Letak
3. Pilih Edit HTML pastikan backup template dahulu
4. Cari kode
5. Tambahkan kode berikut ini tepat dibawah <data:post.body/> yang pertama
<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 = 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>
6. Kemudian, cari kode ]]></b:skin>
7. letakkan kode berikut diatas 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);}
8. Simpan Template…
Dan Insya Allah jika tidak ada kesalahan hasilnya akan seperti punya saya...good luck...
Artikel Dengan Kategori yang Sama:
- CARA MEMASANG (INSTALL) APLIKASI PADA HANDPHONE NOKIA ANDA
- Cara Mengubah Tampilan Logo Icon Blogspot di Address Bar
- 9 Cara Mempercepat Koneksi Internet
- Cara Setting Laptop Menjadi Hotspot WiFi Dengan Modem USB Biasa
- Membuat Author Box Di Bawah Postingan
- Tips Cara Membuat Hak Cipta Pada Postingan Blog
- Cara Bikin Navigasi Breadcrumb pada Blog
- Memberi Screen Saver Gambar Sendiri di Blog
- Cara Membuat Buku Tamu (Terbuka Tanpa di Klik)
- Cara Memasang Linkwithin di Bawah Postingan Blog
- Tutorial Cara Pasang Energy Saving Mode pada Blogger
- Cara Memberi Efek Bintang (Star Effect) pada Kursor di Blog
- Membuat Link Warna-Warni
- Cara Membuat Tulisan Berbayang (Shadow) di Blog
- Membuat Judul Terpecah Kemudian Terkumpul Kembali
- Cara Memberi Sound Effect pada Blog
- Download HJSplit dan Cara Menggabungan Program