Mastak Ngeblog - 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
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 = "<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('data2007').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>
</div>
</b:if>
CARA 2
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("http://www.webaholic.co.in/other/bw.png")
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 == "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
!= "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=5"'
type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>
<!--Related Post Widget Ends-->
CARA 3
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("http://1.bp.blogspot.com/_cNpXRtRph18/SpbSRYurg2I/AAAAAAAAD7Q/ GbYNm2feyIQ/rss.png") 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 != "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=5"' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>
6. SAVE!
0 Response to "Cara Membuat Artikel Terkait (Related Post) di Blogspot"
Post a Comment