Monday, June 29, 2009

Artikel Terbaru dengan Google Dynamic Feeds

Posted by dav On 7:12 AM
Banyak cara untuk menampilkan urutan terbaru artikel di blogger blogspot, mulai dengan default feeds yang terbatas hanya 5 artikel terbaru yang ditampilkan, tampilkan artikel terbaru tanpa batas, tampilkan artikel berdasar kategori tertentu, bahkan pada artikel sebelumnya dibahas tampilkan artikel terbaru plus gambar thumbnail. Nah, sekarang ada lagi cara menampilkan artikel terbaru dengan bantuan Google Dynamic Feed, pada dasarnya mirip dengan artikel sebelumnya, hanya kelebihan dari blogger hack kali ini adalah dari tampilan yang dihasilkan lebih dinamis, karena judul artikel dan penggalan artikelnya akan ditampilkan secara bergantian.
Judul artikel dan penggalan artikel akan berjalan terus bergantian seperti halnya berita pada website-website besar yang menyuguhkan berita up-to-date. Para master blog menyebut teknik ini dengan nama Random - Recent Posts with . Sebagai contoh Blogger Tune-Up memasangnya pada blog Hendriono Online seperti screenshot dibawah ini. Mau mencoba...???
Sreenshot diambil dari Hendriono Online
Ikuti langkah berikut untuk memasangnya pada blogger (Blog*Spot) :
Langkah 1
Login ke Blogger, dan biarlah kita dalam keadaan Login.
Langkah 2
Daftarkan terlebih dahulu blog anda untuk memperoleh AJAX Feed API KEY melalui link ini.
Langkah 3
Masukan alamat blog anda seperti gambar dibawah ini dan klik tombol Generate API Key untuk memperoleh AJAX Feed API KEY.
Langkah 4
Copy lalu simpan terlebih dahulu AJAX Feed API KEY yang baru anda dapatkan, karakter ini tidak akan pernah berubah dan unik untuk setiap alamat blog.
Langkah 5
Kembali ke Dashboard blog kita dan masuk ke bagian "Tata Letak".
Langkah 6
Tambahkan Gadget baru dengan jenis "HTML/JavaScript", judul dikosongkan.
Langkah 7
Masukan kode dibawah ini :
<style type="text/css">
.gfg-root {width : 100%;height : auto;position : relative;overflow : hidden;text-align : center;font-family: "Arial", sans-serif; font-size: 12px; border: 0px solid #cccccc;}
.gfg-title { font-size: 12px; font-weight : bold; color : #ffffff; background-color: #000000; line-height : 1.4em; overflow : hidden; white-space : nowrap;}
.gfg-title a { color : #ffffff;}
.gfg-subtitle { font-size: 12px; font-weight : bold; color : #ffffff; background-color: #cccccc; line-height : 1.4em; overflow : hidden; white-space : nowrap; margin-bottom : 5px;}
.gfg-subtitle a { color : #3366cc;}
.gfg-entry { background-color : white; width : 100%; height : 6.9em; position : relative; overflow : hidden; text-align : left; margin-top : 3px;}
.gfg-root .gfg-entry .gf-result { position : relative; background-color : white; width : auto; height : 100%; padding-left : 20px; padding-right : 5px;}
.gfg-list { position : relative; overflow : hidden; text-align : left; margin-bottom : 5px;}
.gfg-listentry { line-height : 1.5em; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; -o-text-overflow : ellipsis; padding-left : 15px; padding-right : 5px; margin-left : 5px; margin-right : 5px;}
.gfg-listentry-odd { background-color : #F6F6F6;}
.gfg-listentry-even {}
.gfg-listentry-highlight { background-image : url('http://dedehendriono.googlepages.com/weed-bullet.gif'); background-repeat: no-repeat; background-position : center left;}
.gfg-root .gfg-entry .gf-result .gf-title { font-size: 12px; line-height : 1.2em; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; -o-text-overflow : ellipsis; margin-bottom : 2px;}
.gfg-root .gfg-entry .gf-result .gf-snippet { height : 3.8em; color: #000000; margin-top : 3px;}
.gfg-horizontal-container { position : relative;}
.gfg-horizontal-root { height : 1.5em; _height : 100%; position : relative; white-space : nowrap; overflow : hidden; text-align : center; font-family: "Arial", sans-serif; font-size: 13px; border: 1px solid #000000; padding : 5px; margin-right : 80px;}
.gfg-horizontal-root .gfg-title { font-weight : bold; background-color: #FFFFFF; line-height : 1.5em; overflow : hidden; white-space : nowrap; float : left; padding-left : 10px; padding-right : 12px; border-right: 1px solid #000000;}
.gfg-horizontal-root .gfg-title a { color : #444444; text-decoration : none;}
.gfg-horizontal-root .gfg-entry { width : auto; height : 1.5em; position : relative; overflow : hidden; text-align : left; margin-top : 0px; margin-left : 0px; padding-left : 10px;}
.gfg-horizontal-root .gfg-entry .gf-result { position : relative; background-color : white; width : 100%; height : 100%; line-height : 1.5em; overflow : hidden; white-space : nowrap;}
.gfg-horizontal-root .gfg-list { display : none;}
.gfg-horizontal-root .gfg-entry .gf-result .gf-snippet,.gfg-horizontal-root .gfg-entry .gf-result .gf-author { display : none;}
.gfg-horizontal-root .gfg-entry .gf-result .gf-title { color: #0000cc; margin-right : 3px; float : left;}
.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer { float : left;}
.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer,.gfg-horizontal-root .gfg-entry .gf-result .gf-relativePublishedDate { display : block; color: #AAAAAA;}
.gfg-branding { white-space : nowrap; overflow : hidden; text-align : left; position : absolute; right : 0px; top : 0px; width : 80px;}
.gfg-collapse-open, .gfg-collapse-closed { background-repeat : no-repeat; background-position : center; cursor : pointer; float : right; width : 17px; height : 20px;}
.gfg-collapse-open { background-image : url('arrow_open.gif');}
.gfg-collapse-closed { background-image : url('arrow_close.gif');}
.gfg-collapse-href { float : left;}
.clearFloat { clear : both;}
#feedGadget { margin-top : 4px; margin-left: auto; margin-right: auto; width : 250px; font-size: 12px; color: #9CADD0;}
</style>
<script src="http://www.google.com/jsapi/?key=API-KEY" type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>
<script type="text/javascript">
function showGadget() {
var feeds = [{title:'&nbsp;Judul Artikel',url:'http://NAMA-BLOG.blogspot.com/atom.xml?redirect=true&start-index=1&max-results=10'},];
new GFdynamicFeedControl(feeds, 'feedGadget', {numResults : 1500, stacked : true, title: "Daftar Artikel"});
}
google.load("feeds", "1");
google.setOnLoadCallback(showGadget);
</script>
<div id="feedGadget">Pengambilan...</div>
<div id="feedGadget"><a style="font-size: 10px; text-decoration:none; color: #cccccc;" href="http://modification-blog.blogspot.com/" target="_blank">Gadget by Blogger Tune-Up</a></div>
Langkah 8
Baca keterangan, simpan gadget baru tersebut, dan preview blog anda.

Keterangan :
Ada beberapa parameter (warna biru) yang perlu disetting agar hasilnya sesuai dengan keinginan kita, perhatikan secara berurutan seperti dibawah ini:
  • border: 0px ini untuk menentukan garis pinggir dari container, 0 berarti tidak menggunakan garis pinggir, ubahlah nilai 0 sesuai keinginan kita.
  • solid #cccccc; ini untuk menentukan warna garis pinggir, ubahlah nilai #cccccc sesuai dengan warna yang kita inginkan (harus paham kode warna dasar HTML).
  • font-size: 12px; ini untuk mengatur ukuran huruf judul Gadget, ubah nilai 12px jika kita ingin merubah ukuran hurufnya.
  • color : #ffffff; ini untuk mengatur warna huruf, #ffffff adalah warna putih.
  • background-color: #000000; ini untuk mengatur warna latar belakang judul gadget, #000000 adalah warna hitam.
  • width : 250px; ini untuk mengatur lebar gadget, ubah nilai 250 untuk menyesuaikan dengan lebar gadget blog kita.
  • API-KEY ; ganti kalimat API-KEY dengan AJAX Feed API KEY yang sudah kita peroleh tadi, lihat kembali langkah 2 sampai 4.
  • Judul Artikel ; Ganti dengan keinginan anda, misal Title.
  • NAMA-BLOG ; ubah dengan alamat blog kita.
  • start-index=1 ; ubah nilai 1 untuk menentukan dari posting keberapa artikel itu ditampilkan, jika diisi 5 maka artikel akan diindex dari postingan ke 5 dihitung dari artikel terbaru bukan artikel terlama.
  • max-results=10 ; ubah nilai 10 sesuai dengan artikel yang ingin kita tampilkan, jika diisi 5 maka akan ada 5 artikel yang ditampilkan.
  • Daftar Artikel ; ini adalah judul gadget, silahkan ganti sesuai keinginan, misal Artikel Terbaru.
Sebenarnya masih banyak parameter lain yang bisa kita setting sesuai dengan keinginan, Blogger Tune-Up hanya menyajikan setting parameter yang penting saja. Silahkan anda berkreasi sesuai dengan imajinasi anda. Tinggalkan komentar jika mengalami kesulitan. Happy blogging :)