Membuat Feedticker di Blogspot



Alhamdulillah. Bismillah. Kita dapat berjumpa lagi Sobat, kali ini aku akan membagikan sedikit Tutorial modifikasi blog sobat, yaitu menambahkan Feedticker di blogspot, sebenarnya trik ini pernah aku berikan di blog ini tepatnya di sini . tetapi kali ini aku akan membagikan yang 70% berbeda dengan yang ku posting sebelumnya,

Sebenarnya trik ini sudah aku gunakan, di blog ku satunya info-Terselip.blogspot.com , setelah aku terpikir, mengapa gak aku share ke Sobat semuanya, hehe namun jika ada kesalahan dalam pembuatan mohon ma'af karena aku hanya Blogger paling cupu di Negeri ini. :D

Pasti sobat tahu apa itu Feedticker? ini merupakan sebuah Scrift yang di dalamnya akan menampilkan Judul artikel kita secara bergantian beserta tanggal postingannya. keren donk? iya pastinya keren donk, pasti sobat pernah melihat Newsticker di Situs berita Indonesia, mungkin mirip seperti itu lah, tetapi aku akan menggunakan Feed agar dalam penggunaanya mudah dan gampang.

Tidak panjang lebar mari kita coba membuatnya.

Tahap Pertama
1. Silakan sobat pergi ke Google API Key dan kemudia masukan URL Blog sobat.
2. Kemudian sobat akan menemukan API key Sobat seperti gambar di bawah ini.


Tahap Kedua
Kita akan berpinda ke Blogger.
1. Login » Blogger
2. Rancangan » Edit HTML
3. Sobat Cari kode ]]></b:skin>
4. Kemudian Sobat pastekan kode di bawah ini tepat di atas kode ]]></b:skin>

/*-- (Feedticker) --*/
.newspic{background:url(http://4.bp.blogspot.com/-a-mytFwSxAQ/ThFuN_y0gjI/AAAAAAAABJw/_F_anpC_Ee4/s1600/bg_navbottom.png) repeat-x;width:970px;height:28px;margin:0 auto;padding:0 auto}
.news{width:970px;line-height:1.6em;text-align:left;font-family:Arial;font-size:10px;font-weight:bold;color:blue;overflow:hidden;clear:both;margin:0 auto;padding:0 1px}
.news a:link,.news a:visited{color:#000;text-decoration:none;font-size:13px;}
.news a:hover{color:#fff;text-decoration:none}

5. Kemudian  cari lagi kode </head> kemudian masukan kode di bawah ini tepat di bawah kode </head> .

<script src='http://www.google.com/jsapi?key=MASUKAN API KEY YANG SOBAT DAPAT DARI GOOGLE DI SINI'></script>
<script src='http://codelain-blogger-namanya.googlecode.com/files/ticker.js' type='text/javascript'></script>

6. Pada Tutorial kali ini aku akan membuat Feedticker yang kutaruh di bawah Menu Navigasi, seperti di Blogku satunya info-Terselip.blogspot.com 

Maka kita harus mencari kode  <div id='wrapper'>
Kemudian kita taruh kode di bawah ini tepat di atas kode   <div id='wrapper'>
<div class='newspic'>
<div class='news'>
<div style='float:left;padding:5px 5px 5px 10px;font:bold 14px Arial;color:#333;text-transform:none;'>
JUDUL :
</div>
<div style='float:left;width:800px;padding:5px 0; position:relative; overflow:hidden;'>
<script type='text/javascript'>
var cssfeed=new gfeedrssticker("example1", "example1class", 3000, "_new")
cssfeed.addFeed("News Update", "http://Masukan URL BLOG SOBAT DI SINI/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>
</div>
</div><div style='clear:both;'></div>
</div>

*CATATAN
Pada Kode di atas terdapat JUDUL , Silakan sobat ganti dengan kemauan sobat, misalkan Berita Terbaru, Berita baru Melintas dll.
Pada Masukan URL Blog Sobat di Sini silakan sobat isikan dengan API KEY Sobat yang sobat dapat dari Google Api Key

7. Inilah tahap akhir, Jika Tutorial di atas sudah di jalani dan sudah selesai kemudian klik SAVE TEMPLATE

Dan lihatlah di halaman Blog sobat, hehe pastinya ada yang berbeda.

Alhamdulillah, Tutorial ini sudah selesai Sobat, silakan Sobat buat sendiri, Semoga Berhasil


27 Responses to "Membuat Feedticker di Blogspot"

  1. wah agan pinter bgt buat tutornya:)

    agan dah kek programmer ne :) hehehe keren sob :)

    ReplyDelete
  2. Thnkas berbagi tutorialnya sob...kapan-kapan tak coba.
    Memberatkan loading blog ndak sob..soalnya blognya udah keberatan nih

    ReplyDelete
  3. Tutorial yang menarik, nanti saya coba, :)

    ReplyDelete
  4. gagal bos. load google API nya error.. gmna nih solusinya ?? tolong dijawab

    ReplyDelete
  5. @cayun:

    oh iya sob ma'af, pada masukan URL itu di tambahakan feed misalkan kya gini.

    http://makanasi.blogspot.com/feeds/posts/default

    ma'af sob aku kurang teliti :D

    ReplyDelete
  6. Kunjungan silaturahmi sahabat di codelain..
    Tutorialnya bagus sahabat lanjutkan berbagi ilmunya sahabat

    ReplyDelete
  7. bangga aku baisi blogger matan banua sorang nagkaya ini haratnya... lanjutkan dangsanak.. hehe

    ReplyDelete
  8. Banyak belajar di sini...menyimak sahabat

    ReplyDelete
  9. @webmdmk : Makasih sob atas Supportnya.

    @Muhammad Fakhrial : Baghh, kada jua, masih nubi dingsanak ai.

    @Blog Nailah : Jangan jera berkunjung k mari yaa :D

    ReplyDelete
  10. Ijin bookmark gann, kayaknya keren ne kali diaplikasikan ... maju terus ...

    nitip link yah :
    Ada apa dengan ROK MINI ???

    ReplyDelete
  11. hasilnya kyk gitu yah, ehehehe...
    sip sipp, makasih ya infonya, kapan2 dicoba ^^

    ReplyDelete