Home » » Cara Membuat Related Post/Tulisan Terkait di Blogspot

Cara Membuat Related Post/Tulisan Terkait di Blogspot

Related Posts Blogspot
Related Posts, Tulisan Terkait, Artikel Terkait, atau Posting Terkait termasuk kategori "User Friendly" dalam sebuah blog.

Fungsi Related Posts adalah sebagai internal link sekaligus navigasi blog. Daftar artikel terkait ini juga memberikan pilihan kepada pengunjung, sekaligus "menggoda" mereka berlama-lama browsing di blog kita. Ini akan menaikkan Page View!

Cara Membuat Related Post/Tulisan Terkait di Blogspot sangat mudah dan banyak pilihan yang di-share oleh para blogger Indonesia dan mancanegara. 

Cara Membuat Related Post/Tulisan Terkait di Blogspot yaitu dengan memasukkan kode tertentu ke Template Blog kita. Setidaknya ada 3 cara. Pilih salah satu cara di bawah ini. 

CARA #1 Membuat Related Post/Tulisan Terkait di Blogspot


1. Klik "Template" --> Klik "Edit HTML"
2. Temukan kode <data:post.body/>
3. Simpan kode di berikut ini di bawah <data:post.body/> (Kalau ada dua, biasanya yang kedua. Jika <data:post.body/> lebih dari dua, maka coba yang kedua dan ketiga. Pasti salah satunya berhasil!)

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>
<div class='widget-content'>
<h3>Related Post</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
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;data2007&#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>
</div>
</b:if>

CARA #2 Membuat Related Post/Tulisan Terkait di Blogspot


1. Klik "Template" --> "Edit HTML"
2. Temukan kode </head>
3. Simpan kode berikut ini di atas atau sebelum kode </head>

<!--Related Post Widget Starts-->
<style> #related-posts { float : left; width : 480px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; font-weight: bold; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight: bold; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url(&quot;http://www.webaholic.co.in/other/bw.png&quot;) no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='http://www.webaholic.co.in/other/related-posts-widget.js' type='text/javascript'/>
<!--Related Post Widget Ends-->

4. Sekarang temukan <data:post.body/>
5. Simpan kode berikut ini di bawah <data:post.body/> tadi

<!--Related Post Widget Starts-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>
<!--Related Post Widget Ends-->

6. SAVE!


CARA #3 Membuat Related Post/Tulisan Terkait di Blogspot


1. Klik "Template" --> "Edit HTML"
2. Temukan kode </head>
3. Simpan kode berikut ini di atas atau sebelum kode </head>

<style>
#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
text-decoration : none;
}
#related-posts a:hover {
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url(&quot;http://1.bp.blogspot.com/_cNpXRtRph18/SpbSRYurg2I/AAAAAAAAD7Q/ GbYNm2feyIQ/rss.png&quot;) no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 21px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}
#related-posts ul li:hover {
background-color:#E2EBF8;
border-top:1px dotted #cccccc;
}
</style>

<script src='http://oemar.googlecode.com/files/Related_post _hack.js' type='text/javascript'/>


4. Sekarang temukan <data:post.body/>
5. Simpan kode berikut ini di bawah <data:post.body/> tadi

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>

6. SAVE!

Good Luck!

Thanks for reading & sharing Cara Membuat Related Post/Tulisan Terkait di Blogspot

Previous
« Prev Post

2 comments:

Comment Page:
  1. mf gan saya sudah kesana kemari cari tutor membuat related post, tp ga bsa juga ga work, termasuk punya agan juga sama, cek blog saya gan saya pemula br kenal blog 2014 ini blog saya http://terampilbisnis.blogspot.com/ sblmny trims contohblognih.blogspot.com saya tunggu info nya gan apa yang salah terhadap blog saya, trims gan

    ReplyDelete
  2. gan barusan saya coba ud work hehehe ad 3biji datapostbody nya trims ya

    ReplyDelete

Komentar spam, menyertakan link aktif dan alamat blog tidak akan muncul. Tidak semua pertanyaan sempat atau bisa dijawab. Thanks for visiting and the comment :)

E-mail Newsletter

Receive Latest Posts from CB Blogger Straight in Your Email Inbox