Banyak yang menanyakan bagaimana membuat related post tampil di sidebar seperti blog ini" sebenarnya trik ini sudah lama dan sudah banyak Blogger master yang membuat tutorial ini contohnya Mas doyok"
Untuk menanggapi Yang belum tau" sekalian melengkapi tutorial blog ini saya akan coba memposting kembali tutorial ini Yuk kita langsung aja ikuti langkah2 Cara Membuat Related Post Widget di Blogspot
Untuk menanggapi Yang belum tau" sekalian melengkapi tutorial blog ini saya akan coba memposting kembali tutorial ini Yuk kita langsung aja ikuti langkah2 Cara Membuat Related Post Widget di Blogspot
- Login ke akun blogger anda, pilih blog yang ingin anda edit, klik link Layout kemudian masuk ke Edit HTML
- Jangan lupa centang/tandai/aktifkan Expand Widget Templates Untuk bisa mengedit template secara keseluruhan.
- Masukkan kode script berikut sebelum tag <head> dibawah ini:
<script type="text/javascript">Kemudian cari kode widget seperti dibawah ini:
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>
<b:if cond='data:post.labels'>Pada Script diatas, tambahkan script yang dicetak tebal seperti dibawah ini:
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&
max-results=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
- Save template
- kemudian buka Layout -> Page Elements dan add a new HTML/Javascript widget. beri judul atau title Title Related Post. kemudian copy paste script di bawah ini pada kotak yg disediakan :
<script type="text/javascript">Sekarang kembali lagi ke Layout -> Edit HTML, centang/tandai/aktifkan Expand Widget Templates Untuk bisa mengedit template secara keseluruhan, kemudian cari HTML/Javascript widget Related Post yang kita add. Tambahkan baris yang berwarna merah seperti dibawah ini :
removeRelatedDuplicates();
printRelatedLabels();
</script>
<b:widget id='HTML13' locked='false' title='Related Post' type='HTML'>Simpan hasilnya.... :)
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
Label: Blogger, Tutorial Blog
15 komentar:
wah keren..kalo ane masih pake related post yg dibawah posting...
owh.. sama sob.. aku pernah cuba buat related post di sidebar juga..
patut di uji nih..
makasih kak...
ckckckckkc
Aku sih lebih suka yg di bawah post aja lah, soalnya kemungkinan besar Pengunjung klo di bawah post lebih tau dr pada di sidebar ^^
Damar| iya sob" tapi ini cuma alternatif supaya bagian posting gak memanjang ke bawah :-Y
mau diletakan pada sidebar atau di bawah konten itu terserah narablog, yang penting letakan pada tempat yang strategis dan dapat atau sering di lihat oleh visitors karena ini berfungsi untuk meningkatkan pageview
mas gus| makasih udah berkunjung
sippp, ni bisa di taruh bawah posting juga, aku mo coba ah, makasih sob
tutorial yang mantab mas, terima kasih, izin simpan codenya mas...
@ GIeterror silahkan mas, sering2 berkunjung ya
info yang bagus sob....
wah... ilmunya saya serap dulu...
mau bikin web nih tapi basisnya blog engine aja :)
Masukkan kode script berikut sesudah tag <head> atau sebelum tag <head> seperti dibawah ini:
Yang bener sesudah atau sebelumnya mas????????
@ Serba Seru maaf mas salah ketik kodenya di pasang sebelum kode <head>
Mantap mas, saya coba dulu deh...
Posting Komentar
Silahkan tinggalkan komentarnya...