Anda lihat menu Free Download di sidebar kanan blog ini ? itu adalah RSS Feed dari blog Berbagi File Gratis. Bagaimana menampilkan RSS Feed dengan cara scrolling seperti itu ? Dengan marquee ? Bukan, tapi dengan Ajax Feed RSS.
Jika anda tertarik untuk membuat menu serupa (khusus untuk blogspot), yang harus anda persiapkan adalah :
1. Buat Api Key
Caranya : buka code.google.com dan cari Signup for an API Key (login dengan account google kita).
Beri tanda centang pada I have read and.... dan masukkan nama blog kita di tempat yang telah tersedia. Klik tombol Generate Api Key.
Akan muncul Google Api Key untuk Blog yang kita daftarkan. Catat dan simpan baik-baik Key tersebut (kopi paste ke Notepad).
2. file gfeedfetcher.js, Download dan upload di hosting anda sendiri. sebenarnya anda bisa juga menggunakan file punya saya, namun kerugiannya, jika file tersebut tidak bisa diakses maka RSS Feed yang anda buat tidak berfungsi.
3. file gajaxscroller.js, download dan upload di hosting anda sendiri. cara download: klik kanan link nama file dan save link as...
Sekarang kita siap untuk membuat Menu Ajax Feed RSS.
1. Masuk ke Dashboard blogger, Layout dan klik tab Edit HTML pada blog kita. Masukkan kode berikut SEBELUM </head>
<script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR-API-KEY"></script>
<script src='http://mirabewe.890m.com/wp-content/upload/gfeedfetcher.js' type='text/javascript'/>
<script src='http://mirabewe.890m.com/wp-content/upload/gajaxscroller.js' type='text/javascript'>
/***********************************************
* gAjax RSS Feeds Displayer- (c) Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
<style type='text/css'>
.titlefield{ /*CSS for RSS title link in general*/
text-decoration: none;
}
.labelfield{ /*CSS for label field in general*/
color:brown;
font-size: 90%;
}
.datefield{ /*CSS for date field in general*/
color:gray;
font-size: 90%;
}
#example1{ /*Demo 1 main container*/
width: 90%;
height: 30px;
border: 1px solid black;
padding: 4px;
background-color: lightyellow;
}
#example2{ /*Demo 2 main container*/
width: 600px;
height: 180px;
border: 1px dashed black;
padding: 4px;
background-color: #EEEEEE;
}
#example2 div ul{ /*Demo 2 UL container*/
margin: 0;
padding-left: 18px;
}
#example2 div ul li{ /*Demo 2 LI that surrounds each entry*/
margin-bottom: 4px;
}
#example3{ /*Demo 3 main container*/
width: 250px;
height: 280px;
border: 1px solid navy;
padding: 4px;
}
#example3 div p{ /*Demo 3 P element that separates each entry*/
margin-top: 0;
margin-bottom: 7px;
}
code{ /*CSS for insructions*/
color: red;
}
</style>
Ganti YOUR-API-KEY dengan API Key yang tadi kita buat.
Jika anda menyimpan file gfeedfetcher.js dan gajaxscroller.js di hosting sendiri, ganti http://mirabewe.890m.com/wp-content/upload/ dengan alamat dimana anda menyimpan file tersebut, jika tidak, abaikan saja.
Simpan hasil kerja kita.
Langkah terakhir adalah menambahkan elemen html/javascript pada blog dimana kita ingin tulisan scrolling dengan AJAX feed rss ini muncul.
Masukkan kode berikut dalam elemen HTML/Javascript :
<script type="text/javascript">
var cssfeed=new gfeedpausescroller("example1", "example1class", 2000, "_new")
cssfeed.addFeed("Judul", "http://filegratis2u.blogspot.com/feeds/posts/default ") //Specify "label" plus URL to RSS feed
cssfeed.displayoptions("date") //show the specified additional fields
cssfeed.setentrycontainer("div") //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, "date") //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
Ganti http://filegratis2u.blogspot.com/feeds/posts/default dengan alamat RSS blog yang ingin ditambahkan, misalnya blog kita yang lain atau bisa juga alamat RSS situs berita seperti Detik, Antara, dan lain-lain.
3 comments:
salam kenal mas. tukeran link? ... baca disini aja mas.. tukeren link yuk
trima kasih
wah wah.....ini aku udah penasaran sejak lama...aku ikutin di dynamic drive juga malah pusing..*emang aslinya gaptex sih*...
untung disini dijelasin detail...mau minta ijin bookmark, boleh gak harus boleh....awa kalo gak..:-t
Kalo postingan yg dipampilkan with thumb nya bisa ga ya,,, mksudnya gini, RSS feed/post yg ditampilkan d lengkapi dng image yg ada dipostingan tersebut,, kira2 gmana cara ngakalinnya ya, soalnya boenawan.com juga pake ... tpi maunya ada image/thumbnail nya.. thanks b4
Post a Comment