Senin, 09 Februari 2009

"Latest Headlines" Widget

Anda ingin menampilkan "post terbaru" dalam bentuk widget seperti pada tampilan widget yang ada di atas posting pada blog ini ? Widget ini saya dapat dari blognya Hoctro, beliau memberi nama " Latest Headlines".
Di sini saya mencoba menulis kembali dalam bahasa Indonesia, kurang lebihnya begini :

1. Kita harus mendapatkan "API Key " dari sini : Google AJAX Feed API

Setelah anda masuk pada situs sesuai URL diatas, centang kotak yang ada di samping "I have read and agree with the terms and conditions". Kemudian isikan URL blog anda yang akan dipasang Widget ini pada kotak disamping "My web site URL:.......". Kemudian klik button "GENERATE API KEY"
Setelah itu Copy Paste Kode API yang anda dapat pada Notepad.

2. Masuk ke Blogger | Layout | Edit HTML, tanpa mencentang kotak "Expand Widget Templates", tambahkan kode dibawah ini di atas kode </head>.

<script src='http://www.google.com/jsapi/?key=YOUR KEY'type='text/javascript'/>
<script src='http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js' type='text/javascript'/>

<style type='text/css'>
@import url("http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css");

#feedControl {
margin-top : 20px;
margin-left: auto;
margin-right: auto;
width : 440px;
font-size: 16px;
}
.gfg-title {
color : #612e00;
background-color: #FFF3DB;
}
.gfg-title a {
color : #612e00;
}
.gfg-root {
border: 1px solid #956839;
font-family: "Georgia", sans-serif;

}
</style>
<script type='text/javascript'>
function load() {
var homeUrl = "<data:blog.homepageUrl/>";
var feed = homeUrl + "feeds/posts/default";
new GFdynamicFeedControl(feed, "feedControl",
{numResults : 4});
<h6>Widget by <a href='http://hoctro.blogspot.com/2008/09/google-ajax-feed-widget.html'>Hoctro</a></h6>

}
google.load("feeds", "1");
google.setOnLoadCallback(load);
</script>

3. Kemudian pada Page Elements, klik Add a Gadget dan pilih HTML/ Javascript dan masukkan kode dibawah ini ( Pada Sidebar atau di atas Postingan ).

<div id="feedControl"> Please Wait, Loading...</div>

4. Untuk modifikasi warna dan ukuran Width ( sesuai kelebaran ) silahkan anda atur pada : kode berwarna merah.

5. Untuk menampilkan jumlah posting yang akan ditampilkan silahkan modifikasi pada : {numResults : 4}); Nilai 4 bisa anda rubah sesuai dengan keinginan anda.

6. Paste Kode API Key yang anda dapat di YOUR KEY

Selamat mencoba

1 komentar:

Posting Komentar

Silahkan berikan komentar yang bersifat membangun, admin akan menghapus komentar yang bersifat SPAM

 
Copyright @ 2009 CoretanAsal: "Latest Headlines" Widget | Original Template: MINIMA| Modified By NATALUDIN | Top
Thanks for : BLOGGER | PHOTOBUCKET | PICASSA