Tampilkan postingan dengan label HTML. Tampilkan semua postingan
Tampilkan postingan dengan label HTML. Tampilkan semua postingan

Cara membuat artikel terkait atau Related Post di Blogger

Senin, 07 Mei 2012 | 0 komentar

Kali ini saya saya akan menulis mengenai tips blogger,cara membuat artikel terkait atau related post di blog. Artikel ini saya tujukan untuk berbagi info dan ilmu bagaimana membuat blog yang bagus meskipun blog nya gratisan,seperti punya saya ini.

Selain itu,saya membuat artikel ini agar saya tidak lupa dalam membuat artikel terkait atau related post di blog karena saya termasuk orang yang pelupa maka saya akan menuliskannya di blog ini.

Saya akan memberikan dulu screenshot dari yang saya maksud dengan artikel terkait,berikut gambarnya :




Seperti itulah yang dimaksud dengan artikel terkait atau related post.Untuk membuat artikel terkait seperti itu,silahkan masuk dulu ke RancanganEdit HTML - Expand template widget.Kemudian,gunaan CTRL+F untuk memudahkan pencarian,cari kode dibawah ini :
    <data:post.body/></b:if>

atau bila tidak ada,cari kode ini :

    <data:post.body/>


Bila telah ditemukan,copy dan paste kode ini dibawah kode tadi,yang <data:post.body/></b:if>


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/>
<br/>
<H2>Related Post:</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 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 9999;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
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 &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;albri&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
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 = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
<script type="text/javascript">RelPost();</script>
</div>
</b:if>
Ingat,simpan kode ini dibawah kode <data:post.body/></b:if>
Tulisan yang saya warnai biru bisa anda ganti menjadi Artikel terkait atau dibiarkan juga tidak apa-apa.Setelah itu cari kode ]]></b:skin>,dan copy kode ini :

    .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);}


Lalu paste kode tersebut di atas kode ]]></b:skin>.Selesai dan jangan lupa save template,kemudian lihat dan cek,apakah artikel terkait/related post telah terpasang di blog anda.Selamat mencoba,salam blogger.
 
 
© Copyright 2011-2012 MD GESPALINK All Rights Reserved.
Ping your blog, website, or RSS feed for Free Google PageRank Checker Powered by  MyPagerank.Net My Ping in TotalPing.com
Powered by Blogger.com