Cara Membuat Related Post dan Feed Burner Menjadi Lebih Menarik

Jika pada postingan sebelumnya saya pernah membahas mengenai cara membuat Related Post (Artikel Terkait). Maka pada postingan saya kali ini akan membahas mengenai cara Membuat Feed Burner dan Related Post menjadi lebih menarik, yakni dengan cara membuat kedua elemen tersebut berada dalam satu kolom. sesuai dengan pertanyaan yang telah diberikan oleh mas Mansuka kepada saya lewat kotak komentar (maaf mas baru sempat posting). Contohnya bisa anda lihat pada gambar di samping, atau bisa juga anda lihat hasilnya pada akhir postingan ini.

Langsung saja berikut cara pembuatannya.

1. Login ke akun blogger anda.

2. Klik Tata Letak kemudian klik Edit HTML, download lengkap template anda.

3. Beri tanda centang pada expand widget template.

4. Cari kode seperti berikut.
]]</b:skin>

copy kode di bawah ini lalu letakkan tepat di atas kode tadi.

.related{ width:534px;background:#eee url(http://i42.tinypic.com/fan675.gif) 43% 0 repeat-y; height:200px; overflow:auto; padding:15px; margin: 0 0 10px; border:1px solid #ccc}
.subscribe{width:250px; float:left}
.subscribe p.img{margin-bottom:10px; font-weight:bold; padding-left:21px; background:url(http://i40.tinypic.com/2mnrz3l.gif) 0px 50% no-repeat}
.subscribe form{margin:0; padding:0}
.related-posts{width:282px; float:right}
.related-posts p{margin:0}
.related-posts h3{margin:0; font-size:12pt; letter-spacing:0}
.related-posts li{background:url('http://i39.tinypic.com/2u5as1d.png') no-repeat center left; list-style-type:none; margin:0 0 5px; padding-left:20px}

Keterangan:
- #eee merupakan warna background dari kolom related post.
- width 534px adalah lebar kolom utama
- 43% adalah letak garis pemisah antara kolom feedburner dengan related post.
- width 250px adalah lebar kolom feed burner
- width 282px adalah lebar kolom related post
* silakan ganti sesuai lebar template anda masing-masing.

5. Kemudian cari lagi kode seperti ini
</head>

Copy kode di bawah ini lalu paste tepat di atas kode tadi.

<script type='text/javascript'>
//<![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;

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++;
}

}
//]]>
</script>

6. Terakhir cari kode seperti ini
<data:post.body/>

atau

<p><data:post.body/></p>

Copy kode di bawah ini lalu paste tepat di bawah kode tadi.

<b:if cond='data:blog.pageType == &quot;item&quot;'><br/><br/>
<div class='related'>
<div class='subscribe'>
<p class='img'><a href="http://URL BLOG ANDA/feeds/posts/default">Subscribe via RSS Feed</a></p>
LETAKKAN KODE FORM FEED BURNER ANDA DISINI
</div>
<div class='related-posts'>
<h3>Related posts:</h3>
<li>
<b:loop values='data:post.labels' var='label'>
<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>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script>
</li>
</div>
</div>
</b:if>

Keterangan:
- angka 5 yang berwarna merah menunjukkan jumlah artikel terkait yang ditampilkan.

7. Klik "Simpan".

Sekarang lihat apa yang telah anda lakukan pada template anda.hehe...Semoga bermanfaat...

If you enjoyed this article, subscribe to receive more great content just like it.

Subscribe via RSS Feed

Your information will not be shared. Ever.

Related posts: