Cara Membuat Subscribe Box Bersebelahan Related Post

Tentu semua sudah sedia maklum apakah fungsi Subscribe box dan juga fungsi related post.Kedua-duanya mempunyai fungsi yang amat berguna yang akan memudahkan visitor kita nanti.Pada pendapat aku dengan membuat Subscribe Box bersebelah dengan Related Post akan membuatkan blog itu kelihatan lebih kemas dan tersusun.Korang rasa macam mana?..Sebenarnya kita juga boleh meletakkan benda lain bersebelahan dengan subscribe box contohnya seperti iklan dan lain-lain,korang boleh buat sendiri mengikut kreativiti korang sendiri.Tetapi Subscribe box dan Related post yang akan aku tunjukkan ini mungkin hanya bersesuaian Kepada mereka yang menggunakan fungsi read more sahaja.Dan kepada yang tidak menggunakan read more kalau nak cuba pun boleh cuma nanti mungkin kelihatan tak berapa cantikla.Ok kepada yang ingin cuba buat subscribe box bersebelahan dengan related post bolehla ikuti langkah-langkahnya dibawah.

Sila buat backup dahulu template korang supaya tidak timbul masalah nanti

1.Pergi ke Layout—>pilih edit Html

2.Kemudian cari kode ]]></b:skin> selepas itu anda copy dan pastekan kode dibawah ini diatas kode yang dicari tadi.

/* ---------------[ Related Posts on Single Post Page ]--------------- */ #related { background:#f4f4f4 url(http://img62.imageshack.us/img62/3792/dotl.gif) 45% 0 repeat-y; border:1px solid #e3e2e1; height:180px; padding:10px; margin:0 0 0 5px; } #related .related-posts { font-weight:bold; width: 53%; float:right; } #related .related-posts p { margin:0; } #related .related-posts h3, #related .related-posts h2, #related .related-posts h1 { margin:0; font-size:12pt; letter-spacing:0; } #related .related-posts ol { font-weight:normal; margin:2px 0 0 5px; } #related .subscribe { width: 43%; float:left; } #related .subscribe p.intro { font-weight:bold; } #related .subscribe p.feed { margin-bottom:10px; font-weight:bold; padding-left: 21px; background: url(http://img130.imageshack.us/img130/1448/feedicon16u.gif) 0px 50% no-repeat; } #related .subscribe form { margin:0; padding:0; }

3.Kemudian korang perlu copy Java Script untuk Related post ini dan upload ke hosting anda sendiri kemudian letakkan Javascript itu dibawah kode ]]></b:skin> .

Diingatkan file javascript akan membuatkan blog korang menjadi berat sewaktu proses loading nanti,kalau tak ada hosting sendiri boleh ikut macam yang aku buat sekarang.Sila refer sini untuk tahu lebih lanjut.

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('

' + relatedTitles[r] + ''); if (r < relatedTitles.length - 1) { r++; } else { r = 0; } i++; } }

4.Langkah terakhir yang perlu korang buat ialah cari kode  <data:post.body/> kerana kita nak letakkan kode ini selepas read more dan kedudukannya dibawah post.Masih didalam kotak Edit Html cuma korang perlu berikan tanda centeng didalam kotak Expand Widget Templates itu.Selepas jumpa kode <data:post.body/> korang copy dan pastekan kode html ini dibawahnya.

<div id="related" class="clearfix"> <div class="related-posts"> <p>Related posts:</p> <ol><loop var="label" values="data:post.labels"><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></if></loop> <div class="subscribe"> <p class="intro">If you enjoyed this article, subscribe to receive more great content just like it.</p> <p class="feed"><a href="http://namablogkorang.blogspot.com/feeds/posts/default">Subscribe via RSS Feed</a></p> <form onsubmit="window.open(&amp;apos;http://feedburner.google.com/fb/a/mailverify?uri=idfeedburnerkorang&amp;apos;, &amp;apos;popupwindow&amp;apos;, &amp;apos;scrollbars=yes,width=550,height=520&amp;apos;);return true" method="post" action="http://feedburner.google.com/fb/a/mailverify" target="popupwindow"><input type="hidden" name="uri" /> <input type="hidden" name="loc" /> <input id="botsub" name="email" /> <input id="botsubbutton" type="submit" /> <br /><small>Your information will not be shared. Ever.</small> </form></div> </ol> </div> </div>

5.Kemudian save dan lihat hasilnya.

jangan lupa tukarkan yang aku tandakan dengan warna merah itu kepada alamat blog dan id anda sendiri.Tak berjaya buat boleh tinggalkan pertanyaan dibawah kita akan cuba selesaikan bersama-sama.