Home
Guestbook
About
Message
FeedMembuat News Ticker dengan jQuery dan XtScript
Halo semua..!!! Berjumpa kembali bersama Admin di blog kesayangan kita, dimana lagi kalau bukan Cyber4rt.wapsite.me. Di kesempatan ini Admin akan memberikan sesuatu yang menarik nih buat kalian, apa tuh? yang pasti seperti pada judul posting di atas dong, hehe..
Walau hanya ngeblog di XtGem tapi gak mau kalah dong sama blog builder lain atau bahkan mungkin sama CMS. Dengan dukungan fitur XtGem yang tidak dimiliki blog builder lain memang benar-benar memanjakan kita dalam mendesain blog sekeren mungkin.
News Ticker atau orang sering menyebutnya dengan Headline News atau Flash News atau Breaking News dll memang menarik untuk di perhatikan, selain keren juga dapat membuat blog kita seperti situs berita profesional. Tapi apakah bisa blog XtGem dipasang kayak gituan? bisa kok. Nih Admin akan ceritakan bagaimana cara membuat News Ticker ala XtGem step by step.
Disini Admin mengambil daftar blognya menggunakan <xt:feed />. Jika kalian tidak suka bisa menggunakan fungsi XtBlog yang sudah dimodifikasi atau dengan Ajax juga tidak apa-apa. Menggunakan <xt:feed /> bukan tanpa masalah, problem pertama adalah <xt:feed /> tidak mengijinkan url kita sendiri. Bisa kita akali dengan menggenerate alamat RSS FEED kita menggunakan Feed Burner, mau tau bagaimana caranya? cari dulu di Google.
Masalah pertama sudah terpecahkan, ternyata setelah kita lihat Source Code <xt:feed /> terdapat elemen <br> di setiap akhir baris. Bagian yang tidak berguna ini akan mengganggu mesin News Ticker jika tidak di hilangkan. Untuk memecahkan masalah tersebut berarti kita memerlukan XtScript sebagai solusinya. Seperti kode dibawah ini.
<div class="ticker-container"> <div class="ticker-caption"> <p>Breaking News</p> </div> <ul> <!--parser:xtscript--> var $url=http://feeds.feedburner.com/username_feedburner_kamu; var $template=<div><li><span>.title. – <a href=".link.">Read More</a></span></li></div>; var $temp=call htmlspecialchars $val=$template; var $feed=<xt:feed feed="$url" number="5" template="$temp"/>; var $feed=call br2nl $val=$feed; print $feed; <!--/parser:xtscript--> </ul> </div>
Dari kode diatas kita telah menyelesaikan kerangka dari News Ticker yang akan kita buat. Jangan lupa untuk mengganti bagian username_feedburner_kamu. Selanjutnya tinggal kamu pasang CSS dan jQuery News Ticker di bagian headtags blog kamu. Link download ada di akhir acara. Cara pasangnya gampang kok, simak langkah-langkah berikut ini.
pasang jQuery library dan jQuery News Ticker plugin.
<script type="text/javascript" src="//code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript" src="ticker.js"></script>
CSS News Ticker juga dibutuhkan loh.
<link rel="stylesheet" type="text/css" href="ticker.css">
Kalau sudah selesai simpan pekerjaan kamu dan lihat apa yang terjadi, jika berhasil selamat! kamu sudah bisa membuat News Ticker sendiri. Horeee.. Selamat yaa.
