adsense link 728px X 15px

Friday, May 14, 2010, 

Feed burner dan Related Post menjadi satu kolomJika 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...







13 Comments:

Mansuka™ said...  on  May 14, 2010 at 7:37 AM

Thanks mas,ntar dicoba,tapi berkali2 mau posting feedburner dibawah postingan dan biasanya selalu muncul di halaman depan.Atau sebelum readmore. . Ni mudah2han bisa . .

Hendro-Prayitno said...  on  May 14, 2010 at 8:22 AM

keren sob,,jadi bisa dua ya..related dan feed burner

Hendro-Prayitno said...  on  May 14, 2010 at 8:23 AM

keren sob,,jadi bisa dua ya..related dan feed burner

Rock said...  on  May 14, 2010 at 9:34 AM

Banyak banget ya kodenya...
Aku simpan dulu sob.
Thanks.

Masda said...  on  May 14, 2010 at 10:47 AM

@Mansuka, sama-sama mas, di coba aja dulu...
@Hendro-Prayitno, Iya mas biar simple,,, hehe...
@Rock, saya nulisnya aja juga capek, , , :D

Rizky2009 said...  on  May 15, 2010 at 2:37 AM

kalau feed burner g tak pasang sob, g ada yang berlangganan

Masda said...  on  May 15, 2010 at 3:39 AM

@Rizky2009, kalo g dipasang kolom sebelah kiri kosong donk, sama ja pasang related post yg seperti biasa...

nge-tik said...  on  May 31, 2010 at 4:31 AM

thnks info ny..

suranegara said...  on  June 8, 2010 at 1:52 PM

Wih... mantep nih infonya..... siap dicoba dah...

TSM said...  on  June 26, 2010 at 12:35 AM

nice info,cara bikin quote kayak diatas gmn sob???

jontor's blog said...  on  September 3, 2010 at 6:31 AM

Asik ne gan.... ke unggulanya buat apa ne gan.. og gak di jelasin ne,,, log bisa yang lenkap yua gan...!!!

DG said...  on  April 2, 2011 at 10:48 PM

Bang, kalo cara nambahin fitur related post di dalam email feedburner gimana ya bang?

Jadi misalnya kalo kita berlangganan sama suatu website, terus website tersebut update 1 artikel dan masuk ke email kita.

Terus disana terdapat related post dengan artikel terbaru tsb...

rennaisans said...  on  May 16, 2011 at 9:28 AM

gagal bro

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Post a Comment

 

It's Me

My Photo
Masda
Seorang blogger "KOTA GADIS" yang selalu penasaran dengan sesuatu hal yang baru. Belajar, belajar, dan terus belajar serta berusaha untuk menerapkannya. Karena menurut saya "Ilmu itu untuk diterapkan bukan untuk dipelajari".

Facebook Twitter
View my complete profile

Exchange Link

MasdaZine

Followers