Membuat Artikel dan Komentar Terbaru Blogger versi JSON Feed

24 Mei 2012 | Permalink

JSON Feed

Artikel dan komentar terbaru merupakan sebuat widget yang cukup penting untuk kita pasang pada blog kesayangan kita. Selain terlihat menarik, widget-widget tersebut dapat membantu para pengunjung blog kita dalam hal navigasi. Pada dasarnya widget artikel terbaru dan komentar terbaru sudah disediakan pada fitur widget blogger, akan tetapi widget-widget tersebut mungkin kurang menyatu dengan desain template blogger kita sehingga kita mencari alternatif yang lainnya. Salah satu alternatif tersebut antara lain dengan cara menggunakan script json feed, seperti yang dapat Anda lihat disidebar template blogger IdBlogDesign.

Langsung saja bagi Anda yang tertarik untuk mencoba membuat widget artikel dan komentar terbaru dengan menggunakan script json feed bisa ikuti langkah-langkah berikut ini:

1. Masuk ke akun blogger Anda dan pilih Template - Edit HTML - Lanjutkan.(Untuk tampilan dashboard blogger yang terbaru).

2. Masukan kode css berikut ini pada template blog Anda, dengan cara copy paste kode dibawah ini sebelum kode ]]></b:skin>
.boxcontent{padding:8px; margin:0}
.boxcontent p{padding:0; margin:2px 0}
.boxcontent h3{padding:0; margin:0; font-size:12px}
.boxcontent ul{padding:0; margin:4px 0 0}
.boxcontent li{list-style:square; margin:0 0 0 15px; text-indent:0; padding:1px 0}
.boxcontent .top{border-left:3px double #ccc; padding:2px 2px 2px 8px; margin:0 0 8px}
.boxcontent .more{font:bold 11px arial; color:#666; margin:0; padding:0}
.boxcontent .meta{font:normal 11px arial; margin:2px 0 10px; padding:0; color:#a81817}

Untuk kode css nantinya bisa Anda rubah sesuai selera masing-masing.

3. Setelah kode css terpasang maka langkah selanjutnya adalah memasang script json feed.

Copy paste kode script dibawah ini dan letakan sebelum kode </head> tetapi jangan diantara kode css(<![CDATA[.....]]></b:skin>) boleh dibawah atau diatasnya.

<script src='http://idblogdesign.googlecode.com/files/jsonfeed.js' type='text/javascript'></script>

Script tersebut sudah IdBlogDesign modifikasi sehingga jika Anda kurang berkenan bisa Anda ubah sesuai dengan selera Anda. Untuk menghindari sewaktu-waktu script tersebut terhapus, maka ada baiknya Anda host script tersebut pada hosting Anda(bisa menggunakan fasilitas dari http://code.google.com dan tentunya gratis). Untuk scriptnya bisa Anda download disini.

Nah jika Anda sudah meng-upload script pada hosting Anda, maka kodenya pemasangan script dapat dirubah seperti berikut ini:
<script src='Ganti dengan url script Anda' type='text/javascript'></script>

4. Setelah kode css dan kode script terpasang maka langkah selanjutnya adalah simpan template Anda.

5. Masuk ke menu Tata Letak dan Tambah gadget, pilih HTML/JavaScript dan masukkan kode script berikut didalamnya:

Untuk Artikel terbaru:
<script src="http://idblogdesign.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=terbaru"></script>

Untuk Komentar terbaru:
<script src="http://idblogdesign.com/feeds/comments/default?alt=json-in-script&amp;callback=terbaru"></script>

Ganti warna merah diatas dengan url blog Anda. Dan jangan lupa simpan widget Anda.

2 Komentar:

  1. setelah lama ditunggu akhirnya ditulis juga tutorialnya, terimakasih mas guru.
    langsung diterapkan.

    BalasHapus
    Balasan

Update: Minta tolong usahakan komentar Anda tidak menggunakan live link untuk kebaikan bersama. :)