24/05/12

Membuat Artikel dan Komentar Terbaru Blogger versi 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:

Membuat Artikel dan Komentar Terbaru Blogger versi JSON Feed

  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.
11 Komentar:
  1. setelah lama ditunggu akhirnya ditulis juga tutorialnya, terimakasih mas guru.
    langsung diterapkan.

    BalasHapus
    Balasan
  2. om yohanes kalo membuatnya berdasarkan kategori seperti di homepage idblogdesign.com .. dan cara penerapan di homepagenya.. terima kasih om yohan..

    BalasHapus
    Balasan
  3. :) kemudian.. untuk menerapkan seperti dihomepage itu gimana caranya bang ? hhee.. mirip seperti di homepage idblogdesign.com .. menggunakan tempalte imple grey.. hhe, makasih bang.

    BalasHapus
  4. jadi intinya membuat box seperti di halaman homepage ini menggunakan json feed, kemudian di halaman kategori menggunaka post snipped.. itu gimana bang ? makasi..

    BalasHapus
    Balasan
  5. masta, mu nanya donk.. hhe' itu kalo ngerubah warna link title gimana masta, begitu dipraktekan warnanya item.. mau seperti masta warnany supaya biru, sedangkan deskripsinya warna item.. makasi masta :)

    BalasHapus
    Balasan
    • hehe...Kalau pada template yang dipakai saat ini warna link header sama judul post tidak saya beri warna jadi tergantung warna link dasar pada jenis browser yang dipakai(bersifat dinamis). :)

      Hapus
  6. mau nanya kalo ini di buat popular post atau random post bisa??
    kalau bisa kasih tau dong caranya

    BalasHapus
    Balasan

Mohon maaf sebelumnya, untuk komentar yang menyertakan LiveLink tidak kami publikasikan.