Assalamualaikum Wr. Wb.

Pagi Semua.. Gimana ni kabarnya? oke langsung aja deh,, kali ini saya akan mengshare suatu tutorial yang aku dapatkan dari sin1aja yang akan share sekarang adalah cara membuat feed news menjadi lebih keren oke langsung aja ke tahap-tahap pembuatannya.

untuk DEMO Klik di sini

Modelnya kayak begitu slide - slide gitu linknya.

1. Simpan kode css di bawah ini di atas kode ]]></b:skin>

CODE CSS

.titlefield {
text-decoration: none;
color: #09F
}
.titlefield:hover {
text-decoration: underline
}
.labelfield {
color: brown;
font-size: 90%
}

.datefield {
color: #333;
font-size: 90%
}

#data {
width: 450px;
height: 17px;
border: 3px solid black;
padding: 5px 5px;
background-color: #CED0D1;
margin: 5px auto;
-moz-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.16);
-webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.16);
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.16);
position: relative;
overflow: hidden;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px
}

#data img {
display: block;
margin: 0 auto;
text-align: center
}

2. Simpan script di bawah ini di atas kdoe

CODE JS

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://system-svn.googlecode.com/svn/trunk/gfeedfetcher.js"></script>
<script type="text/javascript" src="http://system-svn.googlecode.com/svn/trunk/gajaxscroller.js"></script>

3. Masukan kode Script di bawah ini ddalam Gadget HTML/Javascript

<script type="text/javascript">
var cssfeed=new gfeedpausescroller("data", "posting", 2000, "_new")
cssfeed.addFeed("System", "http://sin1aja.blogspot.com/feeds/posts/default")
cssfeed.displayoptions("date")
cssfeed.setentrycontainer("div")
cssfeed.filterfeed(10, "date")
cssfeed.entries_per_page(1)
cssfeed.init()
</script>

Nah simpan deh tuh dan selesai untuk tampilannya atur sendiri jika kurang pas. ets jangan lupa ganti URL nya sama URL anda ya dan jika anda ingin mendapatkan Postingan Update dari blog lain anda Tinggal tambah kode yang seperti ini.

cssfeed.addFeed("System", "http://www.sin1aja.blogspot.com/feeds/posts/default")

Jadi seperti ini nanti kodenya.

<script type="text/javascript">
var cssfeed=new gfeedpausescroller("data", "posting", 2000, "_new")
cssfeed.addFeed("System", "http://sin1aja.blogspot.com/feeds/posts/default")
cssfeed.addFeed("Blogazine", "http://blogazine7.blogspot.com/feeds/posts/default")
cssfeed.displayoptions("date")
cssfeed.setentrycontainer("div")
cssfeed.filterfeed(10, "date")
cssfeed.entries_per_page(1)
cssfeed.init()
</script>

Begitu seterusnya jika anda ingin tambahkan web lainnya lagi, nah perhatikan kode 10 itu adalah jumlah tampilan judul postingnya anda bisa tentukan mau menampilkan berapa banyak judul postingan anda, semoga bermanfaat oh iya JS nya itu gak berat kok biar banyak begitu.

Related Post