Membuat Daftar Isi Blog pada Label Tertentu

Rabu, 26 Desember 2012

Hai, hampir 1 tahun saya tidak menulis artikel di blog ini. Banyak sekali rintangan dan halangan ketika saya ingin menulis post entah itu ketika ulangan tengah semester, berpergian, piknik, bahkan mengantuk ketika membuka komputer, yah itulah cobaan namanya juga hidup.. hehehe. Sampai dimana tadi? saya jadi ngelantur kemana-mana -_-

Baik, mari kita buat Daftar isi / list posting blog pada Label tertentu. Misalkan anda ingin menampilkan posting yang hanya berlabelkan "Tutorial" ataupun "Blog"? Perlu diketahui bahwa saya tidak mengerti bahasa Javascript, Jquery, ataupun sejenisnya, namun Saya akan beritahu resepnya :P

Anda memerlukan sedikit kode Javascript untuk membuatnya. Dibawah ini adalah kode inti (core) yang kita perlukan untuk membuat list menu tersebut.
<script style="text/javascript">
var numposts = 100;
var standardstyling = true;
</script>


<script type='text/javascript'>function showrecentposts(json) {
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}}
posttitle = posttitle.link(posturl);
if (standardstyling) document.write('<li>');
document.write(posttitle);}
if (standardstyling) document.write('</li>');}</script>


hmm, mungkin angka-angka diatas jangan dirubah, karena mempengaruhi kinerja Javascript. Saya pernah merubahnya, namun alhasil beberapa item "Ganda" ataupun tidak dapat menampilkan item tersebut. Whatever lah..
Dan anda juga memerlukan script JSON Blogger dibawah ini untuk menampilkan Posting anda.
<script src="http://alamatblogteman.blogspot.com/feeds/posts/default/-/Komputer?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>

Mari kita definisikan script diatas, Tulisan yang berwarna merah itu adalah alamat blog Anda, tulisan berwarna Kuning adalah nama Label, dan yang berwarna Hijau adalah jumlah posting yang ingin anda tampilkan.

Sehingga jika disatukan kode tersebut akan seperti ini:
<script style="text/javascript">
var numposts = 100;
var standardstyling = true;
</script>

<script type='text/javascript'>function showrecentposts(json) {
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}}
posttitle = posttitle.link(posturl);
if (standardstyling) document.write('<li>');
document.write(posttitle);}
if (standardstyling) document.write('</li>');}</script>


<script src="http://alamatblogteman.blogspot.com/feeds/posts/default/-/Komputer?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>


Dan Previewnya seperti Dibawah ini

Menampilkan Posting dari label "Komputer" :

Mudah bukan? Hal ini juga yang menyebabkan saya pusing -_-