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:
- Masuk ke akun blogger Anda dan pilih Template - Edit HTML - Lanjutkan.(Untuk tampilan dashboard blogger yang terbaru).
- 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. - 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>
- Setelah kode css dan kode script terpasang maka langkah selanjutnya adalah simpan template Anda.
- 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&callback=terbaru"></script>
setelah lama ditunggu akhirnya ditulis juga tutorialnya, terimakasih mas guru.
BalasHapuslangsung diterapkan.
hehe...maaf masta, baru sempat bikin tutornya. :)
Hapusom yohanes kalo membuatnya berdasarkan kategori seperti di homepage idblogdesign.com .. dan cara penerapan di homepagenya.. terima kasih om yohan..
BalasHapusWaduh...aku dipanggil om, padahal masih muda.hehe..:)
Hapusbtw tinggal diganti aja url pada langkah ke 5 menjadi:
......feeds/posts/default/-/Nama Kategori pada Blog Anda?
:) kemudian.. untuk menerapkan seperti dihomepage itu gimana caranya bang ? hhee.. mirip seperti di homepage idblogdesign.com .. menggunakan tempalte imple grey.. hhe, makasih bang.
BalasHapusjadi intinya membuat box seperti di halaman homepage ini menggunakan json feed, kemudian di halaman kategori menggunaka post snipped.. itu gimana bang ? makasi..
BalasHapusyub bener masta. hehe..kapan-kapan kalau ada waktu luang saya post dimari masta. :)
Hapusmasta, 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 :)
BalasHapushehe...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). :)
Hapusmau nanya kalo ini di buat popular post atau random post bisa??
BalasHapuskalau bisa kasih tau dong caranya
Bisa mas, cuman kalau bahasnya lewat komentar bisa g muat. Kapan-kapan kalau ada waktu luang saya post dimari mas. :)
Hapus