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
Senin, 09 Februari 2009
"Latest Headlines" Widget
Langganan:
Posting Komentar (Atom)
Label
- Adobe Photoshope
- Affiliate
- Application
- bisnis
- Community Link Feed
- Coretan Ngladrah
- CSS
- Direct TV service
- Domain
- Download
- Dreamweaver CS3
- E-book
- Earning
- free Icon
- Informasi
- investment
- Javascript
- Komputer
- Lirik Lagu
- MP3
- Obat Tradisional
- Opini
- Paid To Click
- Pemrograman WEB
- Readmore
- Recommendations
- Sharing
- Shopping Online
- Tehnologi
- Template
- Tip
- Tip kesehatan
- Tutorial Bogger
- Widget
Said
Keren nie tutorial nya nie mas :D
Thx ya