Apa mamfaat yang diperoleh dengan memasang widget artikel terkait di blog? Mamfaat jelas dari memasang widget artikel terkait adalah untuk meningkatkan page view terhadap beberapa posting dari blog kita yang sudah kita publish.
Cara Memasang Artikel Terkait Di Bawah Posting Atau Artikel Blog
- Sign In di akun blogger.com
- Pada menu Drop Down, Klik Template
- Backup Template sobat blogger terlebih dahulu.
- Kalau sudah, klik Edit Template
- Klik Proceed dan kasih tanda centang pada Expand Widget Template
- Copy Paste (Copas) kode CSS berikut :
.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); }
- Paste kode tersebut sebelum kode ]]></b:skin>
- Selanjutnya, copy kode di bawah ini :
<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>
- Paste kode tersebut di bawah kode <data:post.body/>
- Simpan template sobat.
Tambahan :
- Terdapat banyak kode <data:post.body/> pada setiap template. Kalau blog sobat blogger sudah memasang fitur Read More, tempatkan setelah <data:post.body/> yang kedua.
- #f0f0f0 adalah kode warna background sebelum Cursor diarahkan, silahkan ganti dengan warna yang sobat blogger inginkan. Lihat kode warna disini.
- var maxNumberOfPostsPerLabel = 4; adalah jumlah postingan untuk setiap label dan maxNumberOfLabels = 3; adalah jumlah label. Silahkan sobat blogger sesuaikan kedua kode tersebut.
Itulah tips ngeblog tentang cara memasang artikel terkait di bawah posting blog. Semoga tips ini bermamfaat. Insyaallah untuk beberapa minggu ke depan, saya akan membuatkan tips tentang cara membuat artikel terkait di sidebar.
Advertisment
0 komentar:
Posting Komentar